/* barlow-condensed-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/barlow-condensed-v12-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-condensed-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/barlow-condensed-v12-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* barlow-condensed-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/barlow-condensed-v12-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
    /* -- Farbvariablen Cookieman -- */
    --cookiemanneutral: var(--weiss);
    --cookiemanmain:var(--rot);



    --dunkelgrau: #2B3D40; 
    --hellgrau: #A2A2A2;
    --weiss: #FFFFFF;
    --rot: #8F181B;
    --dunkelrot: #670202;
    --linkrot: #820000;
    --transrot035: rgba(143, 24, 27,0.5);
    --transweiss05: rgba(255, 255, 255,0.5);
    --transgrau01: rgba(43, 61, 64,0.1);

    --schwarztrans09: rgba(0, 0, 0,0.9);

    --hoben: 101.2px;
    --puffer: 40px;
    --navbg: var(--rot);
    --navischriftfarbe: var(--weiss);
    --outline: red;
    --fontsize: 24px;
    --fs60: 60px;
    --fs46: 46px;
    --fs20: 20px;
    --fs55: 55px;
    --fs40: 40px;
    --fs28: 28px;
    --lineheight: 1.3em;
    --lh11: 1.1em;
    --lh12: 1.2em;
    --fontfamily: 'Barlow Condensed', sans-serif;

    
    --abstand25: 25px;
    --abstand35: 35px;
    --standardtransition: all 0.3s ease;
    
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    clear: both;
    font-family: var(--fontfamily);
    font-size: var(--fontsize);
    line-height: var(--lineheight);
    font-weight: 500;
    color: var(--dunkelgrau);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: underline;
    color: var(--linkrot);
}

a.more {
    color: var(--rot);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
    background: url(../images/aufzaehlungszeichen-blatt.svg) left top no-repeat;
    background-size: 40px auto;
    display: inline-block;
    vertical-align: top;
    padding: 15px 0 0 15px;
    margin: 10px 0;
}

a.more:hover {
    text-decoration: underline;
}

a.link-mail,
a.link-phone,
a.link-fax {
    display: inline-block;
    vertical-align: top; 
    background: url(../images/email.svg) left 2px no-repeat;
    background-size: 24px auto;
    text-decoration: none;
    padding: 0 0 0 calc(var(--marginabstand) * 3);
}

a.link-phone {
    background: url(../images/telefon.svg) left 2px no-repeat;
    background-size: 24px auto;
}

a.link-fax {
    background: url(../images/fax.svg) left 2px no-repeat;
    background-size: 24px auto;
}

a.link-mail:hover,
a.link-phone:hover,
a.link-fax:hover {
    text-decoration: underline;
}

a.link-fax {
    pointer-events: none;
}

h1 {
    font-size: var(--fs55);
    line-height: var(--lh12);
    margin: var(--abstand25) 0;
    color: var(--rot);
    font-weight: 500;
}

h1 span,
h2 span,
h3 span {
    display: block;
}

h2 {
    font-size: var(--fs55);
    line-height: var(--lh12);
    margin: var(--abstand25) 0;
    color: var(--rot);
    font-weight: 500;
}

h3 {
    font-size: var(--fs40);
    line-height: var(--lh12);
    margin: var(--abstand25) 0;
    color: var(--rot);
    font-weight: 500;
}

p {
    margin: 0 0 1em 0;
}

p.p28 {
    font-size: var(--fs28);
    line-height: var(--lineheight);
}

p.p40 {
    font-size: var(--fs40);
    line-height: var(--lh12);
    margin: 0 0 var(--abstand25) 0;
    font-weight: 500;
}

sup {
    vertical-align: top;
    line-height: 1em;
}

.ce-bodytext p:last-of-type {
    margin-bottom: 0;
}

.frame {
    width: 100%;
    float: left;
    clear: both;  
}

/* -- Keine Ahnung, ob gewünscht? -- */
.aussenrahmen {
    width: 100%;
    max-width: 2500px;
    margin: 0 auto;
    overflow: hidden;
}

.aussenrahmen::before,
.aussenrahmen::after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--weiss);
    width: calc((100% - 2500px) / 2);
    height: calc(var(--hoben) + 2px);
    z-index: 4;
}

.aussenrahmen::after {
    left: auto;
    right: 0;
}

#oben > .rahmen,
#footer > .rahmen,
#inhaltsbereich > .frame > .rahmen {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
/* -- Oben - -*/
#oben {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    background: var(--rot);
    color: var(--weiss);
}

#oben a {
    color: var(--weiss);
    text-decoration: none;
}

#oben .logo {
    width: 222px;
    margin:  var(--abstand25) 0;
    padding: 0;
    float: left;
}

#oben .logo .ce-gallery {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
}

#oben .logo .ce-gallery .ce-row {
    display: none;
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
}

#oben .logo .ce-gallery .ce-row:first-child,
#oben .logo .ce-gallery .ce-row:first-child:last-child {
    display: block;
}

#oben .logo .ce-gallery .ce-row a {
    display: block;
}

