@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/raleway-v34-latin-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/raleway-v34-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/raleway-v34-latin-700.woff2') format('woff2');
}

:root {
    --weiss: #fff;
    --schwarz: #000;
    --dunkelgrau: #101010;
    --fastweiss: #f1f1f1;
    --hellgrau: #e9e9e9;
    --schattengrau: #d3d3d3;
    --mittelgrau: #ccc;
    --mitteldunkelgrau: #333;
    --tnotb: #666;
    --highlight: #ef7d00;
    --orange: #ef7d00;
    --flieder: #cd80b4;
    --hellblau: #86cfe4;
    --apfelgruen: #96c11f;
    --orangelight: #ffbe79;
    --fliederlight: #dbadcb;
    --hellblaulight: #b4ebfb;
    /* --apfelgruenlight: #cce28e; */
    --apfelgruenlight: #bae543;
    --weisstrans04: rgba(255,255,255,0.4);
    --schwarztrans01: rgba(0,0,0,0.1);
    --schwarztrans02: rgba(0,0,0,0.2);
    --schwarztrans03: rgba(0,0,0,0.3);
    --schwarztrans04: rgba(0,0,0,0.4);
    --schwarztrans05: rgba(0,0,0,0.5);
    --schwarztrans07: rgba(0,0,0,0.7);
    --hellblautrans095: rgba(134,207,228,0.95);
    --dunkelorange: #b35c00;
    --textshadow: 1px 1px 2px var(--schwarztrans03);
    --shadow: 0 0 50px var(--schwarz), 2px 0px 5px var(--schwarztrans05), 2px 0px 0px var(--schwarztrans05), -2px 0px 0px var(--schwarztrans05), 0px 2px 0px var(--schwarztrans05), 0px -2px 0px var(--schwarztrans05);

    --cookiemanmain: var(--mitteldunkelgrau);
    --cookiemanneutral: var(--weiss);
    --mapsoverlaygrau: rgba(245,245,245,0.2);

    --standardtransition: all 0.3s ease;
    --slowtransition: all 0.8s ease;
    --ultraslowtransition: all 1.2s ease;

    --hoben: 80px;
    --aspect-ratio: 21/6;
}

:focus-visible {
    outline: var(--highlight) solid 2px;
}

#header a:focus-visible {
    outline: var(--highlight) solid 2px;
    outline-offset: 10px;
}

#cookieman-modal button.btn:focus-visible {
    background: var(--highlight);
    border: 0;
}

.modal-body a:focus-visible {
    outline: none;
}

.modal-body a:focus-visible::after {
    width: 100%;
}

.cat-1, .layout-3 {
    --highlight: var(--flieder);
}

.cat-2, .layout-4 {
    --highlight: var(--hellblau);
}

.cat-3, .layout-5 {
    --highlight: var(--apfelgruen);
}

html, body {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 2000px;
    font-family: 'Raleway',arial,sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 22px;
    line-height: 1.6em;
    color: var(--weiss);
    background: var(--schwarz);
    box-shadow: 2000px 0 0 0 var(--mitteldunkelgrau), -2000px 0 0 0 var(--mitteldunkelgrau);
    display: flow-root;
}

body:has(.mob_button[data-toggled="on"]) {
    overflow: hidden;
}

strong{
    font-weight: 700;
}

.mapsoverlay {
    background: var(--mapsoverlaygrau);
}

.mapsoverlay .btn,
.mapsoverlay .btn:hover,
.mapsoverlay .btn:not(:disabled):not(.disabled):active, 
.mapsoverlay .btn:not(:disabled):not(.disabled).active, 
.mapsoverlay .show > .btn.dropdown-toggle {
    background: var(--highlight);
    color: var(--schwarz);
    font-weight: 700;
    margin-top: 20px;
}

.preview-image + .mapsoverlay {
    background: var(--schwarztrans07);
    text-shadow: var(--shadow);
}

/* .videobox .mapsoverlay {
    display: flex;
    align-items: center;
} */

.mediaconsent {
    font-size: 22px;
    line-height: 1.4em;
    font-weight: 400;
}

.mediaconsent.klein {
    font-size: 20px;
    line-height: 1.3em;
}

.mediaconsent.klein .btn {
    padding: 10px 15px;
    font-size: 18px;
    line-height: 1.3em;
    margin-top: 10px;
}

.loadok .videobox .mapsoverlay,
.loadok .video-preview {
    display: none;
}

.loadok.previewoverlay .video-preview {
    display: block;
    position: relative;
}

.loadok.previewoverlay .video-preview::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: var(--schwarztrans05);
}

.loadok.previewoverlay .video-preview::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 0px 40px 75px;
    border-color: transparent transparent transparent var(--highlight);
    transform: translate(-50%, -50%);
}

.video-embed .video-embed-item {
    width: 100%;
    height: 100%;
}

a, a:hover, a:active, a:visited {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

a::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 80%;
    height: 2px;
    background: var(--highlight);
    transition: var(--standardtransition);
}

.ce-gridgallery > a::after,
.image > a::after {
    display: none;
}

.ce-bodytext a {
    display: inline-block;
    vertical-align: top;
}

.ce-bodytext a:focus-visible {
    outline: none;
}

.ce-bodytext a:focus-visible::after {
    height: 4px;
    width: 100%;
    bottom: -3px;
}

a:hover::after {
    width: 100%;
}

figure.image > a {
    display: table;
}

.crt-widget.crt-widget-branded .crt-logo {
    position: static !important;
    display: inline-block !important;
    color: var(--weiss) !important;
    margin-top: 20px;
}

.crt-widget.crt-widget-branded .crt-logo::after,
.crt-post-text a::after,
.crt-pagination a::after,
.crt-popup-container a::after {
    display: none !important;
}

.audio-embed, .audio-caption {
    float: left;
    clear: both;
    width: 100%;
}

h1, h2 {
    font-size: 76px;
    line-height: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 40px 0;
}

.wort + h1,
.wort + h2 {
    margin-top: -70px;
    position: relative;
    z-index: 1;
}

h3, .referenzleistungen h2, h2.wieh3 {
    font-size: 60px;
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 30px 0;
}

.referenzleistungen h2, h2.wieh3 {
    color: var(--highlight);
}

h3:has(span:nth-child(2)) > span:first-child{
    font-weight: 400;
}

h2.zweizeilig {
    margin: 0;
}

h3.folgt {
    font-size: 35px;
    line-height: 1.2em;
    font-weight: 700;
    text-transform: none;
    margin: 50px 0 100px 0;
}

h4 {
    font-size: 26px;
    line-height: 1.6em;
    font-weight: 700;
    margin: 0 0 10px 0;
    padding: 0;
}

#header.sub .ce-bodytext,
h1, h2, h3, h4, h5{
    hyphens: auto;
    hyphenate-limit-chars: auto 6 5;
}

.frame-bildslider .image-caption{
    hyphens: auto;
    -webkit-hyphens: auto;
    margin: 0 5px;
}

header .wort {
    font-size: 240px;
    line-height: 1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--highlight);    
    display: inline-block;
    transform: scale(0);
    transition: var(--slowtransition);
    position: relative;
    z-index: 0;
}

header .wort[data-viewport="onscreen"] {
    transform: scale(1);
}

header span {
    display: block;
}

.headline {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
}

.headline > span {
    font-size: 26px;
    line-height: 1.4em;
}

.headline > span:first-child {
    font-size: 50px;
    line-height: 1.2em;
    text-transform: uppercase;
    margin: 20px 0 0 0;
}

p {
    margin: 0 0 10px 0;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.ce-center .ce-outer {
    position: relative;
    float: left;
    clear: both;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%;
}

img:not(.figure-img) {
    max-width: 100%;
    height: auto;
}

.video[data-type="external"] .video-embed {
    padding-top: 0;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.videobox,
.video-embed {
    position: relative;
}

.videoiframelink, .videoiframelink:hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: hidden;
    text-indent: -9999px;
    color: transparent;
} 

.videoiframelink::after {
    display: none;
}

.ce-gallery.videocontainer {
    width: 100%;
	float: left;
	clear: both;  
}

.ce-gallery.videocontainer .video-column {
    max-width: 100%;
    float: left;
}

.ce-gallery.videocontainer figure.video {
	display: block;
}

/* -- Headervideo -- */
.frame-type-textmedia.frame-layout-11 > .rahmen {
    width: 100% !important;
    max-width: none !important;
    float: left !important;
    clear: both !important;
    margin: 0 !important;
    display: block !important;
}

.frame-type-textmedia.frame-layout-11 .ce-gallery {
    margin: 0;
    width: 100%;
    float: left;
    clear: both;
    position: relative;
}

.frame-type-textmedia.frame-layout-11 .ce-gallery::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.frame-type-textmedia.frame-layout-11 .video-embed .video-preview {
    height: 100%;
}

.frame-type-textmedia.frame-layout-11 .video-embed .video-preview img {
    width: 100%;
    max-width: none;
    height: auto;
}

.frame-type-textmedia.frame-layout-11.loadingok .video-embed .video-preview {
    display: none;
}

.frame-type-textmedia.frame-layout-11 .video[data-type="internal"] .video-embed .video-embed-item {
    width: 100%;
}

body.lb_body {
    height: auto !important;
    max-width: 580px;
    width: 90vw;
}

.lb_body .ce-intext.ce-left .ce-gallery,
.lb_body .ce-intext.ce-right .ce-gallery {
    margin-bottom: 0;
}

.lb_body .ce-intext.ce-left .ce-bodytext,
.lb_body .ce-intext.ce-right .ce-bodytext {
    margin-top: 15px;
}

#lightbox {
    width: 96%;
    margin: 10px 2%;
}

.fancybox-caption__body {
    font-size: 30px;
    line-height: 1.4em;
    font-weight: 700;
    color: var(--highlight);
    max-width: 900px;
    margin: 0 auto;
}

/* body.compensate-for-scrollbar {
    overflow: hidden;
    padding-right: 17px;
    width: calc(100% - 17px);
    box-shadow: inset -17px 0 0 0 var(--mitteldunkelgrau);
}
 */

body.compensate-for-scrollbar {
    overflow: auto;
}

.lb_body.modal-open {
    overflow: auto !important;
}

.lb_body .modal-backdrop {
    display: none;
}

.lb_body #cookieman-modal {
    position: static;
}
/* -------------------------------------------------------------- */

.more, 
.more:link, 
.more:active, 
.more:visited {
    display: inline-block;
    font-size: 40px;
    line-height: 1.2em;
    font-weight: 700;
    color: inherit;
    position: relative;
}

.link-internal, 
.link-internal:link, 
.link-internal:active, 
.link-internal:visited {
    display: inline-block;
    font-weight: 700;
    color: inherit;
    position: relative;
}

.more::after,
.link-internal::after {
    content: '';
    display: block;
    width: 60%;
    height: 2px;
    background: var(--highlight);
    position: absolute;
    bottom: -7px;
    left: 0;
    transition: var(--standardtransition);
}

.link-internal::after {
    bottom: -3px;
}

.more:hover {
    color: inherit;
}

.more:hover::after {
    width: 100%;
}

#inhaltsbereich.sub .ce-bodytext a:not(.more, .link-internal) {
    display: inline;
    text-decoration: underline;
    text-decoration-color: var(--highlight);
    text-underline-offset: 3px;
}

#inhaltsbereich.sub .ce-bodytext a:not(.more, .link-internal)::after {
    display: none;
}

#inhaltsbereich.sub .ce-bodytext a.link-file{
    padding: 10px 0 10px 40px;
    position: relative;
    display: block;
}

