/* pastor vorstellung */
.vorstellung{
    margin-top: 2em;
    display: flex;
    align-items: center;
    gap: 2em;
    padding: var(--section-padding);
}
.vorstellung .txt-holder{
    display: flex;
    flex-direction: column;
}
.vorstellung .txt-holder img{
    width: 80px;
    height: auto;
}
.vorstellung .txt-holder p{
    color: var(--ac);
    font-size: 1.2rem;
}

.vorstellung-img-holder{
    min-width: 272px;
    height: 272px;
    background-color: var(--pr);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
}
.vorstellung-img-holder img{
    height: 85%;
    width: auto;
}
.vorstellung-img-holder .banner-heading{
    top: -20px;
}


/* Anreise */
.anreise{
    padding: var(--section-padding);
    display: grid;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: max-content max-content;
    gap: 2em;
}

.anreise iframe,
.rcb-content-blocker{
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    grid-column: 2/3;
    grid-row: 1/3;
}

/* Map-Zelle im Grid stabilisieren */
.anreise-map{
    grid-column: 2/3;
    grid-row: 1/3;

    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;             /* verhindert "über das Grid hinaus" */
    position: relative;

    /* sorgt für stabile Höhe (auch wenn iframe ersetzt wird) */
    height: 100%;
    max-height: 343.78px;
}

/* iframe & RCB-Blocker immer 100% in den Wrapper */
.anreise-map iframe,
.anreise-map .rcb-content-blocker{
    position: absolute;
    inset: 0;
    min-width: 100% !important;
    min-height: 100% !important;
    border: 0;
    border-radius: 0;             /* Wrapper hat radius */
}

/* Falls der Placeholder ein <img> ist: sauber skalieren */
.anreise-map img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.anreise-map *{
    max-height: 343.78px;
}

.anreise-map div:has(img){
    position: inherit !important;
    aspect-ratio: none !important;
}

.anreise-map img {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    aspect-ratio: none;
}

.anreise .card input{
    margin-top: 5px;
    width: 100%;
    border: none;
    background-color: var(--bg);
    border-bottom: 2px solid var(--border-clr);
    transition: .2s;
    font-size: 1rem;
    padding: 15px 10px;
}
.anreise .card input:focus{
    border-bottom: 2px solid var(--ac);
}

.anreise .btn{
    margin-top: 5em;
}


/* Losungen */
.losungen{
    padding: var(--section-padding);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.losung{
    padding: 65px 1em 35px;
}
.losung p{
    color: var(--txt);
}
.losung span{
    position: absolute;
    bottom: 1em;
    right: 1em;
}
.losung img{
    position: absolute;
    width: 80px;
    height: auto;
    top: -25px;
    right: 1em;
}



@media(max-width: 600px){
    .vorstellung{
        flex-direction: column;
        gap: 3em;
    }
    .vorstellung-img-holder{
        width: 100%;
        min-width: 0;
    }

    .anreise-map{
        grid-column: 1/2;
        grid-row: 2/3;
        min-height: 240px;     /* mobile Höhe */
    }

    .anreise{
        column-gap: 0;
        grid-template-columns: 100%;
        grid-template-rows: max-content max-content max-content;
    }
    .anreise .heading{
        grid-column: 1/2;
    }
    .anreise iframe,
    .rcb-content-blocker{
        grid-column: 1/3;
        grid-row: 2/3;
    }
    .anreise .card{
        grid-column: 1/2;
        grid-row: 3/4;
    }



    .losung img{
        width: 50px;
        top: -16px;
    }
}