/* -- Modul - Rahmen Text neben Bild -- */
:root {
    --mora_tnb_bg: var(--color_f1f1f1);
    --mora_tnb_width: 100%;
    --mora_tnbwidth90: var(--content-width);
    --mora_tnb_maxwidth: var(--max-width);
    --mora_tnb_aspect: 16/9;
    --mora_tnb_aspect_resp: 3/2;
    --mora_tbn_abstand: var(--paddingl50);
}

/* -- Nur wenn es ein .ce-gallery gibt -- */
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen {
    max-width: unset;
    width: var(--mora_tnb_width);
    margin: 0;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > header {
    max-width: var(--mora_tnb_maxwidth);
    width: var(--mora_tnbwidth90);
    margin: 0 auto; 
}


.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext {
    width: var(--mora_tnb_width);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    container-type: inline-size;
    container-name: mora_textnebenbildcontent;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery {
    width: var(--mora_tnb_width);
    float: left;
    clear: both;
    margin: 0 0 var(--mora_tbn_abstand) 0;
    max-width: calc(var(--mora_tnb_width) / 2);
    align-self: flex-start;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row {
    display: none;
    width: var(--mora_tnb_width);
    float: left;
    clear: both;
    margin: 0;
    padding: 0;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row:first-child {
    display: block;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .ce-column,
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .image {
    display: block;
    width: var(--mora_tnb_width);
    float: left;
    clear: both;
    margin: 0;
    padding: 0;   
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .image a {
    display: block;
}

.frame.frame-mora_textnebenbild > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .image a::before {
    display: none;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .image img {
    width: var(--mora_tnb_width);
    height: auto;
    max-width: unset;
    display: block;
    aspect-ratio: var(--mora_tnb_aspect);
    object-fit: cover;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext {
    background: var(--mora_tnb_bg);
    margin: var(--mora_tbn_abstand) 0 0 calc(var(--mora_tbn_abstand) * -1);
    width: calc(calc(var(--mora_tnbwidth90) / 2) + var(--mora_tbn_abstand) - calc(var(--mora_tbn_abstand) * 2));
    max-width: calc(calc(var(--mora_tnb_maxwidth) / 2) + var(--mora_tbn_abstand) - calc(var(--mora_tbn_abstand) * 2));
    padding: var(--mora_tbn_abstand);
    float: left;
    clear: both;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > p:last-of-type,
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > ul:last-of-type {
    margin-bottom: 0;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > h1,
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > h2,
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > h3,
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > h3,
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext > header > * {
    margin-top: 0;
}

/* -- Anders herum -- */
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext.ce-right {
    flex-direction: row-reverse;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext.ce-right .ce-bodytext {
    margin-left: 0;
    margin-right: calc(var(--mora_tbn_abstand) * -1);
}

/* -- Responsive -- */
@container mora_textnebenbildcontent (max-width: 1200px) {
    .frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .image img {
        aspect-ratio: var(--mora_tnb_aspect_resp);
    }
}

@container mora_textnebenbildcontent (max-width: 800px) {
    .frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery {
        width: var(--mora_tnbwidth90);
        max-width: unset;
        margin: 0 auto;
    }

    .frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-gallery > .ce-row .image img {
        aspect-ratio: unset;
    }

    .frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext .ce-bodytext,
    .frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic.ce-intext.ce-right .ce-bodytext {
        width: calc(var(--mora_tnbwidth90) - calc(var(--mora_tbn_abstand) * 2));
        max-width: unset;
        margin: 0 auto;
    }
}

/* -- Fallback, wenn etwas falsch ausgewählt wurde. */
.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen > .ce-textpic:not(.ce-intext) {
   display: none;
}

.frame.frame-mora_textnebenbild:has(.ce-gallery) > .rahmen:has(.ce-textpic:not(.ce-intext))::after {
    content: var(--basic_fehlertext);
    display: block;
    color: var(--color_base_hightlight_1);
    margin: var(--paddingl50) 0;
    font-weight: var(--hl_fontweigt_700);
}