.hauptnavi {
    width: calc(100% - 250px);
    float: right;
    text-align: right;
}

#header {
    width: 100%;
    float: left;
    clear: both;
    margin: var(--hoben) 0 0 0;
    padding: 0;
    max-height: calc(100vh - var(--hoben));
    position: relative;
    overflow: hidden;
}

#header > .frame,
#header > .frame > .rahmen,
#header > .frame .ce-gallery {
    width: 100%;
    float: left;
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
    max-height: calc(100vh - var(--hoben));
}

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

#header > .frame .ce-gallery img {
    max-height: calc(100vh - var(--hoben));
    object-fit: cover;  
    max-width: unset;
    width: 100%;
}

#header > .frame .ce-bodytext {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;  
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs46);
    line-height: var(--lineheight);
    color: var(--weiss);
    text-shadow: 0 0 50px var(--dunkelgrau);
}

#header > .frame .ce-bodytext::before {
    content: '';
    display: block;
    width: 6px;
    height: calc(80% - 100px);
    background: var(--weiss);
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#header > .frame .ce-bodytext ul {
    width: 90%;
    display: block;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
}

#header > .frame .ce-bodytext ul li {
    width: calc(50% - 40px);
    float: left;
    margin-right: 40px;
}


#header > .frame .ce-bodytext ul li:nth-child(2) {
    text-align: right;
    margin-left: 40px;
    margin-right: 0;
}

#header > .frame .ce-bodytext ul li a::before {
    content: '';
    display: block;
    width: 50%;
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
}

#header > .frame .ce-bodytext ul li:nth-child(2) a::before {
    left: auto;
    right: 0;
}

#header > .frame .ce-bodytext ul li a:hover::after {
    content: '';
    width: 50%;
    height: 100%;
    display: block;
    position: absolute;
    top:0;
    left: 0;
    /* background: var(--transrot035); */
    background: var(--schwarztrans09);
    z-index: 0;
    mix-blend-mode: color;
}

#header > .frame .ce-bodytext ul li:nth-child(2) a:hover::after {
    left: auto;
    right: 0;
}


#header > .frame .ce-bodytext ul li strong {
    font-weight: 500;
    line-height: var(--lineheight);
    font-size: var(--fs60);
    text-transform: uppercase;
}

#header > .frame .ce-bodytext ul li a {
    font-size: var(--fs20);
    line-height: var(--lineheight);
    text-decoration: none;
    color: transparent;
}

#header > .frame .ce-bodytext ul li a:hover {
    color: var(--weiss);
}


.nachunten {
    background: url(../images/down-arrow.svg) left top no-repeat;
    background-size: 100% auto;
    width: 85px;
    height: 85px;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

#inhaltsbereich {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;  
}

#oben + #inhaltsbereich {
    margin-top: calc(var(--hoben) + var(--puffer));
    /*min-height: calc(100vh - var(--hoben) - var(--puffer));*/
}

#header + #inhaltsbereich:has(.frame-default) {
    margin-top: var(--puffer);
}

#inhaltsbereich ul {
    list-style: none;
    padding: 0;
    margin: var(--abstand25) 0;
}

#inhaltsbereich ol {
    margin: var(--abstand25) 0;
    padding: 0 0 0 30px;
}

#inhaltsbereich ul li {
    background: url(../images/aufzaehlungszeichen-blatt.svg) left top no-repeat;
    background-size: 40px auto;
    padding: 0 0 0 50px;
    margin: 0 0 15px 0;
}

#inhaltsbereich ul li:last-of-type {
    margin-bottom: 0;
}

.footeranfrage {
    width: 100%;
    float: left;
    clear: both;
    margin: calc(var(--marginabstand) * 10) 0 0 0;
    padding: 0;  
    position: relative;
}

.footeranfrage::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: var(--transweiss05);
}

.footeranfrage > .frame > .rahmen {
    width: 90%;
    margin: 0 auto;
    max-width: 950px;
}

.footeranfrage > .frame.frame-type-textmedia {
    opacity: 0;
    background-size: cover;
}

.footeranfrage > .frame.frame-type-textmedia .ce-gallery {
    display: none;
}

.footeranfrage > .frame.frame-type-textmedia .ce-textpic {
    position: relative;
}

.footeranfrage > .frame.frame-type-textmedia .ce-textpic::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    background: url(../images/standortkarte.png) right top no-repeat;
    background-size: auto 100%;
    z-index: 1;
}

.footeranfrage > .frame.frame-type-textmedia .ce-textpic .ce-bodytext {
    background: var(--weiss);
    margin: 8% 0 7.5% 0; 
    padding: var(--abstand25) calc(var(--marginabstand) * 6) var(--abstand25) calc(var(--marginabstand) * 4);
    width: calc(410px - calc(var(--marginabstand) * 10));
    border-radius: var(--abstand25) 0 0 var(--abstand25);
}

.footeranfrage > .frame.frame-type-textmedia .ce-textpic .ce-bodytext > * {
    position: relative;
    z-index: 2;
}

