.text-and-image {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    position: relative;
    .text-and-image__image { 
        width: 100%;
        height: auto;
        figure, picture {
            width: 100%;
            height: 100%;
            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

.text-and-image.layout-1,
.text-and-image.layout-3,
.text-and-image.layout-5,
.text-and-image.layout-9 {
    .text-and-image__image {
        position: relative;
        padding-top: var(--picture-padding);
        padding-right: var(--picture-padding);
        &::after {
            content: '';
            width: 65%;
            height: 65%;
            background-color: var(--main-color);
            position: absolute;
            top: 0px;
            right: 0px;
            z-index: -1;
        }
    }
}

.text-and-image.layout-4 {
    .container {
        display: flex;
        flex-direction: column-reverse;
        gap: var(--font-margin-p);
    }
}

.text-and-image.layout-2,
.text-and-image.layout-4,
.text-and-image.layout-6 {
    .text-and-image__image {
        position: relative;
        padding-bottom: var(--picture-padding);
        padding-left: var(--picture-padding);
        &::after {
            content: '';
            width: 65%;
            height: 65%;
            background-color: var(--main-color);
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: -1;
        }
    }
}

.text-and-image.layout-3,
.text-and-image.layout-5 {
    .text-and-image__image {
        padding: var(--picture-padding) var(--picture-padding) 0 0;
        &::after {
            position: absolute;
            width: initial;
            height: initial;
            top: 0px;
            right: 0px;
            bottom: 10%;
            left: 70%;  
        }
    }
}

.text-and-image.layout-4,
.text-and-image.layout-6 {
    .text-and-image__image {
        padding: var(--picture-padding) 0 0 var(--picture-padding);
        &::after {
            position: absolute;
            width: initial;
            height: initial;
            top: 0px;
            left: 0px;
            bottom: 10%;
            right: 70%;  
        }
    }
}

.text-and-image.layout-7 {
    background-color: var(--light-gray);
    background-image: url(/theme/public/assets/frontend/img/transparenter-hintergrund.webp);
    background-size: cover;
}

.text-and-image.layout-8 {
    padding-left: 0;
    .container {
        display: flex;
        flex-direction: column-reverse;

        .text-and-image__text {
            background-color: var(--main-color);
            padding: var(--font-margin-p) var(--gutter) var(--font-margin-p) calc(var(--gutter) * 1.3);
            margin-right: var(--picture-padding);
            position: relative;
            > :last-child {
                margin-bottom: 0px;
            }
            &::before {
                content: '';
                width: 2px;
                background-color: var(--text-color);
                position: absolute;
                top: var(--font-margin-p);
                left: var(--gutter);
                bottom: var(--font-margin-p);
            }
        }
        .text-and-image__image {
            position: relative;
            padding-top: var(--picture-padding);
            padding-right: var(--picture-padding);
            &::after {
                content: '';
                background-color: var(--main-color);
                position: absolute;
                top: 0px;
                right: 0px;
                width: 65%;
                height: 50%;
                z-index: -1;
            }
        }
    }
}

.text-and-image.layout-9 {
    .container {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-06);
        .text-and-image__image {
            grid-row: 1;
            margin-bottom: var(--font-margin-p);
        }
        .text-and-image__text {
            grid-row: 2;
            p {
                br {
                    display: none;
                }
            }
        }
        .text-and-image__extrabox {
            grid-row: 3;
            background-color: var(--main-color);
            display: flex;
            gap: var(--spacing-08);
            justify-content: center;
            align-items: center;
            padding: var(--spacing-05);
            * {
                margin-bottom: 0;
            }
            p {
                text-transform: uppercase;
                font-weight: bold;
            }
            ul {
                display: flex;
                gap: var(--spacing-08);
                list-style: none;
                padding: 0;
                
                li {
                    position: relative;
                    &::after {
                        content: '';
                        width: 1px;
                        position: absolute;
                        top: 0px;
                        right: calc((var(--spacing-08)/2) * -1);
                        bottom: 0px;
                        background-color: var(--text-color);
                    }
                    a.social-icon {
                        display: flex;
                        width: var(--icon-size);
                        height: var(--icon-size);
                        text-indent: -99999px;
                        background-color: var(--text-color);
                    }

                    a.social-icon-instagram {
                        mask-image: url('data:image/svg+xml,<svg width="24.537" height="24.534" data-name="Gruppe 911" version="1.1" viewBox="0 0 24.537 24.534" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><rect width="24.537" height="24.534" fill="%23001a33" data-name="Rechteck 535"/></clipPath></defs><g data-name="Gruppe 534"><g clip-path="url(%23a)" fill="%23001a33" data-name="Gruppe 533"><path transform="translate(-2.112,-2.078)" d="m14.485 8.3a6.043 6.043 0 1 0 6.041 6.04 6.043 6.043 0 0 0-6.041-6.04m0 9.912a3.871 3.871 0 1 1 3.871-3.869 3.87 3.87 0 0 1-3.871 3.869" data-name="Pfad 1078"/><path transform="translate(-5.783,-1.462)" d="m24.549 5.842a1.439 1.439 0 1 0 1.439 1.439 1.439 1.439 0 0 0-1.439-1.439" data-name="Pfad 1079"/><path d="m17.166 0h-9.795a7.379 7.379 0 0 0-7.371 7.369v9.794a7.379 7.379 0 0 0 7.371 7.371h9.8a7.379 7.379 0 0 0 7.371-7.371v-9.794a7.379 7.379 0 0 0-7.376-7.369m5.062 17.166a5.068 5.068 0 0 1-5.062 5.062h-9.795a5.068 5.068 0 0 1-5.062-5.062v-9.8a5.068 5.068 0 0 1 5.062-5.058h9.8a5.068 5.068 0 0 1 5.062 5.061z" data-name="Pfad 1080"/></g></g></svg>');
                    }
                    a.social-icon-facebook {
                        mask-image: url('data:image/svg+xml,<svg width="25" height="25" data-name="Gruppe 911" version="1.1" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><rect width="13.176" height="24.323" fill="%23001a33" data-name="Rechteck 536"/></clipPath></defs><g transform="translate(5.9125 .3385)" data-name="Gruppe 536"><g clip-path="url(%23a)" data-name="Gruppe 535"><path d="m4.023 24.323a0.679 0.679 0 0 1-0.349-0.69q0.01-4.785 0-9.571v-0.327h-0.281-2.755c-0.451 0-0.634-0.18-0.636-0.631q-2e-3 -1.866-2e-3 -3.73c0-0.451 0.191-0.634 0.635-0.635h3.04v-0.275c0-0.974-0.021-1.949 0.021-2.921a5.662 5.662 0 0 1 1.845-4.175 5.014 5.014 0 0 1 3.088-1.307c1.34-0.081 2.689-0.052 4.034-0.061a0.473 0.473 0 0 1 0.493 0.448 1.578 1.578 0 0 1 0.019 0.259q0 1.65 0 3.3c0 0.529-0.167 0.694-0.689 0.7-0.768 7e-3 -1.535 7e-3 -2.3 0.034-0.881 0.031-1.308 0.413-1.35 1.287-0.043 0.891-9e-3 1.786-9e-3 2.71h3.54c0.476 0 0.654 0.166 0.655 0.633q0 1.876 0 3.753c0 0.44-0.178 0.609-0.625 0.61q-1.639 0-3.277 0h-0.301v0.289q0 4.785 0 9.571a0.765 0.765 0 0 1-0.334 0.727z" fill="%23001a33" data-name="Pfad 1081"/></g></g></svg>');
                    }
                    a.social-icon-linkedin {
                        mask-image: url('data:image/svg+xml,<svg width="25" height="25" data-name="Gruppe 911" version="1.1" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><rect width="27.321" height="24.304" fill="%23001a33" data-name="Rechteck 538"/></clipPath></defs><g transform="matrix(.91503 0 0 .91503 .00027712 1.3805)" data-name="Gruppe 538"><g clip-path="url(%23a)" fill="%23001a33" data-name="Gruppe 537"><path d="m0 2.391a6.114 6.114 0 0 1 0.385-0.981 2.9 2.9 0 0 1 2.265-1.361 3.712 3.712 0 0 1 1.584 0.075 2.623 2.623 0 0 1 1.815 2.167 2.716 2.716 0 0 1-1.634 3.124 3.437 3.437 0 0 1-3.723-0.7 2.69 2.69 0 0 1-0.643-1.348 1.451 1.451 0 0 0-0.049-0.175v-0.8" data-name="Pfad 1082"/><path transform="translate(-3.158,-2.508)" d="m30.466 26.812h-5.841v-0.345c0-2.739 0.011-5.478-8e-3 -8.217a8.085 8.085 0 0 0-0.188-1.794 2.515 2.515 0 0 0-2.752-2.115 3.116 3.116 0 0 0-3.118 2.359 5.911 5.911 0 0 0-0.082 1.141q-9e-3 4.321 0 8.643v0.324h-5.858v-16.398h5.848v2.226c0.367-0.4 0.69-0.8 1.064-1.143a5.645 5.645 0 0 1 3.291-1.416 8.107 8.107 0 0 1 3.318 0.3 5.685 5.685 0 0 1 3.591 3.185 7.764 7.764 0 0 1 0.733 3.3c0.023 3.272 0.012 6.544 0.013 9.816 0 0.035-6e-3 0.07-0.011 0.136" data-name="Pfad 1083"/><rect transform="translate(.38 7.904)" width="5.806" height="16.393" data-name="Rechteck 537"/></g></g></svg>');
                    }
                }
                li:last-child {
                    &::after {
                        display: none;
                    }
                }
            }
        }
    }
    
}
@media (min-width: 768px) {
    .text-and-image.layout-1,
    .text-and-image.layout-3,
    .text-and-image.layout-5,
    .text-and-image.layout-9 {
        .container {
            display: grid;
            grid-template-columns: 35fr 65fr;
            gap: var(--gutter);
            align-items: center;
            .text-and-image__text {
                align-self: center;
                > :last-child {
                    margin-bottom: 0px;
                }
            }
        }
    }
    .text-and-image.layout-2,
    .text-and-image.layout-4,
    .text-and-image.layout-6 {
        .container {
            display: grid;
            grid-template-columns: 65fr 35fr;
            gap: var(--gutter);
            align-items: center;
            .text-and-image__image {
                grid-column: 1;
                grid-row: 1;
            }
            .text-and-image__text {
                grid-column: 2;
                grid-row: 1;
                align-self: center;
                > :last-child {
                    margin-bottom: 0px;
                }
            }
        }
    }

    .text-and-image.layout-3,
    .text-and-image.layout-5 {
        .container {
            grid-template-columns: 30fr 70fr;
        }
    }

    .text-and-image.layout-4,
    .text-and-image.layout-6,
    .text-and-image.layout-7 {
        .container {
            grid-template-columns: 70fr 30fr;
        }
    }

    .text-and-image.layout-8 {
        padding-left: var(--gutter);
        .container {
            display: flex;
            position: relative;
            .text-and-image__text {
                z-index: 1;
                margin-left: 14.5%;
                margin-right: 6.5%;
                margin-top: -85px;
                > :last-child {
                    margin-bottom: 0px;
                }
            }
        }
    }
    .text-and-image.layout-9 {
        .container {
            position: relative;
            row-gap: 0;
            .text-and-image__text,
            .text-and-image__image {
                grid-row: 1;
                margin-bottom: 0;
            }
            .text-and-image__image {
                height: 100%;
                .image_wrapper, figure, picture {
                    height: 100%; 
                }
            }
            .text-and-image__extrabox {
                z-index: 1;
                height: 68px;
                position: absolute;
                bottom: calc(var(--picture-padding) * -1);
                left: calc(35% );
            }
        }
    }
}

@media (min-width: 1024px) {
    .text-and-image.layout-7 {
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--gutter);
            .text-and-image__image {
                grid-column: 1;
                grid-row: 1;
            }

            .text-and-image__text { 
                align-self: center;
                padding-left: calc(var(--gutter) * 1.5);
                grid-column: 2;
                grid-row: 1;
                > :last-child {
                    margin-bottom: 0px;
                }
            }
        }
    }
}