#inhaltsbereich.sub .ce-bodytext a.link-file::before{
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    background: url(/fileadmin/cn_website/images/pdf.svg) center left/contain no-repeat;
}

/* #inhaltsbereich.sub .ce-bodytext a.link-internal, 
#inhaltsbereich.sub .ce-bodytext a.link-internal:hover, 
#inhaltsbereich.sub .ce-bodytext a.link-internal:active, 
#inhaltsbereich.sub .ce-bodytext a.link-internal:visited,
.link-internal, 
.link-internal:hover, 
.link-internal:active, 
.link-internal:visited {
    display: inline-block !important;
    vertical-align: top;
    padding: 10px 20px;
    background: var(--orangelight);
    color: var(--schwarz);
    border-radius: 0 10px 0 10px;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 700;
    transition: var(--standardtransition);
    text-shadow: none;
    text-decoration: none !important;
}

.cat-1 .link-internal {
    background: var(--fliederlight);
}

.cat-2 .link-internal {
    background: var(--hellblaulight);
}

.cat-3 .link-internal {
    background: var(--apfelgruenlight);
}

.link-internal:hover {
    background: var(--highlight);
}

.link-internal::after {
    display: none;
} */

#inhaltsbereich ul:not(.leistungskonfigurator) {
    list-style: none;
    margin: 0;
    padding: 0;
}

#inhaltsbereich ul:not(.leistungskonfigurator) li {
    margin: 0 0 5px 0;
    padding: 0 0 0 20px;
    position: relative;
}

#inhaltsbereich ul:not(.leistungskonfigurator) li::before {
    content: '\25B2';
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg) scaleY(0.7);
    font-size: 0.7em;
    color: var(--highlight);
}

ul.neben {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.neben li {
    display: inline-block;
    vertical-align: top;
    margin: 0 50px 0 0;
}

#oben, 
#header,
.konfiguratorbereich,
.konfiguratorbereich > .frame,
#inhaltsbereich, 
#inhaltsbereich > .frame, 
#footer,
.footerinhalt,
.unten {
    float: left;
    clear: both;
    width: 100%;
}

#oben > .rahmen,
.footerinhalt > .rahmen,
.unten > .rahmen {
    width: 92%;
    max-width: 2000px;
    margin: 0 auto;
}

#inhaltsbereich > .frame > .rahmen,
.konfiguratorbereich > .frame > .rahmen,
.konfiguratorbereich > .frame-style-1column.frame-layout-50 > .rahmen .col-100 > .frame > .rahmen,
.konfiguratorbereich > .frame-style-1column.frame-layout-50 > .rahmen .col-100 > .rahmen,
.news-single > .article > .rahmen,
.news-list-container.leistungen > .rahmen,
.news-list-container.leistungen + .rahmen,
.news-list-container.projekte > .rahmen,
.news-list-container.projekte + .rahmen {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    float: none;
}

#inhaltsbereich > .frame-vollbreite > .rahmen{
    width: 100%;
    max-width: 100%;
}

#inhaltsbereich.sub .frame.frame-vollbreite .ce-bodytext{
    width: 100%;
    max-width: 100%;
}

.news-list-container.leistungen + .rahmen {
    clear: both;
}

.news-single > .article > .rahmen.breiter {
    max-width: 1360px;
}

#inhaltsbereich > .frame-type-news_newsdetail > .rahmen,
#inhaltsbereich > .frame-type-news_newsliststicky > .rahmen {
    width: 100%;
    max-width: unset;
    margin: 0;
    float: left;
    clear: both;
}

.news-list-container .article > .rahmen,
#inhaltsbereich > .frame-type-news_newsliststicky .article > .rahmen {
    width: 92%;
    margin: 0 auto;
    float: none;
}

#inhaltsbereich.sub > .frame-type-news_newsliststicky > .rahmen > header {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
    float: none;
}

#inhaltsbereich.sub > .frame-type-news_newsliststicky + .frame-type-textmedia.frame-layout-60{
    padding-top: 20px !important;
}

#inhaltsbereich.sub > .frame-type-news_newsliststicky + .frame-type-textmedia.frame-layout-60 .ce-bodytext{
    max-width: 100%;
    width: 100%;
}

.frame-type-news_newsdetail .news-backlink-wrap a,
#inhaltsbereich.sub > .frame-type-news_newsliststicky + .frame-type-textmedia.frame-layout-60 a{
    display: inline-block;
    font-size: 40px;
    line-height: 1.2em;
    font-weight: 700;
    color: inherit;
    position: relative;
}

.page1 #inhaltsbereich > .frame-layout-1 {
    padding: 140px 0;
}

/* .page1 #inhaltsbereich > .frame-layout-1 {
    background: var(--schwarz);
    padding: 100px 0;
}

.page1 #inhaltsbereich > .frame-layout-2 {
    background: var(--weiss);
    color: var(--schwarz);
    padding: 100px 0;
} */

#oben {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 5;
    width: 100%;
    max-width: 2000px;
    transform: translateX(-50%);
    background: var(--schwarztrans07);
    backdrop-filter: blur(5px);
    box-shadow: 2000px 0 0 0 var(--mitteldunkelgrau), -2000px 0 0 0 var(--mitteldunkelgrau);
}

body::before {
    content: '';
    position: fixed;
    top: var(--hoben);
    left: 50%;
    right: 0;
    height: 0;
    width: 100%;
    max-width: 2000px;
    transform: translateX(-50%);
    z-index: 4;
    background: var(--schwarztrans07);
    backdrop-filter: blur(5px);
    transition: var(--standardtransition);
}

body:has(.mob_button[data-toggled="on"])::before {
    content: '';
    height: calc(100% - var(--hoben));
}

#oben > .rahmen > .frame-type-textmedia {
    float: left;
    margin: 10px 0;
    height: 60px;
    position: relative;
    overflow: hidden;
    /* transform: scale(0.75); */
    transform-origin: left center;
    width: 88px;
    transition: all 0.3s ease-in;
    transition-delay: 3.5s;
    @starting-style {
        width: 252px;
        /* transform: scale(1); */
    }
}

#oben > .rahmen > .frame-type-textmedia .ce-gallery {
    margin: 0;
}

#oben > .rahmen > .frame-type-textmedia .ce-gallery .ce-column {
    margin: 0;
}

#oben > .rahmen > .frame-type-textmedia,
#oben > .rahmen > .frame-type-textmedia .ce-textpic,
#oben > .rahmen > .frame-type-textmedia .ce-gallery,
#oben > .rahmen > .frame-type-textmedia .ce-row,
#oben > .rahmen > .frame-type-textmedia .ce-column,
#oben > .rahmen > .frame-type-textmedia .image {
    overflow: visible;
}

#oben > .rahmen > .frame-type-textmedia .ce-gallery .ce-column:last-child {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 1;
    transition: opacity 0.3s ease-in;
    transition-delay: 3.5s;
    @starting-style {
        opacity: 0;
    }
}

#oben > .rahmen > .frame-type-textmedia .ce-gallery .ce-column:first-child {
    width: 252px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
    transition-delay: 3.5s;
    @starting-style {
        opacity: 1;
    }
}

#oben > .rahmen > .frame-type-textmedia:hover {
    width: 252px;
    transform: scale(1);
    transition-delay: 0;
    transition: all 0.1s ease-out 0s;
}

#oben > .rahmen > .frame-type-textmedia:hover .ce-gallery .ce-column:last-child {
    opacity: 0 !important;
    transition: opacity 0.1s ease-out 0s;
}

#oben > .rahmen > .frame-type-textmedia:hover .ce-gallery .ce-column:first-child {
    opacity: 1;
    transition: opacity 0.1s ease-out 0s;
}

#oben > .rahmen > .frame-type-textmedia .ce-gallery .ce-image {
    display: block;
    padding: 10px;
}

#oben > .rahmen > .frame-type-textmedia:has(:focus-visible) a {
    outline: var(--highlight) solid 3px;
    outline-offset: 8px;
}

.frame-medialink_tabindex_bild1 a::after {
    display: none;
}

/* -- Mob-Button -- */
.mob_button {
    float: right;
    position: relative;
    z-index: 5;
    margin: 10px -10px 0 0;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: block;
}
 
.mob_button span {
    background-color: var(--orange);
    height: 3px;
    right: 10px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 30px;
    transition: all 0.3s ease;
}
 
.mob_button span::after, 
.mob_button span::before {
    backface-visibility: hidden;
    background-color: var(--orange);
    content: "";
    height: 3px;
    position: absolute;
    right: 0;
    transform: translateZ(0px);
    transition: all 0.3s ease;
    width: 40px;
    display: block;
}
 
.mob_button span::before {
    transform: translateY(-12px);
}
 
.mob_button span::after {
    transform: translateY(12px);
}
 
.mob_button:hover span {
    width: 40px;
}

.mob_button:hover span::before {
    width: 30px;
}

.mob_button:hover span::after {
    width: 30px;
}

.mob_button[data-toggled="on"] span {
    background-color: transparent;
}
 
.mob_button[data-toggled="on"] span::before {
    transform: translateY(0px) rotate(-45deg);
    width: 40px;
}
 
.mob_button[data-toggled="on"] span::after {
    transform: translateY(0px) rotate(45deg);
    width: 40px;
}

.mob_button[data-toggled="on"]:hover span::before,
.mob_button[data-toggled="on"]:hover span::after {
    width: 30px;
    right: 5px;
}

.hauptnavi {
    display: flex;
    justify-content: space-between;
    transform: scale(0) rotate(180deg);
    transform-origin: right top;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    top: var(--hoben);
    left: 0;
    right: 0;
    background: var(--dunkelgrau);
    box-shadow: 0 100px 100px 0px var(--schwarz), inset 0 0 2px 0 var(--schwarz);
    color: var(--weiss);
    --highlight: var(--weiss);
    width: 84%;
    margin: 0 3%;
    padding: 30px 5%;
    height: calc(100vh - var(--hoben) - 110px);
    transition: var(--slowtransition);
    border-radius: 0 0 0 12vw;
}

.hauptnavi a {
    font-weight: 300;
}

.hauptnavi a::after {
    display: none;
}

.mob_button[data-toggled="on"] + .hauptnavi {
    overflow: auto;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    
    scrollbar-color: var(--orangelight) transparent;
    scrollbar-width: thin;
}

.hnavi {
    display: flex;
    justify-content: space-between;
    list-style: none;
    /* width: 72%; */
    width: 100%;
    margin: 20px 0 0 0;
    padding: 0;
}

.hnavi > li {
    display: block;
    width: 23%;
}

.hnavi > li:nth-child(2) {
    width: 46%;
}

.hnavi > li:nth-child(3) {
    width: 25%;
}

/* ul.referenznavi {
    width: 20%;
    list-style: none;
}

.referenznavi > li {
    display: block;
} */

.hnavi > li > a /* ,
.referenznavi > li > a */ {
    font-size: 60px;
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
}

.hnavi > li:nth-child(1) > a {
    color: var(--flieder);
}

.hnavi > li:nth-child(2) > a {
    color: var(--hellblau);
}

/* .referenznavi > li > a, */
.hnavi > li:nth-child(3) > a {
    color: var(--apfelgruen);
}

ul.ebene2 {
    list-style: none;
    margin: 20px 0 0 0;
    padding: 0;
}

ul.ebene2 > li:not(.ifsub) {
    display: block;
    float: left;
    margin: 0 8px 8px 0;
}

ul.ebene2 > li.articletype-1:not(.ifsub) {
    float: none;
}

ul.ebene2 > li > a {
    display: inline-block;
    padding: 10px 40px;
}