.footeranfrage > .frame.frame-type-textmedia .ce-textpic h1,
.footeranfrage > .frame.frame-type-textmedia .ce-textpic h2,
.footeranfrage > .frame.frame-type-textmedia .ce-textpic h3 {
    margin-top: 0;
}

#footer {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: var(--abstand25) 0; 
    background: var(--rot);
    color: var(--weiss);
}

#footer > .rahmen {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#footer a {
    color: var(--weiss);   
}

.footerlogo {
    width: 350px;
    float: left;
}

.footerlogo .ce-gallery {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
}

.footerlogo .ce-gallery .ce-row {
    display: none;
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
}

.footerlogo .ce-gallery .ce-row:last-child,
.footerlogo .ce-gallery .ce-row:first-child:last-child {
    display: block;
}

.footerlogo .ce-gallery .ce-row a {
    display: block;
}

.footernavi {
    width: calc(100% - 400px);
    float: right;
    text-align: right;
}


.footernavi ul {
    list-style: none;
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    text-align: right;
}

.footernavi ul li {
    display: block;
    margin-top: 8px;
}

.footernavi ul li:first-child {
    margin: 0;
}

.footernavi ul li a {
    text-decoration: none;
}


/* -- Navigation -- */
:focus-visible {
    outline: var(--outline) auto 2px;
}

#mobnav, 
ul.ebene1 input[name="togglesub"] {
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden; 
}

label[for="mobnav"] {
    float: right;
    display: block;
}

label[for="mobnav"] .mob_button {
    float: left;
    position: relative;
    z-index: 5;
    margin: 14px 0 0 0;
    width: 52px;
    height: 52px;
    cursor: pointer;
    display: none;
}

label[for="mobnav"] .mob_button span {
    background-color: var(--navischriftfarbe);
    height: 3px;
    left: 6px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 40px;
    transition: all 0.3s ease 0.3s;
}

label[for="mobnav"] .mob_button span::after, 
label[for="mobnav"] .mob_button span::before {
    backface-visibility: hidden;
    background-color: var(--navischriftfarbe);
    content: "";
    height: 3px;
    position: absolute;
    transform: translateZ(0px);
    transition: all 0.3s ease 0.3s;
    width: 100%;
    display: block;
}

label[for="mobnav"] .mob_button span::before {
    transform: translateY(-12px);
}

label[for="mobnav"] .mob_button span::after {
    transform: translateY(12px);
}

.labeltext {
    width: 0;
    height: 0;
    overflow: hidden;
    display: block;
    text-indent: -999px;
}

#mobnav:checked + label .mob_button span {
    background-color: transparent;
}

#mobnav:checked + label .mob_button span::before {
    transform: translateY(0px) rotate(-45deg);
    background-color: var(--navischriftfarbe);
}

#mobnav:checked + label .mob_button span::after {
    transform: translateY(0px) rotate(45deg);
    background-color: var(--navischriftfarbe);
}

ul.ebene1, 
ul.ebene1 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    --linkfarbe: var(--navischriftfarbe);
}

.klappnavi {
    display: none;
    position: absolute;
    left: 0px;
    top: var(--hoben);
    background: var(--navbg);
}

ul.ebene1 > li {
    display: inline-block;
    vertical-align: top;
    margin: 0 7px;
    padding: var(--abstand35) 7px;
    position: relative;
}


ul.ebene1 > li:last-child {
    margin: 0 0 0 7px;
}

ul.ebene1 > .ifsub > label > .navtoggle,
ul.ebene2 > .ifsub > label > .navtoggle {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin: 0 0 0 2px;
}

ul.ebene1 .navtoggle::before,
ul.ebene1 .navtoggle::after {
    content: '';
    display: block;
    width: 10px;
    height: 1px;
    background: var(--navischriftfarbe);
    transform: rotate(45deg);
    position: absolute;
    top: 18px;
    left: 2px;
}

ul.ebene1 .navtoggle:hover::before,
ul.ebene1 .navtoggle:hover::after,
ul.ebene1 li.ifsub:hover .navtoggle::before,
ul.ebene1 li.ifsub:hover .navtoggle::after {
    height: 2px;
}

ul.ebene1 .navtoggle::after {    
    transform: rotate(-45deg);
    left: 9px;
}

ul.ebene1 li.ifsub:hover > .klappnavi,
ul.ebene1 li.ifsub:has(input[name="togglesub"]:checked) > .klappnavi {
    display: flex;
}

ul.ebene1 li:hover,
ul.ebene1 li.ifsub:hover,
ul.ebene1 li.act {
    background: var(--dunkelrot);
}

ul.ebene2 {
    display: block;
    float: left;
    text-align: left;
    min-width: 200px;
}

ul.ebene2 > li {
    float: left;
    clear: both;
    display: block;
    width: 100%;
    padding: 0;
    border-top: 1px solid var(--navischriftfarbe);
}

ul.ebene2 > li:first-child {
    border-top: 0;
}

ul.ebene2 > li > a {
    display: block;
    padding: 15px 20px;
}


