/* ==========================================
    modul-typ-id: 7
    Modultyp: Textblock
========================================== */


/* =====================================================
   Desktop
===================================================== */

.mvi-7-textblock-text-desktop {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr) minmax(0, 3fr);

    gap: var(--mvi-basiseinheit-2);

    width: 100%;

    padding:
        var(--mvi-basiseinheit-2) var(--mvi-basiseinheit-2);

    box-sizing: border-box;

    border-top: dashed var(--mvi-neutral-liniengrau) var(--mvi-linie-normal);


}


/* =====================================================
   Überschriften links
===================================================== */

.mvi-7-textblock-text-desktop>h2,
.mvi-7-textblock-text-desktop>h3,
.mvi-7-textblock-text-desktop>h4 {
    grid-column: 1;

    margin-top: 0;
    margin-bottom: 0;

    padding: 0 var(--mvi-basiseinheit-2);

    box-sizing: border-box;

    text-align: left;

    border-right:
        dashed var(--mvi-neutral-liniengrau) var(--mvi-linie-normal);
}

.mvi-7-textblock-text-desktop>h2:has(+ p + ul),
.mvi-7-textblock-text-desktop>h3:has(+ p + ul),
.mvi-7-textblock-text-desktop>h4:has(+ p + ul),
.mvi-7-textblock-text-desktop>h3:has(+ p + a) {
    grid-row: span 2;
}

/* 5 Absätze + Liste */
.mvi-7-textblock-text-desktop>h2:has(+ p + p + ul),
.mvi-7-textblock-text-desktop>h3:has(+ p + p + ul),
.mvi-7-textblock-text-desktop>h4:has(+ p + p + ul) {
    grid-row: span 3;
}

/*.mvi-7-textblock-text-desktop a {
    padding: 0 var(--mvi-basiseinheit-2);
}*/


/* =====================================================
   Text rechts
===================================================== */

.mvi-7-textblock-text-desktop>p {
    grid-column: 2;

    margin-top: 0;

    padding: 0 var(--mvi-basiseinheit-2);

    box-sizing: border-box;

    text-align: justify;
}

.mvi-7-textblock-text-desktop>p:last-child {
    margin-bottom: 0;
}


.mvi-7-textblock-text-desktop>ul {
    grid-column: 2;

    margin-top: 0;

    padding: 0 var(--mvi-basiseinheit-2) 0 calc(var(--mvi-basiseinheit-2) + 20px);

    box-sizing: border-box;

    text-align: justify;

}

.mvi-7-textblock-text-desktop>ul li::marker {
    color: var(--mvi-akzent-500);
}



/* =====================================================
   Mobile-Version zunächst ausblenden
===================================================== */

.mvi-7-textblock-text-mobile {
    display: none;
}


/* =====================================================
   Mobile
===================================================== */

@media (max-width: 768px) and (orientation: portrait),
(orientation: landscape) and (max-height: 600px) {

    .mvi-7-textblock-text-desktop {
        display: none;
    }

    .mvi-7-textblock-text-mobile {
        display: block;

        width: 100%;
        max-width: 100%;

        padding:
            0 var(--mvi-basiseinheit-2);

        box-sizing: border-box;
        gap: var(--mvi-basiseinheit-1);
        
        border-top: dashed var(--mvi-neutral-liniengrau) var(--mvi-linie-normal);
    }

    .mvi-7-textblock-text-mobile h2,
    .mvi-7-textblock-text-mobile h3,
    .mvi-7-textblock-text-mobile h4 {
        text-align: left;
    }

    .mvi-7-textblock-text-mobile p {
        text-align: justify;
    }


    .mvi-7-textblock-text-mobile>ul {
        grid-column: 2;

        margin-top: 0;

        padding: 0 var(--mvi-basiseinheit-2) 0 calc(var(--mvi-basiseinheit-2) + 2px);

        box-sizing: border-box;

        text-align: left;

    }

    .mvi-7-textblock-text-mobile>ul li::marker {
    color: var(--mvi-akzent-500);
}



}