ul.ebene2 > li.ifsub + li.ifsub {
    margin-top: 20px;
}

ul.ebene2 > li.ifsub > a::before,
ul.ebene2 > li.ifsub > a::after{
    content: '';
    width: 35px;
    height: 2px;
    background: var(--weiss);
    left: 0;
    top: 27px;
    position: absolute;
    display: block !important;
}

ul.ebene2 > li.ifsub > a::after{
    width: 80px;
    left: calc(100% - 35px);
    transition: var(--standardtransition);
}

ul.ebene2 > li.ifsub > a:hover::after{
    width: 100px;
}

ul.ebene2 > li:not(.ifsub) > a {
    display: inline-block;
    padding: 10px 20px;
    background: var(--fliederlight);
    color: var(--schwarz);
    border-radius: 0 10px 0 10px;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 700;
    transition: var(--standardtransition);
}

ul.ebene2 > li:not(.ifsub) > a:hover {
    background: var(--flieder);
}

/* .referenznavi > li > ul.ebene2 > li:not(.ifsub) > a, */
.hnavi > li:nth-child(3) > ul.ebene2 > li:not(.ifsub) > a {
    background: var(--apfelgruenlight);
}

/* .referenznavi > li > ul.ebene2 > li:not(.ifsub) > a:hover, */
.hnavi > li:nth-child(3) > ul.ebene2 > li:not(.ifsub) > a:hover {
    background: var(--apfelgruen);
}

ul.ebene3 {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.ebene3 > li {
    display: inline-block;
    vertical-align: bottom;
    margin: 0 8px 8px 0;
}

ul.ebene3 > li > a {
    display: inline-block;
    padding: 10px 20px;
    background: var(--hellblaulight);
    color: var(--schwarz);
    border-radius: 0 10px 0 10px;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 700;
    transition: var(--standardtransition);
}

ul.ebene3 > li > a:hover {
    background: var(--hellblau);
}
/* ----------------------------------- */

#header {
    margin-top: var(--hoben);
    padding: 60px 0 170px;
}

.page1 #header{
    height: 100vh;
    width: 100%;
    margin-top: 0;
    padding-top: 0;
}

.page1 #header > .frame{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page1 #header > .frame > .rahmen{
    width: 100%;
}

.page1 #header .down {
    content: '';
    background: url("../images/pfeil_unten.svg") center center/contain no-repeat;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 40px;
    left: calc(50% - 30px);
    color: var(--weiss);
    font-size: 28px;
    line-height: 25px;
    font-weight: 300;
    letter-spacing: -1px;
    width: 60px;
    height: 60px;
    padding: 0;
    text-align: left;
    opacity: 80%;
    cursor: pointer;
    transition: opacity 0.3s ease-in;
    transition-delay: 3s;
    animation: pfeil 3s infinite;
    @starting-style {
        opacity: 0%;
    }
}

@keyframes pfeil{
    0%{
        bottom: 40px;
    }
    60%{
        bottom: 40px;
    }
    80%{
        bottom: 30px;
    }
    100%{
        bottom: 40px;
    }
}

.page1 #header .down:hover{
    opacity: 100%;
}

#header.sub {
    padding: 0;
}

#header a:focus-visible {
    outline: none;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 10px;
}

#header .ce-bodytext ul {
    list-style: none;
    margin: 0;
    padding: 40px 0;
    font-weight: 700;
    font-size: 220px;
    /* line-height: 1.1em; */
    line-height: 0.79em;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

#header .ce-bodytext ul li:nth-child(3n+1) {
    --highlight: var(--flieder);
    color: var(--flieder);
    /* text-indent: -15%; */
    text-indent: -21%;
    position: relative;
    transform: scaleX(1) translateX(0);
    transform-origin: left;
    transition: all 2.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition-delay: 0s;
    @starting-style {
        transform: scaleX(0.1) translateX(-2000px);
    }
}

#header .ce-bodytext ul li:nth-child(3n+2) {
    --highlight: var(--hellblau);
    color: var(--hellblau);
    /* text-indent: 15%; */
    text-indent: 9%;
    position: relative;
    transform: scaleX(1) translateX(0);
    transform-origin: right;
    transition: all 2.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition-delay: 0.4s;
    @starting-style {
        transform: scaleX(0.1) translateX(2000px);
    }
}

#header .ce-bodytext ul li:nth-child(3n+3) {
    --highlight: var(--apfelgruen);
    color: var(--apfelgruen);
    text-indent: -15%;
    text-indent: -9%;
    position: relative;
    transform: scaleX(1) translateX(0);
    transform-origin: left;
    transition: all 2.5s cubic-bezier(0.190, 1.000, 0.220, 1.000);
    transition-delay: 0.8s;
    @starting-style {
        transform: scaleX(0.1) translateX(-2000px);
    }
}

#header .ce-bodytext ul li:nth-child(1) a {
    animation: letterspacing1 3s infinite;
}
#header .ce-bodytext ul li:nth-child(2) a {
    animation: letterspacing2 3s infinite;
}
#header .ce-bodytext ul li:nth-child(3) a {
    animation: letterspacing3 3s infinite;
}

#header .ce-bodytext ul li a{
    letter-spacing: 0;
    transition: var(--standardtransition);
}

#header .ce-bodytext ul li a:hover{
    animation-play-state: paused;
    letter-spacing: 25px;
}

#header .ce-bodytext ul li a::after {
    display: none;
}

/* #header .ce-bodytext ul li a:hover {
   letter-spacing: 5px;
} */

@keyframes letterspacing1{
    0%{
        letter-spacing: 0px;
    }
    20%{
        letter-spacing: 5px;
    }
    40%{
        letter-spacing: 0px;
    }
    60%{
        letter-spacing: 0px;
    }
    100%{
        letter-spacing: 0px;
    }
}
@keyframes letterspacing2{
    0%{
        letter-spacing: 0px;
    }
    20%{
        letter-spacing: 0px;
    }
    40%{
        letter-spacing: 5px;
    }
    60%{
        letter-spacing: 0px;
    }
    80%{
        letter-spacing: 0px;
    }
    100%{
        letter-spacing: 0px;
    }
}
@keyframes letterspacing3{
    0%{
        letter-spacing: 0px;
    }
    20%{
        letter-spacing: 0px;
    }
    40%{
        letter-spacing: 0px;
    }
    60%{
        letter-spacing: 5px;
    }
    80%{
        letter-spacing: 0px;
    }
    100%{
        letter-spacing: 0px;
    }
}



/* -- Konfigurator -- */
.konfiguratorbereich {
    font-size: 20px;
    line-height: 1.6em;
    position: relative;
}

.konfiguratorbereich .frame-style-1column {
    display: none;
}

.konfiguratorbereich.toggled .frame-style-1column .col-100[data-toggled="on"],
.konfiguratorbereich .frame-style-1column:has(.col-100[data-toggled="on"]) {
    display: block;
}

.konfiguratorbereich .ankerlink.more {
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    transition: var(--standardtransition);
}

.konfiguratorbereich.toggled .ankerlink.more::before,
.konfiguratorbereich:has(.konfigurator-item[data-toggled="on"]) .ankerlink.more {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}

/* .konfiguratorbereich::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: -50px;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: var(--schwarztrans07);
    background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.0) 100%);
    opacity: 1;
    transition: var(--ultraslowtransition);
} */

.konfiguratorbereich[data-viewport="onscreen"]::after {
    opacity: 0;
    top: 100%;
}

.konfiguratorbereich .frame-style-2column > .rahmen > header {
    float: left;
}

.konfiguratorbereich .frame-style-2column h2 {
    font-size: 60px;
    max-width: 800px;
    line-height: 1em;
    margin: 0;
}

.konfiguratorbereich .frame-style-2column h3 {
    font-size: 24px;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.konfiguratorbereich .frame-style-2column .cn_multicontent_teaser {
    float: right;
    background: linear-gradient(30deg, var(--orange) 0%, var(--dunkelorange) 50%);
    color: var(--weiss);
    font-size: 20px;
    line-height: 1.2em;
    font-weight: 700;
    text-shadow: var(--textshadow);
    display: block;
    width: 110px;
    padding: 20px 30px;
    border-radius: 30px 30px 30px 0;
    position: relative;
    bottom: -30px;
    right: 40px;
    z-index: 1;
}

.konfiguratorbereich .frame-style-2column .cn_multicontent_teaser::before {
    content: '';
    position: absolute;
    left: -30px;
    bottom: 0;
    display: block;
    width: 30px;
    height: 30px;
    background: url(../images/eck_sprechblase_orange.svg) right bottom no-repeat;
    background-size: 30px auto;
}

.konfiguratorbereich .frame-style-2column .cn_multicontent_teaser p {
    margin: 0;
}

.konfiguratorbereich .frame-style-2column .tx_cn-columns {
    float: left;
    clear: both;
    width: 100%;
    margin: 70px 0 50px;    
    color: var(--schwarz);
}

.konfiguratorbereich .frame-style-2column .tx_cn-columns .row > div > div > .rahmen > header {
    position: relative;
    z-index: 2;
}

ul.leistungskonfigurator {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2em;
    position: relative;
    z-index: 0;
}

ul.leistungskonfigurator::before {
    content: '';
    display: block;
    position: absolute;
    left: -90px;
    right: 0;
    top: -130px;
    bottom: -40px;
    z-index: 0;
    background: var(--weiss);
    border-radius: 50px 0;
    box-shadow: inset -100px 0 80px -10px var(--schwarztrans01);
}

.col-66 ul.leistungskonfigurator {
    column-count: 2;
    z-index: 1;
}

.col-66 ul.leistungskonfigurator::before {
    background: var(--weiss);
    left: -50px;
    right: -30px;
    top: -90px;
    bottom: -20px;
}

ul.leistungskonfigurator li {
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 0 0 0 50px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

ul.leistungskonfigurator li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    z-index: 0;
    background: var(--orange);
    border: 1px solid var(--dunkelorange);
    opacity: 0.4;
    width: 32px;
    height: 17px;
    display: inline-block;
    vertical-align: top;
    transition: var(--standardtransition);
    border-radius: 25px;
}

ul.leistungskonfigurator li::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 2px;
    z-index: 1;
    height: 17px;
    width: 17px;
    background-color: var(--weiss);
    transition: var(--standardtransition);
    border-radius: 50%;
}

ul.leistungskonfigurator li[data-toggled="on"]::before {
    background: var(--orange);
    border: 1px solid var(--dunkelorange);
    opacity: 1;
}

ul.leistungskonfigurator li[data-toggled="on"]::after {
    left: 16px;
}

ul.leistungskonfigurator li span {
    display: inline-block;
    vertical-align: top;
    /* transition: var(--standardtransition); */
    background: none;
    color: var(--schwarz);
}

ul.leistungskonfigurator li:hover span {
    color: var(--schwarz);
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.konfiguratormenu {
    display: none;
    float: left;
    position: fixed;
    z-index: 3;
    left: 0;
    /* bottom: 70px; */
    top: 30vh;
    background: var(--schwarz);
    color: var(--weiss);
    width: 74%;
    max-width: 375px;
    padding: 0 10px 0 30px;
    margin: 0;
    list-style: none;
    /* box-shadow: 0 0 3px 0 var(--schwarztrans03), inset -50px 0 40px -5px var(--schwarztrans01); */
    border-radius: 0 0 40px 0;
    border: 2px solid var(--weiss);
    border-left: none
}

.konfiguratormenu #konfnav {
    display: none;
}

 /* .page1 .konfiguratorbereich {
    transform: translateY(30%);
    transform-origin: center;
    opacity: 0;
    transition: all 0.3s ease-in;
} */
/*
.page1 .konfiguratorbereich[data-viewport="onscreen"] .konfiguratormenu {
    opacity: 1;
} */