ul.ebene2 > li:hover, 
ul.ebene2 > li.ifsub:hover,
ul.ebene1 li.act  ul.ebene2 > li {
    background: var(--rot);
} 

ul.ebene2 li:hover > a, 
ul.ebene2 li.ifsub:hover > a,
ul.ebene1 li.act  ul.ebene2 > li.act > a {
    background: var(--dunkelrot);
}

ul.ebene1 ul.ebene3 {
    display: block;
    float: left;
    text-align: left;
    width: calc(100% - 40px);
    margin: 10px 20px;
    float: left;
    clear: both;
    font-size: 20px;
    line-height: var(--lineheight);
}

ul.ebene3 li {
    margin-bottom: 5px;
    padding: 0 0 0 15px;
    position: relative;
}

ul.ebene3 li,
ul.ebene3 li.act,
ul.ebene3 li:hover, 
ul.ebene3 li.ifsub:hover,
ul.ebene3 li:hover a, 
ul.ebene3 li.ifsub:hover a,
ul.ebene1 li.act  ul.ebene2 > li.act > a ul.ebene3 li.act,
ul.ebene1 li.act  ul.ebene2 > li.act > a ul.ebene3 li > a {
    background: var(--rot);
}

ul.ebene3 li:hover::before,
ul.ebene3 li:hover::after,
ul.ebene3 li.act::before,
ul.ebene3 li.act::after {
    content: '';
    display: block;
    width: 10px;
    height: 1px;
    background: var(--navischriftfarbe);
    transform: rotate(45deg);
    position: absolute;
    top: 10px;
    left: 0;

}

ul.ebene3 li:hover::after,
ul.ebene3 li.act::after  {
    transform: rotate(135deg);
    left: 0;
    top: 17px;
}

/* -- Multicontent - -*/
.cn_multicontent_teaser  {
    width: 100%;
    float: left;
    clear: both;
}

.frame-style-2column .frame-type-header header > * {
    margin-top: 0;
}

.frame-style-slider .owl-carousel {
    width: calc(100% - calc(var(--marginabstand) * 8));
    padding: 0 calc(var(--marginabstand) * 4);
}


.frame-style-slider .frame > .rahmen {
    box-shadow: inset 0 0 0 4px var(--dunkelrot);
    width: calc(100% - calc(var(--marginabstand) * 4));
    padding: calc(var(--marginabstand) * 2) calc(var(--marginabstand) * 2) calc(var(--marginabstand) * 2) calc(var(--marginabstand) * 2);
    border-radius: var(--abstand25);
    margin-top: calc(var(--marginabstand) * 4);
    position: relative;
}

.frame-style-slider .frame > .rahmen:has(.ce-gallery.ce-border) {
    padding-top: calc(var(--marginabstand) * 5);
}

