/* Grundlayout mit Flexbox. Keine Grid-Abhaengigkeit. */

#main {
    background: #fbfaf2;
}

#componentContainer,
.componentContainer {
    overflow: hidden;
}

.section {
    padding: 58px 0;
}

.intro-section__grid,
.image-text-section__grid,
.info-section__grid,
.detail-section__grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.intro-section__grid .section-copy,
.image-text-section__grid .section-copy,
.info-section__grid .section-copy,
.detail-section__grid .section-copy {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
}

.intro-section__grid > * + *,
.image-text-section__grid > * + *,
.info-section__grid > * + *,
.detail-section__grid > * + * {
    margin-left: 4%;
}

.intro-section__grid .section-copy + .image-frame {
    margin-left: 4%;
}

.intro-section__grid .image-frame,
.image-text-section__grid .image-frame {
    width: 540px;
}

/* Info-Bereiche: rechter Bildbereich ca. 15 % breiter als vorher. */
.info-section__images {
    width: 621px;
    flex: 0 0 621px;
}

.detail-list {
    width: 40%;
}

.section-copy {
    max-width: 820px;
}

.card-grid,
.tile-row,
.footer-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.card-grid > *,
.tile-row > * {
    width: 32%;
}

.card-grid > * + *,
.tile-row > * + *,
.footer-grid > * + * {
    margin-left: 2%;
}

.footer-grid > * {
    width: 32%;
}

@media (max-width: 75rem) {
    .intro-section__grid,
    .image-text-section__grid,
    .info-section__grid,
    .detail-section__grid {
        display: block;
    }

    .intro-section__grid > *,
    .image-text-section__grid > *,
    .info-section__grid > *,
    .detail-section__grid > * {
        width: auto;
    }

    .intro-section__grid > * + *,
    .image-text-section__grid > * + *,
    .info-section__grid > * + *,
    .detail-section__grid > * + * {
        margin-left: 0;
    }

    .intro-section__grid .section-copy + .image-frame {
        margin-left: 0;
    }
}

@media (max-width: 60rem) {
    .card-grid,
    .tile-row,
    .footer-grid {
        display: block;
    }

    .card-grid > *,
    .tile-row > *,
    .footer-grid > * {
        width: auto;
    }

    .card-grid > * + *,
    .tile-row > * + *,
    .footer-grid > * + * {
        margin-left: 0;
    }
}