html {
  font-size: 14px;
}


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  box-sizing:border-box;
  min-height:100%;
  min-width:100%;
}

.stretch-image {
    width: 130%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   SHARED BUTTON STYLES
   ========================================================================== */

.C2A-Btn {
    border-radius: 1.3vh;
    border: 0.05vh solid #88cab8;
    background-color: #9900ff11;
    backdrop-filter: blur(9px);
    color: white;
    padding: 0px 30px;
    font-size: 1.2em;
    box-shadow: 3px 3px #88cab8;
    height: 7vh;
    cursor: pointer;
}

.C2A-Btn.small {
    height: 7vh;
    width: 28vw;
}

.C2A-Btn:hover {
    background-color: #244697be;
    box-shadow: 1.5px 1.5px #88cab8;
}

.C2A-Btn:active {
    background-color: #142856db;
}

/* ==========================================================================
   SHARED CONTAINER STYLES (used by FuE and SpatialWork)
   ========================================================================== */

.fue-container {
    display: grid;
    grid-template-columns: 5vw auto 5vw;
    grid-template-rows: auto;
    gap: 0px 0px;
    position: relative;
}

.fue-content {
    grid-column: 2 / 3;
    border-radius: 10px;
    color: white;
}

/* ==========================================================================
   SHARED STEP LAYOUT (used by FuE and SpatialWork)
   ========================================================================== */

.step {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
}

.step .image img {
    max-width: 80vw;
}

/* ==========================================================================
   SHARED ZUKUNFT SECTION STYLES
   ========================================================================== */

.zukunft-section {
    /* No box-shadow or border-radius to avoid visible boxes on transparent backgrounds */
}

.zukunft-section h2 {
    grid-column: 2 / 13;
    font-size: 2.5em;
    color: #15c1be;
    text-align: center;
    margin-bottom: 20px;
}

.zukunft-content {
    align-items: center;
    grid-column: 2 / 13;
}

.zukunft-text {
    flex: 1;
    font-size: 1.2em;
    color: white;
}

.zukunft-logos {
    display: flex;
    justify-content: center;
    align-items: center;
}

.zukunft-c2a {
    grid-column: 2 / 13;
    text-align: center;
    margin-top: 20px;
}

/* ==========================================================================
   SHARED BUTTON CONTAINER
   ========================================================================== */

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.c2a {
    margin: 5vh;
}

/* ==========================================================================
   SHARED LINK STYLES
   ========================================================================== */

#Link_a {
    color: #ffffff;
    text-decoration: none;
}

#Link_a:hover {
    color: #808080;
    text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE SHARED STYLES
   ========================================================================== */

@media screen and (min-width: 768px) {
    .C2A-Btn {
        font-size: 1.4em;
        height: 70px;
    }

    .fue-container {
        grid-template-columns: 15vw auto 15vw;
        grid-template-rows: auto;
        gap: 0px 0px;
    }

    .fue-content {
        grid-column: 2 / 3;
        grid-row: 2 / 10;
        border-radius: 10px;
        color: white;
        text-align: center;
    }

    .step {
        display: grid;
        grid-template-columns: repeat(13, 1fr);
        grid-template-rows: auto;
        margin-top: 10vh;
        position: relative;
    }

    .step .image img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .c2a {
        grid-column: 2 / 9;
        padding-top: 3vh;
    }

    .zukunft-section {
        display: grid;
        grid-template-columns: 3vw repeat(11, 1fr) 3vw;
    }

    .zukunft-section h2 {
        font-size: 6em;
        color: white;
    }

    .zukunft-text p {
        text-align: left;
        font-size: 2.0rem;
    }
}

/* ==========================================================================
   SPATIALWORLD PAGE GRID LAYOUT
   ========================================================================== */

.spatialworld-container {
    display: grid;
    grid-template-columns: 9vw 1fr 1fr 9vw;
    grid-template-rows: auto auto auto auto;
    gap: 2vh 0;
    color: white;
    text-shadow: 0 0 22px rgba(0, 0, 0, 1);
    padding-top: 3vh;
}

.spatialworld-container .heading-small {
    grid-column: 2 / 3;
    grid-row: 1;
    text-align: left;
    font-size: 2.5vh;
}

.spatialworld-container .heading-large {
    grid-column: 2 / 3;
    grid-row: 2;
    text-align: left;
    font-size: 5vh;
}

.spatialworld-container .textblock {
    grid-column: 2 / 3;
    grid-row: 3;
    text-align: left;
}

.spatialworld-container .textbody {
    font-size: 2.5vh;
    color: white;
}

.spatialworld-container .image1 {
    grid-column: 3 / 4;
    grid-row: 1 / 4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spatialworld-container .c2a {
    grid-column: 2 / 3;
    grid-row: 4;
}

.spatialworld-container .c2a .C2A-Btn {
    height: 7vh;
    width: 100%;
    font-size: 2vh;
}

@media screen and (min-width: 768px) {
    .spatialworld-container .heading-small {
        font-size: 3vh;
    }

    .spatialworld-container .heading-large {
        font-size: 6vh;
    }

    .spatialworld-container .textbody {
        font-size: 2.5vh;
    }

    .spatialworld-container .c2a .C2A-Btn {
        width: 30vw;
    }
}