#inhaltsbereich ul#anker-konfigurator {
    /* max-height: 400px; */
    max-height: calc(70vh - 100px);
    overflow: visible;
    overflow-y: auto;
    scrollbar-color: var(--hellgrau) transparent;
    scrollbar-width: thin;
    margin: 15px 0 10px;
}

#inhaltsbereich .konfiguratormenu:has(ul#anker-konfigurator[data-toggled="off"]) {
    display: none;
}

.page1 .konfiguratorbereich.toggled .konfiguratormenu,
.page1 .konfiguratormenu:has(ul#anker-konfigurator[data-toggled="on"]),
#inhaltsbereich ul#anker-konfigurator[data-toggled="on"],
body:not(.page1) .konfiguratormenu:has(ul#anker-konfigurator li:nth-child(2)) {
    display: block;
}

body:not(.page1) .konfiguratormenu {
    transform: translateX(-100%);
}

.page1 .konfiguratormenu {
    transform: translateX(-100%);
}

@media (hover: hover) and (min-width: 1020px) {
    body:not(.page1) .konfiguratormenu {
        transition: all 0.5s ease 1s;
    }
    
    .page1 .konfiguratormenu {
        transition: all 0.5s ease 1s;
    }

    body:not(.page1) .konfiguratormenu:hover {
        transform: translateX(0px);
        transition: all 0.5s ease 0s;
    }
    
    .page1 .konfiguratormenu:hover {
        transform: translateX(0px);
        transition: all 0.5s ease 0s;
    }
}

@media (hover: none) {
    body:not(.page1) .konfiguratormenu {
        transition: none;
    }
    
    .page1 .konfiguratormenu {
        transition: none;
    }

    .konfiguratormenu:has(#konfnav:checked) {
        transform: translateX(0px);
        transition: all 0.5s ease 0s;
    }
}

.konfiguratormenu ul {
    margin: 0;
    padding: 0;
}

.konfiguratormenu label[for="konfnav"] {
    display: block;
    width: 50px;
    height: 50px;
    background: url(../images/checkbox.svg) center center no-repeat var(--schwarz);
    background-size: 40px auto;
    position: absolute;
    right: -52px;
    top: -2px;
    /* box-shadow: -3px 0 3px 0 var(--schattengrau), 0 0 3px 0 var(--schwarztrans03); */
    border-radius: 0 0 10px 0;
    border: 2px solid var(--weiss);
    border-left: none;
}

.konfiguratormenu label[for="konfnav"] .konfbuttonlabel {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
}

/* body:not(.page1) .konfiguratormenu::before {
    content: '\2026';
    display: block;
    text-align: center;
    color: var(--schwarz);
    font-family: times, serif;
    transform: scaleX(0.9);
    font-size: 38px;
    line-height: 1.2em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 58px;
    z-index: 2;
} */

.page1 #inhaltsbereich ul#anker-konfigurator li {
    display: none;
    width: 90%;
    margin-right: 10%;
}

.page1 #inhaltsbereich ul#anker-konfigurator li[data-toggled="on"] {
    display: block;
}

body:not(.page1) #inhaltsbereich .konfiguratormenu:has(ul#anker-konfigurator li:nth-child(2)) li {
    display: block;
}

#inhaltsbereich .konfiguratormenu:has(ul#anker-konfigurator li:nth-child(2)) li {
    padding: 0;
    margin: 0;
}

#inhaltsbereich ul#anker-konfigurator li a {
    display: inline-block;
    vertical-align: top;
    padding: 10px 10px 10px 0;
    color: var(--weiss);
    font-size: 20px;
    line-height: 1.1em;
    font-weight: 300;
}

#inhaltsbereich ul#anker-konfigurator li a:has(+ .zuruecksetzen) {
    padding: 10px 5px 15px 0;
    font-weight: 700;
}

#inhaltsbereich ul#anker-konfigurator li a + .zuruecksetzen {
    display: inline-block;
    vertical-align: top;
    width: 16px;
    height: 16px;
    padding: 10px;
    margin: 0;
    background: url(../images/bin.svg) center center no-repeat var(--fastweiss);
    background-size: auto 22px;
    text-indent: -999px;
    border-radius: 100%;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: var(--standardtransition);
}

#inhaltsbereich ul#anker-konfigurator li a + .zuruecksetzen:hover {
    background-color: var(--mittelgrau);
}

#inhaltsbereich ul#anker-konfigurator li a::after {
    display: none;
}

#inhaltsbereich ul#anker-konfigurator li a:hover {
    font-weight: 700;
}

#inhaltsbereich ul#anker-konfigurator li::before {
    display: none;
}

.konfiguratorbereich.toggled .ankerlink.more::before,
.konfiguratorbereich:has(.konfigurator-item[data-toggled="on"]) .ankerlink.more::before {
    content: '   ';
    display: block;
    position: absolute;
    z-index: 1;
    top: 15px;
    right: -40px;
    transform: rotate(90deg);
    color: var(--weiss);
    font-size: 28px;
    line-height: 25px;
    font-weight: 300;
    letter-spacing: -1px;
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: left;
    animation: showmore 1.8s infinite;
}

@keyframes showmore {
    0% {
        content: '   ';
    }
    25% {
        content: '\276D   ';
    }
    50% {
        content: '\276D\276D ';
    }
    75% {
        content: '\276D\276D\276D';
    }
}

/* -- konfigurierte Inhaltselemente -- */

.konfiguratorbereich > .frame-style-1column.frame-layout-50 > .rahmen {
    width: 100%;
    max-width: unset;
    margin: 0;
    float: left;
    clear: both;
}

.frame-style-1column.frame-layout-50 .row > .col-100 {
    padding: 100px 0 80px;
}

.frame-style-1column.frame-layout-50 .row > .col-100.odd {
    background: var(--weiss);
    color: var(--schwarz);
}

.frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-gallery {
    display: none;
}

/* .frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-gallery {
    display: block;
    width: 150px;
    height: 130px;
    padding: 0 20px;
    overflow: hidden;
    border-radius: 30px 30px 30px 0;
    background: var(--weisstrans04);
    margin-bottom: 0;
    margin-top: 20px;
    opacity: 0;
    transform: scale(0.7);
    transition: var(--slowtransition);
}

.frame-style-1column.frame-layout-50 .row > .col-100.odd .frame-teaserinhalt .ce-gallery {
    background: var(--schwarztrans04);
}

.frame-style-1column.frame-layout-50 .row > .col-100[data-viewport="onscreen"] .frame-teaserinhalt .ce-gallery {
    opacity: 1;
    transform: scale(1);
}

.frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-gallery .ce-row:last-child {
    display: none;
}

.frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-gallery .image picture {
    display: flex;
    width: 150px;
    height: 130px;
    align-items: center;
    justify-content: center;
}

.frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-gallery img {
    transform: scale(0.70);
    margin-bottom: -5px;
} */

.frame-style-1column.frame-layout-50 .row > .col-100:empty {
    display: none;
}

.frame-style-1column.frame-layout-50 .row > .col-100 > .rahmen {
    text-align: right;
}

.frame-style-1column.frame-layout-50 .row > .col-100 > .rahmen > a {
    display: inline-block;
    vertical-align: top;
    margin: 10px 0 0 0;
}

.frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-textpic > header {
    float: left;
    clear: left;
    width: 42%;
}

.frame-style-1column.frame-layout-50 .row > .col-100 .frame-teaserinhalt .ce-textpic > .ce-bodytext {
    float: right;
    clear: none;
    width: 50%;
}

#inhaltsbereich.sub .frame-teaserinhalt + .frame-default .ce-textpic.ce-right.ce-intext.ce-nowrap .ce-gallery {
    max-width: calc(30% - 20px);
    margin-left: 20px;
}
/* -- Zwischenheader normal -- */
.frame-layout-20 {
    display: block;
    width: 100%;
    float: left;
    clear: both;
    transform: none !important;
}

.frame-layout-20 > .rahmen {
    width: 100% !important;
    margin: 0 !important;
    float: left !important;
    clear: both !important;
    padding: 0 !important;
    display: block !important;
    max-width: none !important;
}

.frame-layout-20 > .rahmen .ce-gallery {
    padding-top: calc(100% / (var(--aspect-ratio)));
    overflow: hidden;
    margin: 0;
    display: flex;
    opacity: 0;
    height: 0;
    width: 100%;
    float: left;
    clear: both;    
    position: relative;
}

.frame-layout-20 > .rahmen .ce-gallery.zw_normal {
    height: 0;
    opacity: 1;  
}

.frame-layout-20 > .rahmen .ce-gallery .ce-row,
.frame-layout-20 > .rahmen .ce-gallery .ce-column,
.frame-layout-20 > .rahmen .ce-gallery .image {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    display: block;
}

.frame-layout-20 > .rahmen .ce-gallery .ce-row {
    position: absolute;
    top: 0;
    left: 0;
}

.frame-layout-20 .ce-textpic.ce-left.ce-above .ce-gallery .ce-row {
    top: 0;
}

.frame-layout-20 .ce-textpic.ce-right.ce-above .ce-gallery .ce-row {
    top: -50%;
}

.frame-layout-20 .ce-textpic.ce-below .ce-gallery .ce-row {
    top: auto;
    bottom: 0;
}

.frame-layout-20 > .rahmen .ce-gallery .image img  {
    width: 100vw;
    display: block;
}

.frame-layout-20 > .rahmen .ce-gallery .image .image-caption {
    display: none;
}

/* -- Zwischenheader fixiert -- */
.frame-layout-20 .ce-gallery.ce-border.zw_fixed {
    padding-top: calc(100% / (var(--aspect-ratio)));
    overflow: hidden;
    margin: 0;
    display: flex;
    background-position: left top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-attachment: fixed;	
    height: auto;
    opacity: 1;
}

.frame-layout-20 .ce-gallery.zw_fixed.fxcenter {
    background-position: left center;
}

.frame-layout-20 .ce-gallery.zw_fixed.fxbottom {
    background-position: left bottom;
}

.cat-2 .tx_cn-columns .row {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
}

.cat-2 .tx_cn-columns .row:nth-child(even) {
    flex-direction: row-reverse;
}

.cat-2 .ce-above .ce-gallery + .ce-bodytext h3 {
    margin: 30px 0 0 0;
}

/* -- Anpassung Abstand Multicontent 2-spaltig -- */
.tx_cn-columns[data-cols="2"] .row > div:nth-child(odd) > div {
    margin-right: 6%;
    margin-left: 0;
}

.tx_cn-columns[data-cols="2"] .row > div:nth-child(even) > div {
    margin-left: 6%;
    margin-right: 0;
}

.tx_cn-columns[data-cols="2"] .row > div > div {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
}

.cat-2 .tx_cn-columns[data-cols="2"] .row > .col-40 {
    width: 43%;
}

.cat-2 .tx_cn-columns[data-cols="2"] .row > .col-60 {
    width: 54%;
}

/* -- Menue menubuttons -- */
#inhaltsbereich ul.menubuttons {
    list-style: none;
    margin: 0;
    padding: 0;
}

#inhaltsbereich ul.menubuttons li {
    margin: 0 0 7px 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

#inhaltsbereich ul.menubuttons li a, 
#inhaltsbereich ul.menubuttons li a:visited {
    display: block;
    padding: 10px 15px;
    background: var(--hellblaulight);
    color: var(--schwarz);
    border-radius: 0 10px 0 10px;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 700;
    transition: var(--standardtransition);
}

