/* Teaser Box (rsce_teaser_box)
 * ------------------------------------------------------------------------- */

.ce_rsce_teaser_box {
    max-width: 625px;
    max-height: 600px;
    aspect-ratio: 1 / 1.1;
    transition: all 0.3s ease-in-out;

    figure {
        max-height: 600px;
        height: 100%;
        overflow: hidden;

        img {
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
            transform: scale(1);
            transition: transform 0.3s ease-in-out;
        }
    }

    &:hover {
        filter: drop-shadow(0 0.3rem 1rem color-mix(in srgb, var(--color-black) 25%, transparent));

        img {
            transform: scale(1.1);
        }
    }

    div {
        padding-top: var(--space-s);
        padding-bottom: var(--space-s);
    }
}



/* OpenStreet Map (rsce_openstreetmap)
 * ------------------------------------------------------------------------- */

#map {
    height: 570px
}

.marker-list {
    .marker-item {
        p {
            margin-top: 0;
            margin-left: 0.56rem;
            font-style: italic;
        }

        a.button {
            zoom: 0.8;
        }
    }
}



/* Bild-Text Box (rsce_image_text_box)
 * ------------------------------------------------------------------------- */

.ce_rsce_image_text_box {
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    margin-block-start: 0;
    padding-inline: var(--gutter-size);
    position: relative;

    .autogrid_row {
        width: 100%;
        max-width: var(--global-width);
        margin-inline: auto;
        padding-inline: var(--gutter-size);
    }

    .content {
        font-size: 1.25rem;
        order: 1;

        &.box-bg-left {
            padding: 2rem 1rem 2rem 4rem;
        }

        &.box-bg-right {
            padding: 2rem 4rem 2rem 1rem;
        }
    }

    .img-breakout {
        padding: 0;

        .image {
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100%;
            max-width: 50vw;
            position: relative;
        }

        &.box-bg-left {
            order: 0;

            .image {
                margin-left: calc(-50vw + 100%);
                width: calc(100vw / 2);
            }
        }

        &.box-bg-right {
            order: 2;

            .image {
                margin-right: calc(-50vw + 100%);
                width: calc(100vw / 2);
            }
        }
    }
}


/* Karriere Banner (rsce_awo_job_banner)
 * ------------------------------------------------------------------------- */

@keyframes pulse {
    0% {
        transform: scale(0.95);
    }

    70% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.95);
    }
}

.ce_rsce_awo_job_banner {
    position: relative;
    overflow: visible;
    margin-top: 100px;
    height: 60vh;
    background: #e3e3e3;
    background: -webkit-linear-gradient(90deg, #e3e3e3 0%, #e3e3e3 50%, #dbdbdb 50%, #dbdbdb 100%);
    background: linear-gradient(90deg, #e3e3e3 0%, #e3e3e3 50%, #dbdbdb 50%, #dbdbdb 100%);

    .banner-logo {
        position: absolute;
        top: -95px;
        right: calc(50% - (var(--global-width) / 4));
        z-index: 1;
        transform: scale(1);
        animation: pulse 2s infinite;
    }

    .content {
        width: 100%;
        max-width: var(--global-width);
        margin-inline: auto;
        padding-inline: var(--gutter-size);
        /*position: unset;*/
        display: grid;
        height: 100%;
    }

    .image_container {
        /*position: relative;*/
        inset: 0;
        position: absolute;

        img {
            inset: 0;
            position: absolute;
            max-width: none;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            object-position: top;
        }
    }

    .text-block {
        align-self: center;

        h1 {
            font-weight: 400 !important;
        }

        h2 {
            font-weight: 800 !important;
            display: inline;
            white-space: break-spaces;
        }
    }

    .box-row {
        align-self: end;
    }

    .box {
        padding: 1.5rem;
        background: rgba(255,255,255,0.4);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        transition: all 0.2s ease-in-out;
        text-decoration: none;

        &:not(:last-child) {
            border-right: 3px solid #fff;
        }

        p {
            opacity: 0;
            transform: scale(.6);
            transition: all 0.2s ease-in-out;
            font-size: 1.3rem;
        }

        strong {
            font-size: 1.5rem;
            transition: all 0.2s ease-in-out;
        }

        &:hover {
            background: rgba(227,6,19,0.8);
            -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);

            strong {
                color: #fff !important;
            }

            p {
                color: #fff !important;
                opacity: 1;
                transform: scale(1);
            }
        }
    }
}


/* Blutspende Button/CTA (rsce_blutspende_btn)
 * ------------------------------------------------------------------------- */

@keyframes waves {
    to {
        background-position: 1600px 130%, 3150px 130%, 5300px 130%;
    }
}

.ce_rsce_blutspende_btn {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    position: relative;

    background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0) 55%, #b81616 67%, #b81616 69%, rgba(255, 255, 255, 0) 78%);

    /*&:before {*/
    /*    content: '';*/
    /*    background-color: var(--color-primary);*/
    /*    display: inline-block;*/
    /*    width: 100%;*/
    /*    height: 50%;*/
    /*}*/

    &:before {
        content: '';
        /*background-color: var(--color-primary);*/
        width: 100%;
        height: 37%;
        position: absolute;
        /*box-shadow: inset 0 0 13px #00000045;*/
        background-image:
                url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%23b50202' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%23b50202' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e"),
                url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%23b50202' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%23b50202' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e"),
                url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='198'%3e%3cdefs%3e%3clinearGradient id='a' x1='50%25' x2='50%25' y1='-10.959%25' y2='100%25'%3e%3cstop stop-color='%23b50202' stop-opacity='.25' offset='0%25'/%3e%3cstop stop-color='%23b50202' offset='100%25'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23a)' fill-rule='evenodd' d='M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z'/%3e%3c/svg%3e");
        background-repeat: repeat-x;
        background-size: 1600px 100%;
        background-position: 0 130%, -50px 130%, 500px 130%;
        animation: 50s waves linear infinite forwards;
    }

    a {
        aspect-ratio: 1 / 1;
        width: 215px;
        position: relative;
        color: #fff;
        text-decoration: none;
        align-content: center;
        justify-items: center;
        padding: 4rem 2rem;

        & > .image_container.bg-image {
            inset: 0;
            position: absolute;

            img {
                inset: 0;
                position: absolute;
                max-width: none;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        & > div {
            position: relative;
            z-index: 1;
            word-spacing: 100vw;
        }
    }
}