.frame-style-slider .frame > .rahmen .ce-gallery.ce-border {
    margin: 0;
    width: 80px;
    height: 80px;
    background: var(--dunkelrot);
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.frame-style-slider .frame > .rahmen .ce-gallery.ce-border .ce-outer {
    max-width: calc(100% - calc(var(--marginabstand) * 3));
    top: 50%;
    transform: translate(-50%, -50%);
}

.frame-style-slider .frame > .rahmen .ce-gallery.ce-border img {
    width: 50px;
}

.frame-style-slider .frame > .rahmen header > * {
    margin-top: 0;
}

.frame-style-slider .owl-prev,
.frame-style-slider .owl-next {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.frame-style-slider .owl-next {
    left: auto;
    right: 0;
}

.frame-style-slider .owl-prev span,
.frame-style-slider .owl-next span  {
    display: block;
    font-size: var(--fs60);
    font-weight: 400;
    height: 45px;
    color: var(--dunkelrot);
}

.frame-style-slider .owl-dots {
    width: 100%;
    float: left;
    clear: both;
    margin: calc(var(--marginabstand) * 2) 0 0 0;
    text-align: center;
}

.frame-style-slider .owl-dots .owl-dot {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: top;
    border-radius: 100%;
    background: var(--rot);
    margin: 0 3px;
}

.frame-style-slider .owl-dots .owl-dot.active {
    background: var(--dunkelgrau);
}

.cnmc-accordion {
    width: 100%;
    float: left;
    clear: both;
}

.cnmc-accordion button,
.cnmc-accordion button.ui-accordion-header {
    width: calc(100% - calc(calc(var(--marginabstand) * 5) + calc(var(--marginabstand) * 1.5)));
    float: left;
    clear: both;
    border: 0;
    background: var(--rot);
    color: var(--weiss);
    padding: var(--marginabstand) calc(var(--marginabstand) * 5) var(--marginabstand) calc(var(--marginabstand) * 1.5);
    margin-bottom: 2px;
    font-size: var(--fs20);
    line-height: var(--lineheight);
    text-align: left;
    cursor: pointer;
    position: relative;
    box-sizing: unset;
}

.cnmc-accordion button.ui-accordion-header.ui-state-active {
    background: var(--dunkelrot);
}

.ui-accordion-header-icon {
    position: absolute;
    top: 50%;
    right: calc(var(--marginabstand) * 1.5);
    width: 25px;
    height: 25px;
    transform: translateY(-50%);
    text-align: center;
}

.ui-accordion-header-icon::after {
    content: '›';
    display: block;
    font-size: 40px;
    line-height: 17px;
}

button.ui-accordion-header.ui-state-active .ui-accordion-header-icon {
    transform: rotate(90deg) translateX(-50%);
    transform-origin: center;
}

.cnmc-accordion .ui-accordion-content {
    width: calc(100% - calc(var(--marginabstand) * 3));
    background: var(--weiss);
    padding: var(--marginabstand) calc(var(--marginabstand) * 1.5) calc(var(--marginabstand) * 2) calc(var(--marginabstand) * 1.5); 
}


/* -- Roter Hintergrund -- */
.frame-layout-30 {
    background: var(--dunkelrot);
    color: var(--weiss);
    padding: calc(var(--abstand25) * 2) 0;
}

.frame-layout-30 h1,
.frame-layout-30 h2,
.frame-layout-30 h3, 
.frame-layout-30 a {
    color: var(--weiss);
}

.frame-layout-30 h1,
.frame-layout-30 h2,
.frame-layout-30 h3 {
    margin-top: 0;
}

.frame-layout-30 a.more,
#inhaltsbereich .frame-layout-30 ul li {
    background: url(../images/aufzaehlungszeichen-blatt-weiss.svg) left top no-repeat;
    background-size: 40px auto;
}


.frame-layout-30.frame-style-slider .frame > .rahmen,
.frame-layout-30.frame-style-slider.frame-roteslides .frame > .rahmen {
    box-shadow: inset 0 0 0 4px var(--weiss); 
}

.frame-layout-30.frame-style-slider .frame > .rahmen .ce-gallery.ce-border,
.frame-layout-30.frame-style-slider.frame-roteslides .frame > .rahmen .ce-gallery.ce-border {
    box-shadow: inset 0 0 0 3px var(--weiss); 
}

.frame-layout-30.frame-style-slider .owl-dots .owl-dot,
.frame-layout-30.frame-style-slider.frame-roteslides .owl-dots .owl-dot {
    background: var(--transweiss05);
}

.frame-layout-30.frame-style-slider .owl-dots .owl-dot.active,
.frame-layout-30.frame-style-slider.frame-roteslides .owl-dots .owl-dot.active {
    background: var(--weiss);
}

.frame-layout-30.frame-style-slider .owl-prev span, 
.frame-layout-30.frame-style-slider .owl-next span,
.frame-layout-30.frame-style-slider.frame-roteslides .owl-prev span, 
.frame-layout-30.frame-style-slider.frame-roteslides .owl-next span {
    color: var(--weiss);
}

.frame-layout-30.frame-style-slider .ce-bodytext,
.frame-layout-30.frame-style-slider.frame-roteslides .ce-bodytext {
    --rot: var(--weiss);
}

/* -- Anpassung Accordion -- */
.frame-layout-30 .cnmc-accordion .ui-accordion-content {
    color: var(--dunkelgrau);
}

.frame-layout-30 .cnmc-accordion .ui-accordion-content a {
    color: var(--linkrot);
}

.frame-layout-30 .cnmc-accordion a.more {
    background: url(../images/aufzaehlungszeichen-blatt.svg) left top no-repeat;
    background-size: 40px auto;
    text-decoration: none;
}

.frame-layout-30 .cnmc-accordion a.more:hover {
    text-decoration: underline;
}

#inhaltsbereich .frame-layout-30 .cnmc-accordion ul li {
    background: url(../images/aufzaehlungszeichen-blatt.svg) left top no-repeat;
    background-size: 40px auto;
}

.frame-layout-30 .cnmc-accordion button.ui-accordion-header.ui-state-active {
    background: var(--transweiss05);
}


/* -- Rote Slides -- */
.frame-style-slider.frame-roteslides .frame > .rahmen {
    background: var(--dunkelrot);
    box-shadow: unset;
    color: var(--weiss);
}

.frame-style-slider.frame-roteslides .frame > .rahmen h1,
.frame-style-slider.frame-roteslides .frame > .rahmen h2,
.frame-style-slider.frame-roteslides .frame > .rahmen h3,
.frame-style-slider.frame-roteslides .frame > .rahmen a {
    color: var(--weiss);   
}

.frame-style-slider.frame-roteslides a.more,
#inhaltsbereich .frame-style-slider.frame-roteslides ul li,
.frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext a.more,
#inhaltsbereich .frame-type-shortcut.frame-flipbox > .rahmen > .frame .ce-bodytext ul li {
    background: url(../images/aufzaehlungszeichen-blatt-weiss.svg) left top no-repeat;
    background-size: 40px auto;
}

.frame-style-slider.frame-roteslides .ce-bodytext {
    --rot: var(--weiss);
}