#inhaltsbereich ul.menubuttons li a:hover,
#inhaltsbereich ul.menubuttons li a:focus-visible {
    background: var(--hellblau);
}

#inhaltsbereich ul.menubuttons li a::after {
    display: none;
}

/* -- News-Slider -- */
/* .news-list-container.owl-carousel .owl-nav button.owl-prev, 
.news-list-container.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 250px;
    z-index: 1;
    width: 45%;
    cursor: url("../images/pfeil_prev.svg"), auto;
}

.news-list-container.owl-carousel .owl-nav button.owl-next {
    left: auto;
    right: 0;
    cursor: url("../images/pfeil_next.svg"), auto;
}

.news-list-container.owl-carousel .owl-nav button.owl-prev span, 
.news-list-container.owl-carousel .owl-nav button.owl-next span {
    display: block; 
    width: 0;
    height: 0;
    overflow: hidden;
    text-indent: -999px;
} */

.news-list-container.owl-carousel .owl-nav button.owl-prev span, 
.news-list-container.owl-carousel .owl-nav button.owl-next span{
    display: none;
}

.news-list-container.home.owl-carousel .owl-nav,
.news-list-container.leistungen.owl-carousel .owl-nav,
.news-list-container.projekte.owl-carousel .owl-nav {
    float: left;
    clear: both;
    margin: 20px 0 0 4%;
}

.news-list-container.owl-carousel .owl-nav button.owl-prev, 
.news-list-container.owl-carousel .owl-nav button.owl-next,
.news-list-container.leistungen.owl-carousel .owl-nav button.owl-prev, 
.news-list-container.leistungen.owl-carousel .owl-nav button.owl-next,
.news-list-container.projekte.owl-carousel .owl-nav button.owl-prev, 
.news-list-container.projekte.owl-carousel .owl-nav button.owl-next {
    position: static;
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    margin: 0 10px 0 0;
    background: url("../images/pfeil_prev.svg") left top no-repeat;
    background-size: 100% auto;
    cursor: pointer;
}

.news-list-container.owl-carousel .owl-nav button.owl-next,
.news-list-container.leistungen.owl-carousel .owl-nav button.owl-next,
.news-list-container.projekte.owl-carousel .owl-nav button.owl-next {
    background: url("../images/pfeil_next.svg") left top no-repeat;
    background-size: 100% auto;
}

.news-list-container.owl-carousel .owl-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.news-list-container.owl-carousel button.owl-dot {
    display: inline-block;
    vertical-align: bottom;
    margin: 0 3px;
    width: 24px;
    height: 24px;
    box-shadow: inset 0 -8px 0 0 var(--weiss), 0 20px 10px 0 var(--schwarztrans03);
}

.news-list-container.owl-carousel button.owl-dot.active {
    box-shadow: inset 0 -24px 0 0 var(--weiss), 0 0 10px 0 var(--schwarztrans03);
}

.referenzlink::after {
    display: none;
}

.referenzlink {
    position: absolute !important;
    left: 3%;
    bottom: 60px;
    z-index: 3;
    display: inline-block;
    padding: 30px 55px 30px 40px;
    background: var(--apfelgruen);
    color: var(--schwarz) !important;
    border-radius: 0 40px;
}

.referenzlink strong {
    font-size: 18px;
    line-height: 1.4em;
    font-weight: 700;
    float: left;
    clear: both;
    display: block;
}

.referenzlink .projektmore {
    float: left;
    clear: both;
    display: none;
}

/* -- Leistungs-Unterseiten -- */
#inhaltsbereich.sub > .frame {
    position: relative;
    z-index: 1;
}

#inhaltsbereich.sub h1 {
    color: var(--highlight);
    margin-top: 40px;
    opacity: 1;
    transform: scale(1);
    transform-origin: top left;
    transition: all 0.8s ease-in;
    transition-delay: 0.1s;
    @starting-style {
        transform: scale(0.4);
        opacity: 0;
    }
}

#inhaltsbereich.sub h1 + h2 {
    color: var(--weiss);
    text-transform: none;
    font-size: 35px;
    line-height: 1.2em;
    margin-top: 60px;
}

#inhaltsbereich.sub .frame-teaserinhalt.frame-type-header h1 {
    margin-top: 0;
}

#inhaltsbereich.sub .frame header,
#inhaltsbereich.sub .frame .ce-bodytext,
#inhaltsbereich.sub .frame .cn_multicontent_teaser {
    width: 70%;
    max-width: 700px;
    text-shadow: var(--shadow);
}

#inhaltsbereich.sub .frame .ce-bodytext blockquote {
    background: red;
    color: var(--weiss);
    margin: 0;
    padding: 20px;
}

#inhaltsbereich.sub > .frame:not(
    .frame-farbklecks,.frame-teaserinhalt,
    .frame-type-news_newsdetail,
    .frame-ansprechpartner,
    .frame-type-news_taglist,
    .frame-layout-20) {
    transform: translateY(30%);
    transform-origin: center;
    opacity: 0;
    transition: all 0.3s ease-in;
    padding: 80px 0 !important;
}

#inhaltsbereich.sub > .frame-type-news_taglist{
    position: relative;
    z-index: 2;
}

#inhaltsbereich.sub > .frame.frame-layout-60{
    transform: none;
    transform-origin: center;
    opacity: 1;
    padding: 80px 0 !important;
}

#inhaltsbereich.sub > .frame-space-before-none.frame-space-after-none {
    padding: 0 !important;
}

.page9 #inhaltsbereich.sub > .frame-space-after-none ,
.page11 #inhaltsbereich.sub > .frame-space-after-none {
    padding-bottom: 0 !important;
}
.page9 #inhaltsbereich.sub > .frame-space-before-none ,
.page11 #inhaltsbereich.sub > .frame-space-before-none {
    padding-top: 0 !important;
}
/* #inhaltsbereich.sub > .frame-space-after-none + .frame-space-before-none {
    margin-top: -80px !important;
    padding-top: 0 !important;
} */

#inhaltsbereich.sub > .frame:not(.frame-farbklecks, .frame-teaserinhalt, .frame-type-news_newsdetail, .frame-type-news_newsliststicky).frame-layout-3 {
    padding: 20px 0 !important;
}

#inhaltsbereich.sub > .frame-layout-0 + .frame:not(.frame-farbklecks, .frame-teaserinhalt).frame-layout-3 {
    margin-top: -60px;
}

#inhaltsbereich.sub .frame-type-menu_subpages.frame-layout-10 {
    opacity: 1;
    transform: none;
}

#inhaltsbereich.sub h3 {
    color: var(--highlight);
    font-size: 50px;
    line-height: 1.2em;
}

/* .page1 .konfiguratorbereich[data-viewport="onscreen"], */
#inhaltsbereich.sub > .frame[data-viewport="onscreen"] {
    transform: translateY(0);
    opacity: 1;
}

#inhaltsbereich.sub .frame-teaserinhalt {
    position: relative;
    overflow: hidden;
    transform: scale(1);
    opacity: 1;
}

#inhaltsbereich.sub .frame-teaserinhalt .ce-gallery {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(5%) scale(1);
    transform-origin: top left;
    opacity: 1;
    width: 500px;
    max-width: 30%;
    height: 100%;
    margin: 0;
    transition: all 1s ease-in;
    transition-delay: 0.6s;
    @starting-style {
        transform: translateX(0) scale(0.1);
        opacity: 0;
    }
}

#inhaltsbereich.sub .frame-teaserinhalt .ce-row,
#inhaltsbereich.sub .frame-teaserinhalt .ce-column,
#inhaltsbereich.sub .frame-teaserinhalt .image,
#inhaltsbereich.sub .frame-teaserinhalt .image picture {
    width: 100%;
    height: 100%;
    display: block;
}

#inhaltsbereich.sub .frame-teaserinhalt .image picture {
    display: block;
}

#inhaltsbereich.sub .frame-teaserinhalt .ce-gallery img {
    width: 100%;
    max-height: 100%;
}

/* -- Bild aussen -- */
#inhaltsbereich > .frame-bildaussen > .rahmen {
    width: 100%;
    margin: 40px 0;
    max-width: unset;
}

#inhaltsbereich > .frame-bildaussen .ce-textpic {
    display: flex;
    align-items: center;
}

#inhaltsbereich > .frame-bildaussen .ce-textpic.ce-right {
    flex-direction: row-reverse;
}

#inhaltsbereich > .frame-bildaussen .ce-gallery {
    width: calc(50% - 60px);
    margin: 0 60px 0 0;
    border-radius: 0 50px 50px 0;
    overflow: hidden;
}

#inhaltsbereich > .frame-bildaussen .ce-right .ce-gallery {
    margin: 0 0 0 60px;
    border-radius: 50px 0 0 50px;
}


#inhaltsbereich.sub .frame-bildaussen .ce-bodytext {
    width: 46%;
    max-width: 640px;
}

/* -- Farbklecks -- */
#inhaltsbereich > .frame-farbklecks > .rahmen {
    width: 100%;
    margin: 0;
    max-width: unset;
}

#inhaltsbereich.sub > .frame-farbklecks,
#inhaltsbereich.sub .frame-farbklecks[data-viewport="onscreen"],
.news-single .frame-farbklecks {
    height: 1px;
    overflow: visible;
    position: sticky;
    top: 30vh;
    z-index: 0;
    opacity: 0.6;
}


.news-single .frame-farbklecks {
    position: fixed;
    top: auto;
    bottom: 0;
    right: 0;
    z-index: 0;
}

#inhaltsbereich.sub > .frame-farbklecks img,
.news-single .frame-farbklecks img {
    width: auto;
    height: 70vh;
    object-fit: contain;
}

#inhaltsbereich.sub .ce-textpic.ce-center .ce-gallery[data-ce-columns="3"] {
    margin: 50px 0;
}

#inhaltsbereich.sub .ce-textpic.ce-center .ce-gallery[data-ce-columns="3"] .ce-row {
    display: flex;
    justify-content: space-between;
}

#inhaltsbereich.sub .ce-textpic.ce-center .ce-gallery[data-ce-columns="3"] .ce-row .ce-column {
    width: 32.9%;
    margin: 0;
    border-radius: 0 40px 0 40px;
    overflow: hidden;
}

/*  ++ Ansprechpartner ++ */
.frame-ansprechpartner {
    margin-top: 160px;
}

.frame-ansprechpartner::before {
    content: '';
    width: 100%;
    height: 2px;
    background: var(--weiss);
    position: absolute;
    left: 0;
    right: 0;
    top: -60px;
    max-width: 1280px;
    margin: 0 auto;
}

.frame-ansprechpartner .tx_cn-columns .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 60px;
}

