.content-bg {
    background-image: url("../lib/img/bg/standorte-1080.jpg");
    opacity: 0.25;
}
@media all and (min-height: 1440px) { .content-bg { background-image: url("../lib/img/bg/standorte-1440.jpg"); } }
@media all and (min-height: 2160px) { .content-bg { background-image: url("../lib/img/bg/standorte-2160.jpg"); } }

.constrained > p {
    text-align: justify;
}

.locations {
    display: flex;
    flex-direction: row;
    margin-bottom: 60px;
}

.locations a {
    text-decoration: none;
    font-weight: 200;
}

.location {
    display: flex;
    flex-direction: column;
    flex-basis: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.location:nth-child(2n + 1) {
    margin-right: 30px;
}

.location h3 {
    margin: 0 0 30px;
    color: var(--color-red);
}

.location > p {
    margin: 0 0 30px;
    padding-left: 50px;
}

.location > p:before {
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.location .street:before {
    background-image: url("../lib/img/icon-location.svg");
}

.location .contact:before {
    background-image: url("../lib/img/icon-contacts.svg");
}

.location .opening-hours:before {
    background-image: url("../lib/img/icon-openhrs.svg");
}

.location .street {
    flex-shrink: 0;
}

.location .street > span {
    display: block;
}

.location .contact {
    display: grid;
    grid-template-columns: 120px auto;
    grid-template-rows: repeat(5, min-content);
    flex-grow: 1;
}

.location .opening-hours {
    display: grid;
    grid-template-columns: 120px auto;
    grid-template-rows: repeat(5, min-content);
}

.location .opening-hours > span:first-child {
    grid-column: 1 / 3;
    font-weight: bold;
}

.location .opening-hours > span:nth-child(2n + 3) {
    font-weight: 200;
    color: var(--color-red);
}

.map {
    flex-shrink: 0;
    width: auto;
    height: 210px;
}

.map:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.map > div {
    position: absolute;
    width: 100%;
    height: 100%;
}

.map .gm-style > div:nth-last-child(1),
.map .gm-style > div:nth-last-child(3) {
    position: absolute;
    bottom: 0;
}

.map .gm-style > div:nth-last-child(1) {
    right: 0;
}

/*.map .gm-style > div {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

.contactform-dialog .dialog-content > button {
    display: block;
    padding: 5px;
    background-color: rgb(226, 226, 226);
    border: none;
    color: black;
    transition: background-color 500ms, color 500ms;
    bottom: 0;
    width: 100%;
}

.contactform-dialog .dialog-content > button:hover,
.contactform-dialog .dialog-content > button:focus {
    background-color: var(--color-red);
    color: white;
}

.contactform-dialog {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms;
}

.contactform-dialog.visible {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.contactform-dialog:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

.contactform-dialog .dialog-content {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 600px;
    background-color: white;
}

.contactform-dialog .dialog-content iframe {
    flex-grow: 1;
    border: none;
}

@media all and (max-width: 1100px) {
    .locations {
        flex-direction: column;
    }

    .location:nth-child(2n + 1) {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .location {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .location h3 {
        grid-column: 1 / 3;
    }

    .location > p {
        padding-left: 30px;
    }

    .location .opening-hours {
        margin-right: 20px;
    }
}

@media all and (max-width: 775px) {
    .location {
        display: flex;
        flex-direction: column;
    }
}

@media all and (max-width: 415px) {

    .location .contact,
    .location .opening-hours {
        grid-template-columns: 1fr;
        grid-template-rows: unset;
    }

    .location .opening-hours > span:first-child {
        grid-column: 1;
    }
}

@media all and (-ms-high-contrast:none) { /* IE */
    .location .contact, .location .opening-hours {
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
    }

    .location .contact > *, .location .opening-hours > * {
        display: block;
        white-space: nowrap;
    }

    .location .contact > *:nth-child(2n+1), .location .opening-hours > *:nth-child(2n)   { -ms-grid-column: 1; }
    .location .contact > *:nth-child(2n)  , .location .opening-hours > *:nth-child(2n+1) { -ms-grid-column: 2; }

    .location .contact > *:nth-child(n)  , .location .opening-hours > *:first-child    { -ms-grid-row: 1; }
    .location .contact > *:nth-child(n+3), .location .opening-hours > *:nth-child(n+2) { -ms-grid-row: 2; }
    .location .contact > *:nth-child(n+5), .location .opening-hours > *:nth-child(n+4) { -ms-grid-row: 3; }
    .location .contact > *:nth-child(n+7), .location .opening-hours > *:nth-child(n+6) { -ms-grid-row: 4; }
    .location .opening-hours > *:nth-child(n+8)                                        { -ms-grid-row: 5; }
    .location .opening-hours > *:nth-child(n+10)                                       { -ms-grid-row: 6; }

    .location .opening-hours > *:first-child {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
    }
}