/* -- Wasserzeichen -- */
.frame-layout-31 {
    position: relative;
    padding: 0 0 calc(var(--marginabstand) * 8) 0;
}

.frame-layout-31::after {
    content: '';
    display: block;
    width: 90%;
    max-width: 1200px;
    background: url(../images/paragraph.svg) right top no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.3;
}

/* -- Icons Liste -- */
.frame-iconsliste .frame > .rahmen .ce-gallery.ce-border,
.frame-iconsliste_ohne .frame > .rahmen .ce-gallery.ce-border {
    margin: calc(var(--marginabstand) * 4) 0;
    width: 180px;
    height: 180px;
    background: var(--dunkelrot);
    border-radius: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.frame-iconsliste.frame-layout-30 .frame > .rahmen .ce-gallery.ce-border,
.frame-iconsliste_ohne.frame-layout-30 .frame > .rahmen .ce-gallery.ce-border {
    background: var(--weiss);
}

.frame-iconsliste  .frame > .rahmen .ce-gallery.ce-border .ce-outer,
.frame-iconsliste_ohne  .frame > .rahmen .ce-gallery.ce-border .ce-outer {
    max-width: calc(100% - calc(var(--marginabstand) * 3));
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100px;
}

.frame-iconsliste .row,
.frame-iconsliste_ohne .row {
    position: relative;
}

.frame-iconsliste .row:has(.frame > .rahmen .ce-gallery.ce-border)::after {
    content: '';
    display: block;
    height: 30px;
    width: 80%;
    background: var(--transrot035);
    position: relative;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
}

.frame-iconsliste.frame-layout-30 .row:has(.frame > .rahmen .ce-gallery.ce-border)::after {
    background: var(--transweiss05);
}

/* -- Weiterschalten -- */
#inhaltsbereich ul.menueweiter {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
}

#inhaltsbereich ul.menueweiter li {
    padding: 0;
    background: none;
    position: relative;
    text-decoration: none;
    width: auto;
    display: inline-block;
    vertical-align: top;

}

#inhaltsbereich ul.menueweiter li:first-child:last-child,
#inhaltsbereich ul.menueweiter li:last-child {
    float: right;
}

#inhaltsbereich ul.menueweiter li a {
    text-decoration: none;

    padding: 0 0 0 calc(var(--marginabstand) * 10);
    line-height: calc(var(--marginabstand) * 8);
    color: var(--dunkelrot);
    font-size: var(--fs28);
    font-weight: 500;
    line-height: var(--lh11);
    display: flex;
    flex-direction: row;
    align-items: center;    
    min-height: calc(var(--marginabstand) * 8);
}

#inhaltsbereich ul.menueweiter li a::before {
    content: '';
    display: block;
    background: url(../images/aufzaehlungszeichen_pfeil.svg) left top no-repeat;
    background-size: 100% auto;
    width: calc(var(--marginabstand) * 8);
    height: calc(var(--marginabstand) * 8);
    position: absolute;
    top: 0;
    left: 0;
}

#inhaltsbereich ul.menueweiter li:first-child a::before {
    transform: scaleX(-1);
}

#inhaltsbereich ul.menueweiter li:first-child:last-child a::before {
    transform: unset;
}

/* -- Powermail -- */
.tx-powermail,
.powermail_form,
.powermail_fieldset {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    border: 0;
}

.powermail_fieldset.layout1 {
    width: calc(50% - var(--cn_multigap));
    clear: none;
    overflow: hidden;
} 

.powermail_fieldset.layout1:nth-of-type(odd) {
    margin-right: var(--cn_multigap);
}

.powermail_fieldset.layout1:nth-of-type(even) {
    margin-left: var(--cn_multigap);
}

.powermail_fieldset.layout1 .powermail_legend {
    display: block;
    width: 0px;
    height: 0px;
    overflow: hidden;
    text-indent: -999px;
    white-space: nowrap;
    margin: 0;
    border: 0;
}

.powermail_fieldwrap {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 var(--marginabstand) 0;  
}

.powermail_label {
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 5px 0;   
}

.powermail_field {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;   
}

.powermail_input,
.powermail_textarea,
.powermail_date,
.powermail_captcha {
    width: calc(100% - calc(var(--marginabstand) * 2));
    float: left;
    clear: both;
    display: block;
    margin: 0;  
    border: 0;
    padding: 5px var(--marginabstand);
    background: var(--transgrau01);  
    font-family: var(--fontfamily);
    font-size: var(--fontsize);
    line-height: var(--lineheight);
    font-weight: 500;
    border-radius: 0;
}

.powermail_input,
.powermail_captcha {
    appearance: none; 
}

.powermail_textarea {
    resize: none;
    appearance: none;
}

/*
.powermail_fieldwrap_type_file .powermail_field {
    width: calc(100% - calc(var(--marginabstand) * 2));
    padding: 5px var(--marginabstand);
    background: var(--transgrau01);  
}*/

.powermail_fieldwrap_captcha label {
    position: relative;
    width: auto;
    padding-right: 8px; 
}