.frame-ansprechpartner .tx_cn-columns .row .col- {
    float: left;
    clear: both;
    width: 30%;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .link-phone,
#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .link-mail {
    background-image: url(../images/telefon.svg);
    background-repeat: no-repeat;
    text-decoration: none;
    text-indent: -9999px;
    color: transparent;
    text-shadow: none;
    width: 30px;
    display: inline-block;
    text-underline-offset: unset;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .link-mail {
    background-image: url(../images/mail.svg);
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .ce-gallery {
    margin: 0;
    overflow: hidden;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .ce-bodytext {
    width: calc(100% - 40px);
    max-width: unset;
    text-shadow: unset;
    text-align: center;
    padding: 20px 20px 0 20px;
    line-height: 1.2em;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .ce-bodytext p:last-child {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: 5px;
    margin: 12px 0 0 0;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row + .row {
    margin-top: 60px;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns[data-cols="2"] .row > div:nth-child(odd) > div,
#inhaltsbereich .frame-ansprechpartner .tx_cn-columns[data-cols="2"] .row > div:nth-child(even) > div {
    margin-right: 0;
    margin-left: 0;
    width: 100%;
}

#inhaltsbereich .frame-ansprechpartner .cn_multicontent_teaser {
    font-size: 35px;
    margin-bottom: 60px;
}

#inhaltsbereich.sub .frame-ansprechpartner ul li a.ankerlink {
    background: var(--fliederlight);
    padding: 10px 20px;
    border-radius: 0 20px;
    display: block;
    text-decoration: none;
    color: var(--dunkelgrau);
    text-underline-offset: unset;
}

.frame-teaserinhalt + .frame-ansprechpartner {
    margin-top: 30px;
}

.frame-teaserinhalt + .frame-ansprechpartner::before,
#inhaltsbereich .frame-teaserinhalt + .frame-ansprechpartner .ce-bodytext ul li:before {
    display: none;
}

#inhaltsbereich .frame-teaserinhalt + .frame-ansprechpartner .ce-bodytext {
    width: 100%;
    max-width: unset;
    text-shadow: unset;
}

#inhaltsbereich .frame-teaserinhalt + .frame-ansprechpartner .ce-bodytext ul {
    width: 100%;
}

#inhaltsbereich .frame-teaserinhalt + .frame-ansprechpartner .ce-bodytext ul li {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 15px;
}

#inhaltsbereich .frame-teaserinhalt + .frame-ansprechpartner .ce-bodytext ul li:first-child {
    padding-left: 0;
    margin-bottom: 0;
}

#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .ce-gallery img {
	width: 100%;
	height: auto;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
#inhaltsbereich .frame-ansprechpartner .tx_cn-columns .row .col- .ce-gallery img:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
}



/* ----- */

#inhaltsbereich.sub + #footer {
    margin-top: 150px;
}

/* -- Header sub -- */
#header.sub {
    padding-top: 80px;
}

/* #header.sub:has(.frame) {
    padding-top: 180px;
} */

#header.sub:has(.ce-gallery) {
    padding-top: 0;
}

#header.sub .frame {
    position: relative;
}

#header.sub .ce-bodytext {
    width: 90%;
    max-width: 1280px;
    float: none;
    /* position: absolute;
    top: 180px; */
    position: relative;
    top: 0px;
    left: 50%;
    z-index: 0;
    font-size: 220px;
    line-height: 1.1em;
    font-weight: 700;
    margin-bottom: 0.4em;
    color: var(--highlight);
    transform: translateX(-50%) scale(1);
    transform-origin: top left;
    transition: var(--slowtransition);
    @starting-style {
        transform: translateX(-50%) scale(0);
    }
}

#header.sub:has(.ce-gallery) .ce-bodytext {
    position: absolute;
    top: 180px;
}

#header.sub .ce-gallery {
    position: relative;
    z-index: 1;
}

/* -- Menue mit Bildern -- */
ul.menu-mit-bildern {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

#inhaltsbereich ul.menu-mit-bildern li {
    display: inline-block;
    vertical-align: top;
    margin: 0 1% 30px;
    padding: 0;
    width: 30.5%;
    transition: var(--standardtransition);
}

ul.menu-mit-bildern li::before {
    display: none;
}

ul.menu-mit-bildern li a {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    float: left;
    clear: both;
    width: calc(100% - 46px);
    text-align: center;
    padding: 20px;
    border: 3px solid var(--highlight);
    border-radius: 0 40px 0 40px;
    min-height: 215px;
}

ul.menu-mit-bildern li a::after {
    display: none;
}

ul.menu-mit-bildern li a .box {
    float: left;
    clear: both;
    width: 80%;
    padding: 0 10%;
    display: block;
    text-align: center;
    line-height: 1.2em;
}

ul.menu-mit-bildern li a img {
    width: 100px;
    margin: 0 0 10px 0;
}

ul.menu-mit-bildern li:has(~ li:hover),
ul.menu-mit-bildern li:hover ~ li {
    opacity: 0.3;
}

ul.menu-mit-bildern li:hover {
    opacity: 1;
}

/* -- Slider-Menue mit Bildern -- */
.slider-menu-mit-bildern {
    margin: 0;
    padding: 0;
}

.slider-menu-mit-bildern .slideritem::before,
.slider-menu-mit-bildern .slideritem a::after {
    display: none;
}

.slider-menu-mit-bildern .slideritem {
    display: block;
    float: left;
    width: calc(100% - 20px);
    margin: 0 !important;
    padding: 0 10px !important;
}

.slider-menu-mit-bildern > .slideritem {
    display: none;
    float: left;
    width: calc(20% - 20px);
}

.slider-menu-mit-bildern > .slideritem:nth-child(1),
.slider-menu-mit-bildern > .slideritem:nth-child(2),
.slider-menu-mit-bildern > .slideritem:nth-child(3),
.slider-menu-mit-bildern > .slideritem:nth-child(4),
.slider-menu-mit-bildern > .slideritem:nth-child(5) {
    display: block;
}

.slider-menu-mit-bildern .slideritem a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.slider-menu-mit-bildern .slideritem a .box {
    display: block;
    float: left;
    clear: both;
    margin-top: 25px;
    font-weight: 400;
}

.slider-menu-mit-bildern .slideritem a img {
    filter: grayscale(1) brightness(1.3);
}

.slider-menu-mit-bildern.owl-carousel .owl-item img {
    max-width: 100px;
}

/* -- News Listansicht Projekte -- */
.news-list-container {
    --highlight: var(--apfelgruen);
}

.news-list-container .article {
    position: relative;
}

.news-list-container .news-img-wrap {
    margin: 0 0 20px 0;
}

.news-list-container .news-img-wrap img {
    width: 100%;
    height: auto;
}

.news-list-container.owl-carousel .news-img-wrap {
    position: relative;
}

/* .news-list-container.home.owl-carousel .news-img-wrap::before,
.news-list-container.home.owl-carousel .news-img-wrap::after, */
.news-list-container.projekte.owl-carousel .news-img-wrap::before,
.news-list-container.projekte.owl-carousel .news-img-wrap::after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
    width: 50%;
    box-shadow: inset 50vw 0 50vw -20vw var(--schwarztrans03);
}

/* .news-list-container.home.owl-carousel .news-img-wrap::after, */
.news-list-container.projekte.owl-carousel .news-img-wrap::after {
    left: auto;
    right: 0;
    box-shadow: inset -50vw 0 50vw -20vw var(--schwarztrans03);
}

.news-list-container .more {
    display: inline-block;
    vertical-align: bottom;
    transition: var(--standardtransition);
}

.news-list-container .more:hover {
    color: var(--highlight);
}

.news-list-container .more::before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    width: 50px;
    height: 50px;
    background: url(../images/pfeil_interner-link.svg) left top no-repeat;
    background-size: 50px auto;
    margin: 10px 5px 0 0;
}

.news-list-container .more::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 90px;
    z-index: 1;
    width: auto;
    height: auto;
    background: none;
}

.frame-type-news_newsliststicky .show-all {
    float: right;
    clear: none;
    width: auto;
    margin: 40px 4% 1px 0;
    text-align: right;
    font-size: 40px;
    line-height: 1.2em;
    font-weight: 700;
}

.page1 .frame-type-news_newsliststicky .show-all .more::after,
.page1 .frame-type-news_newsliststicky .show-all .more:focus-visible {
    background: var(--apfelgruen);
}

.page1 .frame-type-news_newsliststicky .show-all .more:focus-visible {
    outline: none;
}

#inhaltsbereich.sub .frame-type-news_newsliststicky .show-all {
    margin: 40px 0 1px 0;
}

.frame-type-news_newsliststicky:has(.no-news-found) {
    display: none;
}

/* -- News-Liste Leistungsseiten -- */
.news-list-container.leistungen,
.news-list-container.projekte {
    --highlight: var(--hellblau);
    width: calc(100% + 5px);
    margin: 60px 0 0 -5px;
}

.news-list-container.leistungen .article,
.news-list-container.projekte .article {
    display: block;
    float: left;
    width: 100%;
    margin: 0;
    position: relative;
    transition: var(--standardtransition);
}

.news-list-container.leistungen > .article,
.news-list-container.projekte > .article {
    width: calc(33.33% - 5px);
    margin: 0 0 5px 5px;
    aspect-ratio: 3/2;
    overflow: hidden;
}

.news-list-container.leistungen .article a,
.news-list-container.projekte .article a {
    position: static;
}

.news-list-container.leistungen .article a h4,
.news-list-container.projekte .article a h4,
.news-list-container.leistungen .article a strong,
.news-list-container.projekte .article a strong {
    display: block;
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 20px 50px 20px 20px;
    max-width: calc(100% - 100px);
    background: var(--highlight);
    color: var(--schwarz);
    border-radius: 0 30px;
    font-size: 18px;
    /* font-weight: 400; */
}

.page9 .news-list-container.leistungen .article a h4,
.page9 .news-list-container.projekte .article a h4,
.page9 .news-list-container.leistungen .article a strong,
.page9 .news-list-container.projekte .article a strong {
    background: var(--fliederlight);
}

.page9 .frame-type-header.frame-space-after-none h3,
.page11 .frame-type-header.frame-space-after-none h3{
    margin-bottom: 20px !important;
}


.news-list-container.projekte .article a h4,
.news-list-container.projekte .article a strong {
    background: var(--apfelgruen);
}

.hnavi > li.ifsub:first-child .ebene2 > li:last-child{
    position: relative;
}

.hnavi > li.ifsub:first-child .ebene2 > li:last-child a{
    padding-right: 40px;
}

.hnavi > li.ifsub:first-child .ebene2 > li:last-child::after,
.referenzlink strong::after,
.news-list-container.projekte .article a h4::after,
.news-list-container.leistungen .article a h4::after,
.news-list-container.projekte .article a strong::after,
.news-list-container.leistungen .article a strong::after {
    content: '   ';
    display: block;
    position: absolute;
    z-index: 1;
    top: calc(50% - 12px);
    right: 7px;
    /* transform: rotate(90deg); */
    color: var(--schwarz);
    font-size: 16px;
    line-height: 25px;
    font-weight: 300;
    letter-spacing: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    text-align: left;
    /* animation: showmore 1.8s infinite; */
}

.referenzlink strong::after,
.news-list-container.projekte .article a h4::after,
.news-list-container.leistungen .article a h4::after,
.news-list-container.projekte .article a strong::after,
.news-list-container.leistungen .article a strong::after {
    right: 15px;
    font-size: 18px;
    line-height: 25px;
    font-weight: 700;
    letter-spacing: 0px;
}

.news-list-container.projekte .article a h4::after,
.news-list-container.leistungen .article a h4::after,
.news-list-container.projekte .article a strong::after,
.news-list-container.leistungen .article a strong::after {
    top: calc(50% - 14px);
    right: 12px;
}

.hnavi > li.ifsub:first-child .ebene2 > li:last-child::after,
.article:hover .referenzlink strong::after,
.referenzlink:hover strong::after,
.news-list-container.projekte:has(.article:hover) .article:hover h4::after, 
.news-list-container.leistungen:has(.article:hover) .article:hover h4::after {
    animation: showmore 1.8s infinite;
}

.hnavi > li.ifsub:first-child .ebene2 > li:last-child::after {
    right: 4px;
    font-weight: 700;
}

.referenzlink::after{
    top: 32px;
}

