/*
 * Styles für .contentinfo-Elemente
 * Extrahiert von https://www.naturgut-allgaeu.de/landwirtschaft/bio-landwirtschaft
 *
 * Struktur auf der Referenzseite:
 * .contentinfo > .text-image-v1|.text-image-v2 > .wrapper > .image-col (img, .headline > h3), .text-col (p, .button-wrap > a.linkgalleryroom)
 * .contentinfo liegt jeweils innerhalb von .col-md-6
 */

:root {
    --contentinfo-bg-color-muted: #eff0ef;
    --contentinfo-bg-color-accent: #ddddd8;
    --contentinfo-headline-bg-color: #0b160b;
    --contentinfo-headline-text-color: #fff;
    --contentinfo-link-color: #212529;
    --contentinfo-button-bg-color: #54564b;
    --contentinfo-button-text-color: #fff;
}

/* Grundabstand des .contentinfo-Containers innerhalb der Spalte */
.col-md-6 .contentinfo,
.col-md-12 .contentinfo {
    padding: 0 45px;
    position: relative;
}

/* Varianten-Container */
.text-image-v1 {
    background: var(--contentinfo-bg-color-muted);
    padding-bottom: 70px;
}

.text-image-v2 {
    margin-top: 200px;
}

.text-image-v2 .wrapper {
    background: var(--contentinfo-bg-color-accent);
    padding-bottom: 70px;
}

/* Bildspalte */
.text-image-v2 .wrapper .image-col,
.text-image-v1 .wrapper .image-col {
    padding: 0 50px;
    margin-top: 50px;
}

.text-image-v2 .wrapper .image-col img,
.text-image-v1 .wrapper .image-col img {
    width: 100%;
}

.text-image-v2 .wrapper .image-col img {
    margin-top: -50px;
    height: auto;
}

.text-image-v1 .wrapper .image-col img {
    margin-top: 50px;
    width: 90%;
    margin-left: -100px;
    height: auto;
}

/* Überschrift (liegt über dem Bild) */
.text-image-v2 .wrapper .headline,
.text-image-v1 .wrapper .headline {
    background-color: var(--contentinfo-headline-bg-color);
    padding: 20px 20px 15px;
    margin: 0 40px;
    margin-top: -60px;
    display: inline-block;
    width: calc(100% - 80px);
}

.text-image-v2 .wrapper .headline h3,
.text-image-v1 .wrapper .headline h3 {
    margin: 0;
    text-align: center;
    color: var(--contentinfo-headline-text-color);
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    hyphens: auto;
    font-family: 'Biryani';
}

/* Textspalte */
.text-image-v2 .wrapper .text-col,
.text-image-v1 .wrapper .text-col {
    padding: 0 90px;
    margin-top: 50px;
}

.text-image-v2 .wrapper .text-col p,
.text-image-v1 .wrapper .text-col p {
    margin-bottom: 40px;
}

/* Button ("frische Eier 24/7" u.ä.) */
.button-wrap {
    text-align: right;
}

.button-wrap .linkgalleryroom {
    float: unset;
    color: var(--contentinfo-link-color);
}

.linkgalleryroom {
    float: right;
    width: 65%;
    text-transform: uppercase;
    text-decoration: none;
}

a.linkgalleryroom {
    text-align: right;
    margin-bottom: 10px;
    background: var(--contentinfo-button-bg-color);
    color: var(--contentinfo-button-text-color) !important;
    width: auto;
    margin-right: 10px;
    padding: 12px 15px;
    font-size: 16px;
    line-height: unset;
    font-family: 'Patrick Hand';
    letter-spacing: 3px;
}

/* Responsive Anpassungen */
@media screen and (max-width: 1400px) {
    .text-image-v2 .wrapper .text-col,
    .text-image-v1 .wrapper .text-col {
        padding: 0 50px;
        margin-top: 50px;
    }

    .text-image-v2 .wrapper .headline,
    .text-image-v1 .wrapper .headline {
        padding: 20px 15px;
        width: calc(100% - 20px);
        margin: 0 10px;
        margin-top: -60px;
    }
}

@media screen and (max-width: 1200px) {
    .text-image-v2 .wrapper .headline,
    .text-image-v1 .wrapper .headline {
        margin-top: -30px;
    }
}

@media screen and (max-width: 991px) {
    .text-image-v1 .wrapper .image-col img {
        margin-left: 0;
        margin-top: -50px;
        width: 100%;
    }

    .text-image-v2 .wrapper .image-col img {
        margin-top: 50px;
    }
}

@media screen and (max-width: 768px) {
    .text-image-v2 {
        margin-top: 0;
    }

    .col-md-6 .contentinfo,
    .col-md-12 .contentinfo {
        padding: 0;
        position: relative;
    }
}

@media (max-width: 576px) {
    .text-image-v2 .wrapper .text-col,
    .text-image-v1 .wrapper .text-col {
        padding: 0 30px;
        margin-top: 50px;
    }

    .text-image-v2 .wrapper .image-col,
    .text-image-v1 .wrapper .image-col {
        padding: 0 30px;
    }
}