.powermail_fieldwrap_captcha label::after {
    content: '*';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

.powermail_captchaimage {
    display: block;
    margin: 10px 0 0 0;
    float: left;
    clear: both;
}

.powermail_checkbox  {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

.form-check-label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 5px;
    max-width: calc(100% - 35px);
}

.powermail_submit {
    color: var(--rot);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
    background: url(../images/aufzaehlungszeichen-blatt.svg) left top no-repeat;
    background-size: 40px auto;
    display: inline-block;
    vertical-align: top;
    padding: 15px 0 0 15px;
    margin: 10px 0;  
    border: 0;
    font-family: var(--fontfamily);
    font-size: var(--fontsize);
    line-height: var(--lineheight);
    font-weight: 500;
    border-radius: 0;
    cursor: pointer;
    float: right;
}

#inhaltsbereich .powermail-errors-list li {
    background: none;
    padding: 0;
    margin: 0;
    color: var(--rot);
}

#inhaltsbereich .powermail-errors-list {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
}

.powermail_field_error {
    box-shadow: inset 0 0 0 2px var(--rot);
}

.powermail_create {
    width: 100%;
    float: left;
    clear: both;
}

/*  ++ Anpassung Formular wg neues Feld ++ */
.powermail_fieldwrap_abholungoderlieferung .powermail_field {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.powermail_fieldwrap_abholungoderlieferung .powermail_field .form-check-label {
    vertical-align: top;
    margin-right: 25px;
}


/* -- Wegen dem Ajax-Scrolling-Problem -- */
.frame-type-powermail_pi1:has(.powermail_create) {
    padding-top: 200px !important;
}

/* -- max-width: 590px -- */
.frame.frame-layout-32 header,
.frame.frame-layout-32 .ce-bodytext {
    max-width: 590px;
}


/* -- Bild aussen -- */
.frame-bildaussen {
    position: relative;
}

.frame-bildaussen .ce-intext.ce-right .ce-gallery,
.frame-bildaussen .ce-intext.ce-left .ce-gallery {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    float: left;
    clear: both;
    max-width: 45%;
}

.frame-bildaussen .ce-intext.ce-right .ce-gallery {
    left: auto;
    right: 0;
}

.frame-bildaussen .ce-gallery .ce-row,
.frame-bildaussen .ce-gallery .ce-column,
.frame-bildaussen .ce-gallery .image {
    width: 100%;
    height: 100%;
    display: block;
    float: left;
    clear: both;
    text-align: right;
}

.frame-bildaussen .ce-gallery img {
    height: 100%;
    max-width: unset;
    width: auto;
    object-fit: cover; 
    display: inline-block;
    vertical-align: top;
}

/* -- NEU: 2025-07-01 -- */
.frame-layout-30.frame-blattaufzaehlung {
    padding-bottom: 0;
}

.frame-blattaufzaehlung .tx_cn-columns {
    margin-top: calc(var(--marginabstand) * 8);
    padding-bottom: calc(var(--marginabstand) * 7); 
    position: relative;
}

.frame-blattaufzaehlung .tx_cn-columns::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    background: var(--rot);
    width: 5px;
    height: 100%;
}

.frame-layout-30 .frame-blattaufzaehlung .tx_cn-columns::before,
.frame-layout-30.frame-blattaufzaehlung .tx_cn-columns::before {
    background: var(--weiss);
}

.frame-blattaufzaehlung .tx_cn-columns .frame > .rahmen .ce-gallery.ce-border {
    margin: 0 0 calc(var(--marginabstand) * 2) 0;
    width: 100px;
    height: 100px;
    background: var(--dunkelrot);
    border-radius: 100%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.frame-layout-30 .frame-blattaufzaehlung .tx_cn-columns .frame > .rahmen .ce-gallery.ce-border,
.frame-layout-30.frame-blattaufzaehlung .tx_cn-columns .frame > .rahmen .ce-gallery.ce-border {
    background: var(--weiss);
}

.frame-blattaufzaehlung .tx_cn-columns  .frame > .rahmen .ce-gallery.ce-border .ce-outer {
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 60px;
}

.frame-blattaufzaehlung .tx_cn-columns .row > div {
    width: calc(50% - 200px);
    margin-top: calc(var(--marginabstand) * 4 * -1);
    position: relative;
}

.frame-blattaufzaehlung .tx_cn-columns .row > div::after {
    content: '';
    display: block;
    width: 200px;
    height: 92px;
    position: absolute;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    background: url(../images/blatt.svg) right top no-repeat;
    background-size: 160px auto;
}

.frame-blattaufzaehlung .tx_cn-columns .row > div:nth-child(even) {
    float: right;
}

.frame-blattaufzaehlung .tx_cn-columns .row > div:nth-child(even)::after {
    left: auto;
    right: 100%;  
    transform: scaleX(-1) translateY(-50%);
}

.frame-type-div {
    margin: calc(var(--marginabstand) * 8) 0 calc(var(--marginabstand) * 6) 0;
}

.frame-type-div.frame-layout-30 hr,
.frame-layout-30 .frame-type-div hr {
    background: var(--weiss);
}

.frame-type-div hr {
    border: 0;
    width: 90%;
    margin: 0 5%;
    height: 2px;
    background: var(--rot);
}

/* -- NEU: 2025-07-02 -- */
#inhaltsbereich .menu-mit-bildern {
    width: 100%;
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
    list-style: none;
}

