:root {
    --background-color-box1: rgb(254, 205, 27);
    --background-color-box2: rgb(121, 181, 48);
    --background-color-box3: rgb(0, 158, 224);
    --background-color-box4: #EED974;
    --background-color-box5: #005397;
    --color-box1: #eb7304;
    --color-box2: #000;
    --color-box3: #fff;
    --color-box-h1: #68a41f;
    --box-shadow-color: rgba(0, 0, 0, 0.5);
}

.awo-a11y {
    --background-color-box1: rgb(255, 233, 179);
    /* Helles Pastellgelb statt rgb(254, 205, 27) */
    --background-color-box2: rgb(198, 228, 162);
    /* Helles Pastellgrün statt rgb(121, 181, 48) */
    --background-color-box3: rgb(173, 216, 230);
    /* Helles Pastellblau statt rgb(0, 158, 224) */
    --background-color-box4: rgb(247, 238, 203);
    /* Noch helleres Pastellgelb statt #EED974 */
    --background-color-box5: rgb(176, 196, 222);
    /* Helles Pastellblau statt #005397 */
    --color-box1: #000;
    --color-box2: #000;
    --color-box3: #000;
    --box-shadow-color: rgba(0, 0, 0, 0.5);
}


body.awostylecell1 h1 {
    color: var(--color-box1);
}

body.awostylecell2 h1 {
    color: var(--color-box-h1);
}

body.awostylecell3 h1 {
    color: var(--background-color-box3);
}

.awo-a11y .start_wrapper .uk-link {
    color: #000;
    text-decoration: none;
    cursor: pointer
}


.start_table {
    min-height: 200px;
}

.start_table div.heading {
    width: 150%;
    font-size: 3vw;
    font-weight: 700;
    padding: 0;
    margin-bottom: 1vh;
    margin-top: 0.5vh;
    overflow: hidden;
    white-space: nowrap;
}

@media screen and (min-width: 2000px) {
    .start_table div.heading {
        font-size: 3.5rem;
    }
}

.start_table {
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 3.5;
    max-width: 1400px;
}

.table__cell {
    flex: 1 0 calc(100% / 12);
    padding: 25px;
    transition: flex 500ms cubic-bezier(0.4, 0.0, 0.2, 1), opacity 500ms cubic-bezier(0.4, 0.0, 0.2, 1);
    overflow: hidden;
    opacity: 1;
    overflow: hidden;
}

a.table__cell {
    text-decoration: none;
}

.table__cell:nth-child(1) .heading {
    color: var(--color-box1);
}

.table__cell:nth-child(2) .heading {
    color: var(--color-box2);
}

.table__cell:nth-child(3) .heading {
    color: var(--color-box3);
}

.table__cell:nth-child(1) {
    background-color: var(--background-color-box1);
    color: var(--color-box1);
}

.table__cell:nth-child(2) {
    background-color: var(--background-color-box2);
    color: var(--color-box2);
}

.table__cell:nth-child(3) {
    background-color: var(--background-color-box3);
    color: var(--color-box3);
}

.table__cell:hover,
.table__cell:focus,
.table__cell.active {
    flex: 0 0 60%;
    opacity: 1;
}

.text1 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
    min-width: 100%;
    display: block;
}

.start_table .heading span {
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.table__cell:hover .heading span,
.table__cell:focus .heading span,
.table__cell.active .heading span {
    opacity: 1;
}

.table__cell.active strong {
    opacity: 0;
}

.table__cell strong {
    opacity: 0;
}

.table__cell:hover strong,
.table__cell:focus strong {
    opacity: 1;
}

.page-info {
    font-size: 2vw;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table__cell.cell1 {
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 12vw 12vw;
}

.table__cell.cell2 {
    background-position: bottom left, bottom right;
    background-repeat: no-repeat, no-repeat;
    background-size: 12vw 12vw, 12vw 12vw;
}

.table__cell.cell3 {
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 12vw 12vw;
}



.image5-container {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    z-index: 1;
}

@media screen and (min-width: 1400px) {

    .table__cell.cell1,
    .table__cell.cell2,
    .table__cell.cell3 {
        background-size: 165px 165px;
    }

    .start_wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background: linear-gradient(to right,
                rgb(254, 205, 27) 0%,
                rgb(254, 205, 27) 50%,
                rgb(0, 158, 224) 50%,
                rgb(0, 158, 224) 100%);
    }

    body.awo-a11y .start_wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        background: linear-gradient(to right,
                rgb(255, 233, 179) 0%,
                rgb(255, 233, 179) 50%,
                rgb(173, 216, 230) 50%,
                rgb(173, 216, 230) 100%);
    }



    .image5-container {
        width: 165px;
        height: 165px;
    }
}

@media screen and (max-width: 1400px) {
    .image5-container {
        display: none;
    }
}

/* Mobile Styles */
@media screen and (max-width: 767px) {


    .start_table {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        padding: 0px;
        height: auto;
        aspect-ratio: auto;
    }

    .table__cell {
        flex: 0 1 30%;
        height: auto;
        padding: 10px;
        border-radius: 0px;
        text-align: center;
        transition: transform 0.3s all;
    }

    .table__cell .heading {
        font-size: 4vw;
        margin: 0 0 5px 0;
        width: 120%;
        overflow: hidden;
    }

    .start_table div.heading {
        width: 100%;
    }

    .table__cell .heading span {
        opacity: 1;
        display: block;
        font-size: 3vw;
    }

    .table__cell .mobile-image {
        width: 40px;
        height: 40px;
        margin: 5px auto;
        background-size: cover;
        background-position: center;
        border-radius: 0%;
    }

    .table__cell .text1 {
        font-size: 3vw;
        display: none;
        /* Hide text1 on mobile */
    }

    .table__cell:hover,
    .table__cell:focus,
    .table__cell.active {
        flex: 0 1 72%;
        transform: scale(1.1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .table__cell:hover .mobile-image,
    .table__cell:focus .mobile-image,
    .table__cell.active .mobile-image {
        width: 100%;
        height: 80px;
        margin: 5px auto;
        background-size: cover;
        background-position: center;
        border-radius: 0%;
        margin-left: 0;
        margin-bottom: -10px;
        background-repeat: no-repeat;
    }

    .table__cell:hover .heading,
    .table__cell:focus .heading,
    .table__cell.active .heading {
        font-size: 4vw;
    }

    .table__cell.active .text1 {
        display: none;
        /* Keep text1 hidden even when active on mobile */
    }

    .page-info {
        font-size: 3vw;
    }

    .image5-container {
        display: none;
        /* Hide background image on mobile devices */
    }
}