.lageplan
{
    scroll-margin-top: var(--scroll-margin-top);
    width: var(--breite-contentContainerElement);

    padding: 1rem;
}

.lageplan h1 span
{
    /*text-decoration: underline;*/

    /*border-bottom: 1px solid black;*/
}

.lageplan .content
{
    margin-top: 5.5vh;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;    /* Betrifft X-Achse */
    align-items: stretch;    /* Betrifft Y-Achse */

    /* Stretch: Sorgt dafür, dass alle Kindelemente des durch Flex verwalteten
    Layoutsystem die gleiche Höhe haben. Bedingung: Height in Kindelementen muss
    auf auto gesetzt werden */

    width: 100%;

    /*margin-top: 1.5rem;*/
}

.lageplan .content .lageplanText
{
    width: 55%;
    height: auto;   /* <- Strengenommen die Defaulteinstellung, aber man weiß ja nie */

    margin-left: var(--text-zu-bild-abstand);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lageplan .content .lageplanText
{
    max-width: 60ch;
}

.lageplan .content .lageplanText p
{
    margin-top: 0;
}

.lageplan .content .lageplanText .linkContainer
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding: 4px 8px;
}

.lageplan .content .mapContainer
{
    width: 40%;
    height: auto;

    position: relative;
}

.lageplan .content .mapContainer .mapOverlay
{
    position: absolute;
    /*inset: 0;   !* left, right, top, bottom = 0 *!*/
    left: -1%;
    top: -1%;

    width: 103%;
    height: 101%;

    background-color: rgba(255, 255, 255, 0.45);

    display: flex;
    align-items: center;
    justify-content: center;

    /*font-size: 2vw;*/
    font-size: clamp(0.8rem, 2vw, 2rem);
    /*font-size: 2.2rem;*/

    color: var(--blau);
    font-weight: bold;
    cursor: pointer;

    /* Transition */
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.lageplan .content .mapContainer .mapOverlay.overlayHidden
{
    /* Klick event wird an darunterliegendes Element weitergeleitet */
    /*pointer-events: none;*/

    /*display: none;*/

    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
}

.lageplan .content .mapContainer .mapOverlay span
{
    /*margin-bottom: 10rem;*/
}


.lageplan .content .mapContainer iframe
{
    width: 100%;
    aspect-ratio: 4 / 3;    /* Bei IFrames würde height: auto eine Verzerrung des IFrames bewirken.
                            Deshalb wird hier aspect-ratio, anstelle von height: auto; verwendet */

    margin: 1px;
}