#inhaltsbereich ul.menu-mit-bildern li {
    padding: 0;
    display: inline-block;
    vertical-align: top;
    background: none;
    margin: 0 0 var(--abstand25);
    border-radius: var(--abstand25);
    overflow: hidden;
    position: relative;  
    aspect-ratio: 3/2;
    width: calc(33.3% - calc(var(--marginabstand) * 2));
    background: var(--rot);
}


#inhaltsbereich ul.menu-mit-bildern li:nth-child(3n+2) {
    margin-left: var(--abstand25);
    margin-right: var(--abstand25);
}

#inhaltsbereich ul.menu-mit-bildern li a {
    display: block;
    text-decoration: none;
    color: var(--weiss);
    aspect-ratio: 3/2;
}

#inhaltsbereich ul.menu-mit-bildern li img {
    display: block;
    opacity: 0.3;
    transition: var(--standardtransition);
    aspect-ratio: 3/2;
    object-fit: cover;
}

#inhaltsbereich ul.menu-mit-bildern li:hover img {
    opacity: 0.2;
}

#inhaltsbereich ul.menu-mit-bildern li .box {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
}

/* -- Downloads -- */

#inhaltsbereich .frame-type-uploads:not(:has(ul.ce-uploads)) {
   display: none;
}

#inhaltsbereich ul.ce-uploads {
    margin: 0
}

#inhaltsbereich ul.ce-uploads li {
    background: none;
    padding: 0;
}

#inhaltsbereich ul.ce-uploads li a {
    width: auto;
    background: url(../images/download.svg) left 6px no-repeat;
    background-size: 20px auto;
    padding: 0 0 0 25px;
}

#inhaltsbereich ul.ce-uploads li a.pdficon {
    background: url(../images/pdf.svg) left 0 no-repeat;
    background-size: 20px auto;
}

#inhaltsbereich ul.ce-uploads li a span {
    display: inline;
}

/* -- Steps -- */
#inhaltsbereich ol.menuesteps {
    list-style: none;
    padding: 0;
    counter-reset: counter;
    color: var(--hellgrau);
}

#inhaltsbereich ol.menuesteps li {
    display: inline-block;
    vertical-align: top;
    width: calc(33.3% - calc(var(--marginabstand) * 2));
}

#inhaltsbereich ol.menuesteps li:nth-child(3n+2) {
    margin-left: var(--abstand25);
    margin-right: var(--abstand25);
}

#inhaltsbereich ol.menuesteps li a {
    position: relative;
    text-decoration: none;
    display: block;
    padding: 0 0 0 120px;
    line-height: 100px;
    color: var(--hellgrau);
    font-size: var(--fs40);
    font-weight: 500;
    line-height: var(--lh11);
}

#inhaltsbereich ol.menuesteps li a span {
    display: block;
    max-width: 88%; 
}

#inhaltsbereich ol.menuesteps li a::before {
    content: counter(counter)'.';
    counter-increment: counter;
    font-size: var(--fs40);
    line-height: 100px;
    display: block;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background: var(--hellgrau);
    color: var(--weiss);
    text-align: center;
    text-decoration: none;
    position: absolute;
    top: 0;
    left: 0;
}

#inhaltsbereich ol.menuesteps li.act a {
    color: var(--dunkelrot);
}

#inhaltsbereich ol.menuesteps li.act a::before {
    background: var(--dunkelrot);
}

/* -- Vorteilsbox -- */
.frame-type-cn_multicontent .frame-vorteilsbox {
    background: var(--dunkelrot);
    border-radius: var(--abstand25);
    color: var(--weiss);
}

.frame-type-cn_multicontent .frame-vorteilsbox > .rahmen {
    width: calc(100% - calc(var(--marginabstand) * 4));
    margin: var(--abstand25) calc(var(--marginabstand) * 2);
}

.frame-type-cn_multicontent .frame-vorteilsbox h1,
.frame-type-cn_multicontent .frame-vorteilsbox h2,
.frame-type-cn_multicontent .frame-vorteilsbox h3,
.frame-type-cn_multicontent .frame-vorteilsbox a {
    color: var(--weiss);
}

.frame-type-cn_multicontent .frame-vorteilsbox a.more,
#inhaltsbereich .frame-type-cn_multicontent .frame-vorteilsbox ul li {
    background: url(../images/aufzaehlungszeichen-blatt-weiss.svg) left top no-repeat;
    background-size: 40px auto;
}

.frame-type-cn_multicontent .frame-vorteilsbox h1,
.frame-type-cn_multicontent .frame-vorteilsbox h2,
.frame-type-cn_multicontent .frame-vorteilsbox h3 {
    margin-top: 0;
}