.news-list-container.leistungen .article a h4 span,
.news-list-container.projekte .article a h4 span,
.news-list-container.leistungen .article a strong span,
.news-list-container.projekte .article a strong span {
    display: inline-block;
    vertical-align: top;
}

/* .news-list-container.leistungen .article a::before,
.news-list-container.projekte .article a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
} */

.news-list-container.leistungen .article a::after,
.news-list-container.projekte .article a::after {
    display: none;
}

.news-list-container.leistungen .article .news-img-wrap,
.news-list-container.projekte .article .news-img-wrap {
    margin: 0;
    padding: 0;
    float: left;
    clear: both;
    width: 100%;
}

.news-list-container.leistungen .article .news-img-wrap img,
.news-list-container.projekte .article .news-img-wrap img {
    float: left;
    clear: both;
    width: 100%;
    height: auto;
    transition: var(--standardtransition);
    filter: brightness(0.4);
}

.news-list-container.leistungen:has(.article:hover) .article img,
.news-list-container.projekte:has(.article:hover) .article img {
    filter: brightness(0.4);
}

.news-list-container.leistungen:has(.article:hover) .article:hover img,
.news-list-container.projekte:has(.article:hover) .article:hover img {
    filter: brightness(1);
}

#inhaltsbereich.sub > .frame-type-news_newsliststicky > .rahmen > header h3 {
    max-width: 700px;
    margin-top: 80px;
}

/* -- News-Detailseite -- */
.news-single,
.news-single .article,
.news-single .introbereich,
.news-single .referenzleistungen,
.news-single .news-backlink-wrap {
    float: left;
    clear: both;
    width: 100%;
}

.news-single .introbereich > .rahmen,
.news-single .referenzleistungen > .rahmen,
.news-single .news-backlink-wrap > .rahmen {
    position: relative;
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

.news-single .article > .newsinhaltselemente {
float: left;
    clear: both;
    width: 100%;
    margin-bottom: 100px;
}

.news-single .article > .newsinhaltselemente,
.news-single .article > .newsinhaltselemente > .frame {
    float: left;
    clear: both;
    width: 100%;
}

.news-single .article > .newsinhaltselemente > .frame > .rahmen {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

.news-single .article > .newsinhaltselemente > .frame-type-gridgallery_gallery > .rahmen {
    width: 100%;
    max-width: unset;
    margin: 0;
}

.news-single .news-img-wrap {
    float: right;
    max-width: calc(100% - 880px);
    position: absolute;
    top: 0;
    right: 0;
}

.news-single .header {
    max-width: 800px;
}

.news-single .header span {
    display: inline-block;
    vertical-align: top;
}

.news-single .topnews .news-img-wrap {
    background: var(--weiss);
    padding: 30px;
    border-radius: 40px 0;
    max-width: calc(100% - 880px);
}

/* ++s */
.news-single .topnews .news-img-wrap div.outer + div.outer {
    border-top: 2px solid var(--dunkelgrau);
    padding: 15px 0 0 0;
    margin: 15px 0 0 0;
}

.news-single .news-img-wrap img[src*=".svg"] {
    min-width: 190px;
    height: auto;
}

#inhaltsbereich .news-single ul.news-list-category {
    list-style: none;
    margin: 0 0 80px 0;
    padding: 0;
    text-align: center;
}

#inhaltsbereich .news-single ul.news-list-category li {
    display: inline-block;
    vertical-align: top;
    background: 0;
    width: calc(19% - 5px);
    margin: 0 1% 30px;
    padding: 0;
}

.news-single ul.news-list-category li::before,
.news-single ul.news-list-category li a::after {
    display: none;
}

.news-single ul.news-list-category li a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-single ul.news-list-category li a .cat-img-wrap {
    background: var(--apfelgruen);
    display: block;
    width: 120px;
    height: 120px;
    margin: 40px 0;
}

.news-single ul.news-list-category li a .cat-title {
    display: block;
    text-align: center;
    margin: 0 10px;
    line-height: 1.2em;
    transition: var(--standardtransition);
}

.news-single ul.news-list-category li a:hover .cat-title {
    color: var(--highlight);
}

.news-single .news-related-links {
    margin: 60px 0 100px;
}

.news-single .news-related-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#inhaltsbereich .news-single .news-related-links ul li {
    padding: 0;
    margin: 0 0 10px 0;
}

.news-single .news-related-links ul li::before {
    display: none;
}

#inhaltsbereich .news-single .news-related-links ul:has(.float) li {
    display: inline-block;
    vertical-align: top;
    float: none;
    clear: none;
    margin: 0 30px 15px 0;
}

.news-single .teaser-text,
.news-single h3 {
    max-width: 800px;
}

.news-single .teaser-text,
.news-single .news-related {
    float: left;
    clear: left;
    width: 90%;
}

.news-single .news-text-wrap {
    background: var(--hellgrau);
    box-shadow: inset -200px 0 100px -100px var(--schwarztrans02);
    max-width: 800px;
    padding: 40px;
    border-radius: 60px 0;
    font-size: 20px;
    line-height: 1.6em;
    color: var(--schwarz);
    font-weight: 400;
}

.news-single .news-text-wrap:has(ul.neben) {
    background: none;
    box-shadow: none;
    max-width: unset;
    padding: 0;
    border-radius: 0;
}

.news-single .news-text-wrap ul.neben li {
    display: inline-block;
    vertical-align: middle; 
    width: calc(47% - 80px);
    padding: 40px !important;
    margin: 0 0 0 -20px !important;
    background: var(--hellgrau);
    box-shadow: inset -200px 0 100px -100px var(--schwarztrans02);
    border-radius: 60px 0;
}

.news-single .news-text-wrap ul.neben li:nth-child(2n+1) {
    width: calc(53% - 100px);
    padding: 40px 60px 40px 40px !important;
    margin: 0 !important;
}

.news-single .news-text-wrap ul.neben li::before {
    display: none;
}

.news-single .news-backlink-wrap {
    margin: 20px 0 80px 0;
    text-align: right;
}

.news-single .news-backlink-wrap a::after{
    bottom: -7px;
    width: 60%;
}

.news-single .frame-type-gridgallery_gallery {
    margin-top: 80px;
}

/* -- Tags -- */
#inhaltsbereich ul.news-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 950px;
}

#inhaltsbereich ul.news-tags li {
    margin: 0 0 7px 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

#inhaltsbereich ul.news-tags li::before,
#inhaltsbereich ul.news-tags li a::after {
    display: none;
}

#inhaltsbereich ul.news-tags li a {
    display: block;
    padding: 10px 15px;
    background: var(--apfelgruenlight);
    color: var(--schwarz);
    border-radius: 0 10px 0 10px;
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 700;
    transition: var(--standardtransition);
}

#inhaltsbereich ul.news-tags li a:hover {
    background: var(--apfelgruen);
}

#inhaltsbereich .frame-tagfilter ul li a.active{
    background: var(--apfelgruen);
}

#inhaltsbereich .frame-tagfilter ul li.filterall {
	display: none;
	background-color: var(--apfelgruenlight);
	background-image: url(/fileadmin/cn_website/images/filter_black.svg);
	background-position:  center center;
	background-repeat: no-repeat;
	background-size: auto 25px;
	text-indent: -999px;
	width: 35px;
	overflow: hidden;
	border-radius: 0 10px 0 10px;
	min-height: 1.89em;
    transition: var(--standardtransition);
    cursor: pointer;
}

#inhaltsbereich .frame-tagfilter ul[data-toggled="on"] li.filterall{
    display: inline-block;
}

/* -- Gridgallery -- */
.justified-gallery > a > .caption, 
.justified-gallery > div > .caption, 
.justified-gallery > figure > .caption {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    background-color: var(--apfelgruen);
    color: var(--weiss);
    border-radius: 100%;
    width: 80px;
    height: 80px;
    padding: 10px;
    overflow: hidden;
    text-indent: -9999px;
    box-shadow: inset 0 0 0 2px var(--weiss), 0 0 0 2px var(--apfelgruen), 0 0 150px 50px var(--schwarztrans04);
    font-size: 22px;
    line-height: 1.4em;
    font-weight: 700;
    font-family: inherit;
}

.justified-gallery > a > .caption::before, 
.justified-gallery > div > .caption::before, 
.justified-gallery > figure > .caption::before {
    content: 'i';
    text-indent: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    font-style: italic;
    font-size: 44px;
    line-height: 1em;
    font-weight: 700;
}

.justified-gallery > a > .caption.caption-visible, 
.justified-gallery > div > .caption.caption-visible, 
.justified-gallery > figure > .caption.caption-visible {
    opacity: 0.95;
    display: flex;
    transform: translate(-50%, -50%) scale(1);
}

.justified-gallery > a {
    transition: var(--standardtransition);
}

/* .justified-gallery:has(> a:hover) > a {
    opacity: 0.3;
}

.justified-gallery:has(> a:hover) > a:hover {
    opacity: 1;
} */

.fancybox-can-pan .fancybox-caption {
    display: none;
}

/* -- powermail -- */
.powermail_legend {
    padding: 0 15px;
    margin: 0 0 0 30px;
}

.powermail_fieldwrap {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 15px 0;
}

.powermail_fieldwrap.layout1,
.powermail_fieldwrap.layout2 {
    width: 50%;
    clear: left;
}

.powermail_fieldwrap.layout2 {
    float: right;
    clear: none;
}

.powermail_fieldwrap_type_captcha {
    margin: 15px 0;
}

.powermail_form > h4 {
    margin: 0 0 0 45px;
    background: var(--schwarz);
    color: var(--weiss);
    padding: 0 20px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    bottom: -0.5em;
}

.fieldset-container {
    padding: 40px;
    width: calc(100% -80px);
    float: left;
    clear: both;
    background: var(--dunkelgrau);
    border-radius: 0 50px;
}

.powermail_form > h4 + .fieldset-container {
    border-top: 2px solid var(--weiss);
    box-shadow: inset 0 50px 30px -30px var(--schwarz);
}

.powermail_fieldset {
    width: 100%;
    float: left;
    clear: both;
    border: 0;
    padding: 0;
    margin: 0 0 30px 0;
}

.powermail_fieldset_1,
.powermail_fieldset_2 {
    width: 48%;
    float: left;
    clear: none;
}

.powermail_fieldset_2 {
    float: right;
}

.powermail_input,
.powermail_textarea,
.powermail_captcha {
    width: calc(100% - 10px);
    padding: 0 5px;
    border-radius: 0 10px;
    float: left;
    clear: both;
    border: 0;
    height: 40px;
    font-family: 'Raleway',arial,sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4em;
    color: var(--schwarz);
}

.powermail_textarea {
    resize: none;
    overflow: auto;
    height: 221px;
}

.powermail_fieldwrap_captcha .powermail_field .powermail_captchaimage {
    float: left;
    margin: 10px 0 0 0;
}

.powermail_captcha {
    width: calc(100% - 260px);
    float: right;
    margin: 15px 0 0 0;
}

.powermail_field {
    float: left;
    clear: both;
    width: 100%;
    position: relative;
}

.powermail-errors-list {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1;
    color: var(--schwarz);
    font-size: 16px;
    line-height: 1.2em;
    font-weight: 700;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.powermail-errors-list li {
    margin: 0 !important;
    padding: 0 !important;
}

.powermail-errors-list li::before {
    display: none;
}

.powermail_fieldwrap_type_check .powermail-errors-list {
    position: static;
    color: var(--orangelight);
    float: left;
    clear: both;
    margin: 15px 0 0 0 !important;
}

.powermail_fieldwrap_type_check:has(.powermail-errors-list) {
    position: relative;
}

.powermail_fieldwrap_type_check:has(.powermail-errors-list)::before {
    content: '';
    display: block;
    width: 4px;
    height: 100%;
    background: var(--orangelight);
    position: absolute;
    left: -15px;
    top: 0;
}

.powermail_fieldwrap_type_captcha .powermail-errors-list {
    top: 20px;
}

.powermail_fieldwrap:has(.powermail-errors-list) .powermail_field > input,
.powermail_fieldwrap:has(.powermail-errors-list) .powermail_field > textarea,
.powermail_fieldwrap:has(.powermail-errors-list) .powermail_field > select {
    background: var(--orangelight);
}

.powermail_submit {
    width: 100%;
    float: left;
    clear: both;
    border: 0;
    background: var(--highlight);
    color: var(--schwarz);
    border-radius: 0 20px;
    -webkit-appearance: none;
    cursor: pointer;
    font-family: 'Raleway',arial,sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.4em;
    padding: 15px 0;
    margin: 40px 0 0 0;
    box-shadow: inset 0 0 0 0 var(--schwarztrans03);
    transition: var(--slowtransition);
}

.powermail_submit:hover {
    box-shadow: inset 0 0 10px 35px var(--orangelight);
}

.powermail_fieldwrap_absenden {
    margin-bottom: 0;
}

.powermail_message_error {
    background: var(--orangelight);
    color: var(--schwarz);
    padding: 30px;
    margin: 0 0 30px 0;
    display: block;
    float: left;
    clear: both;
    width: calc(100% - 60px);
}

.powermail_message_error a::after {
    background: var(--schwarz);
}

#inhaltsbereich .powermail_message_error ul li::before {
    color: var(--schwarz);
}

.powermail_create {
    padding: 40px;
    width: calc(100% - 80px);
    display: block;
    float: left;
    clear: both;
    background: var(--dunkelgrau);
    border-radius: 0 50px;
}

.tx-powermail {
    float: left;
    clear: both;
    width: 100%;
}

/* -- Footer -- */
#footer {
    --highlight: var(--weiss);
    position: relative;
    font-size: 18px;
}

#footer a {
    font-weight: 300;
}

#footer a:hover {
    text-decoration: underline;
    text-decoration-color: var(--orangelight);
}


#footer a::after {
    display: none;
}

#footer .ce-bodytext a:focus-visible::after {
    display: block;
    height: 2px;
    bottom: -1px;
}

#footer::before {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: var(--weiss);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.footerinhalt {
    padding: 50px 0;
    position: relative;
}

#inhaltsbereich .ce-border .image,
.footerinhalt .ce-border .image {
    display: block;
    background: var(--weiss);
    padding: 10px 20px;
    border-radius: 20px 0;
}

.footerinhalt .frame-type-textmedia.frame-footerlogos {
    float: right;
    clear: both;
    width: auto;
    margin: 0 0 -90px 0;
}

.footerinhalt .frame-type-textmedia.frame-footerlogos .ce-column {
    margin-right: 15px;
}

.footerinhalt .frame-type-textmedia.frame-footerlogos .ce-column:last-child {
    margin-right: 0;
}

.footerinhalt .frame-type-textmedia.frame-footerlogos a:focus-visible {
    outline: var(--orange) solid 2px;
}

/* .footerinhalt::after {
    content: '';
    display: block;
    width: 90%;
    height: 100%;
    background: var(--schwarz);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
} */

.footerinhalt .frame-type-textmedia {
    float: left;
    position: relative;
    z-index: 1;
}

.footerinhalt .frame-type-textmedia strong,
.footerinhalt .frame-type-menu_pages strong.wieheadline {
    font-size: 24px;
    font-weight: 700;
}

.footerinhalt .frame-type-menu_pages strong.wieheadline {
    display: block;
    margin: 0 0 5px 0;
}

/* .footerinhalt .frame-type-menu_pages {
    float: right;
    position: absolute;
    top: -120px;
    right: 0;
    z-index: 2;
    background: url(../images/footer-klecks.svg) left top no-repeat;
    background-size: 120% 120%;
    padding: 100px 145px 50px;
    color: var(--schwarz);
}

.footerinhalt .frame-type-menu_pages > .rahmen {
    position: relative;
    z-index: 1;
}

.footerinhalt .frame-type-menu_pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    --highlight: var(--schwarz);
    font-weight: 700;
}

#footer .footerinhalt .frame-type-menu_pages a {
    font-weight: 700;
} */

.footerinhalt .frame-social{
    position: absolute;
    right: 4%;
    top: -17px;
    background: var(--schwarz);
    padding: 0 15px;
}

.footerinhalt .frame-social .ce-textpic,
.footerinhalt .frame-social .ce-gallery,
.footerinhalt .frame-social .ce-row,
.footerinhalt .frame-social .ce-column,
.footerinhalt .frame-social .image {
    overflow: visible;
}

.footerinhalt .frame-social .ce-gallery{
    margin-bottom: 0;
}

.footerinhalt .frame-social .ce-column{
    margin-right: 15px;
}

.footerinhalt .frame-social .ce-column:last-child{
    margin: 0;
}

.footerinhalt .frame-type-textmedia ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1.3em;
}

.footerinhalt .frame-type-textmedia ul li{
    padding-left: 40px;
    position: relative;
}

.footerinhalt .frame-type-textmedia ul li:nth-child(2){
    margin: 25px 0;
}

.footerinhalt .frame-type-textmedia ul li::before{
    content: '';
    width: 30px;
    height: 30px;
    background: url(/fileadmin/cn_website/images/location.svg) center center/contain no-repeat;
    position: absolute;
    left: 0;
    top: calc(50% - 15px);
    filter: invert(1);
}

.footerinhalt .frame-type-textmedia ul li:nth-child(2)::before{
    background: url(/fileadmin/cn_website/images/telefon.svg) center center/contain no-repeat;
    top: 0;
}

.footerinhalt .frame-type-textmedia ul li:nth-child(3)::before{
    background: url(/fileadmin/cn_website/images/mail.svg) center center/contain no-repeat;
    top: 0;
}

#footer .footerinhalt .frame-type-textmedia ul li a{
    font-weight: 700;
}

.footerinhalt .frame-type-menu_pages{
    float: left;
    margin-left: 170px;
}

.footerinhalt h2{
    font-size: 24px;
    font-weight: 700;
    text-transform: none;
    margin-top: 7px;
    margin-bottom: 25px;
}

.footerinhalt .frame-type-menu_pages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* text-align: right; */
    column-count: 2;
    column-gap: 80px;
}

.footerinhalt .frame-type-menu_pages ul li{
    padding-left: 10px;
}

.footerinhalt .frame-type-menu_pages ul li::before{
    content: '>';
}

.unten {
    /* background: var(--orange); */
    background: linear-gradient(30deg, var(--dunkelorange) 0%, var(--orange) 50%);
    font-weight: 400;
    text-shadow: var(--textshadow);
}

ul.qnavi {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.qnavi li {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
    position: relative;
}

ul.qnavi li::before {
    content: '|';
    position: absolute;
    left: -10px;
    top: 10px;
}

ul.qnavi li:first-child::before {
    display: none; 
}

ul.qnavi li:first-child {
    margin-left: -20px;
}

ul.qnavi li a {
    display: block;
    padding: 10px 20px;
}

ul.qnavi li:first-child a::before {
    display: none;
}

ul.qnavi li a:focus-visible {
    outline-offset: -10px;
}

/** Location Map **/
#cn-location-map-wrapper {
    position: relative;
    margin: 0 auto;
}

/* Location map cookie consent */
#cn-location-map-wrapper #cn-location-map.no-cookie {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    height: 400px;
    padding: 20px;
    background-color: rgba(var(--header-navigation-gray), 1);
}

#cn-location-map-wrapper #cn-location-map.no-cookie .consentbox {
    text-align: center;
    background: var(--mitteldunkelgrau);
    padding: 60px 30px;
    border-radius: 30px 0;
}

#cn-location-map-wrapper #cn-location-map.no-cookie a {
    color: rgba(var(--logo-green), 1);
}

#cn-location-map-wrapper #cn-location-map.no-cookie a:hover {
    color: rgba(var(--logo-green), 0.75);
}

#cn-location-map-wrapper #cn-location-map.no-cookie .consentbox button {
    /* margin-bottom: 2px; */
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    color: var(--cookiemanneutral);
    background-color: var(--schwarztrans07);
    border-color: var(--schwarztrans07);
    font-weight: 400;
    margin: 0 2px 5px;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

#cn-location-map-wrapper #cn-location-map.no-cookie .consentbox p {
    margin-bottom: 20px;
}

#cn-location-map-wrapper #cn-location-map.no-cookie .location-map-cookie {
    font-family: inherit;
    font-size: 16px;
    color: rgba(255, 255, 255, 1);
    padding: 11px 20px 10px;
    background-color: rgba(var(--logo-green), 1);
    border: 0 none;
    border-radius: 3px;
    -webkit-appearance: none;
    cursor: pointer;
}

#cn-location-map-wrapper #cn-location-map.no-cookie .location-map-cookie:hover {
    background-color: rgba(var(--logo-green), 0.75);
}

/* Preloader */
#cn-location-map-wrapper #cn-location-map-preloader {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--pure-white), 0.9);
    z-index: 400;
}

#cn-location-map-wrapper #cn-location-map-preloader.hide {
    display: block;
}

#cn-location-map-wrapper #cn-location-map-preloader .lds-ripple {
    position: absolute;
    top: calc(40% - 40px);
    left: calc(50% - 40px);
    display: inline-block;
    width: 80px;
    height: 80px;
}

#cn-location-map-wrapper #cn-location-map-preloader .lds-ripple div {
    position: absolute;
    border: 4px solid rgba(var(--logo-green), 1);
    border-radius: 50%;
    opacity: 1;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#cn-location-map-wrapper #cn-location-map-preloader .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

#cn-location-map-wrapper #cn-location-map-preloader .preloader-text {
    position: absolute;
    top: 55%;
    left: 0;
    display: inline-block;
    width: 100%;
    height: auto;
    text-align: center;
    color: rgba(var(--text-dark), 1);
}

/* Map */
#cn-location-map-wrapper #cn-location-map {
    height: 512px;
}

#cn-location-map-wrapper #cn-location-map button.gm-ui-hover-effect {
    top: 0 !important;
    right: 0 !important;
}

#cn-location-map-wrapper #cn-location-map .cn-info-window-wrapper {
    padding: 20px;
}

#cn-location-map-wrapper #cn-location-map h4.cn-info-window-title {
    color: rgba(var(--logo-green), 1);
    padding-bottom: 0;
}

#cn-location-map-wrapper #cn-location-map p.cn-info-window-address {
    padding-bottom: 1rem;
}

#cn-location-map-wrapper #cn-location-map a.cn-info-window-link {
    color: rgba(var(--logo-green), 1);
}

#cn-location-map-wrapper #cn-location-map a.cn-info-window-link:hover {
    color: rgba(var(--logo-green), 0.8);
}

/* body.cn #main .ce-bodytext .icon {
    position: relative;
    margin-left: 1.5rem;
} */
 
.frame-bildslider .ce-row,
.frame-bildslider .ce-row .ce-column,
.frame-bildslider .ce-row .ce-column .image,
.frame-bildslider .ce-row .ce-column .image a{
    text-align: center;
    width: 100%;
}

.frame-bildslider img{
    max-width: 100px;
    margin: 0 auto 30px;
}

.altcha {
  max-width: var(--altcha-max-width, 280px) !important;
}