.gridHolder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999998;
    pointer-events: none;
}

.gridActivator {
    position: fixed;
    top: 10px;
    left: 10px;
    cursor: pointer;
    z-index: 2;
    pointer-events: initial;
    display: flex;
    align-items: center;
}

.gridMeasures {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    line-height: 16px;
    color: #000000;
    margin-left: 10px;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}

.showGrid .gridMeasures {
    opacity: 1;
}

.gridActivator svg {
    width: 20px;
    height: auto;
}

.gridWrapper {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    /*width: calc(100% - 280px);*/
    width: calc(100% - 72px);
    height: 100vh;
    z-index: 1;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
    display: flex;
    justify-content: space-between;
}


.showGrid .gridWrapper {
    opacity: 1;
}


.gridColumn {
    display: block;
}

.gridColumn {
    position: relative;
    background-color: rgba(0, 255, 255, 0.25);
    /*width: calc((100% - (9 * 16px)) / 12);  Teilt die Breite gleichmäßig auf 10 Spalten auf */
    width: calc((100% - (3 * 10px)) / 4); /* Teilt die Breite gleichmäßig auf 10 Spalten auf */
    display: block;
    margin: 0; /* Entfernt Abstand zwischen den Spalten */
    padding: 0; /* Sicherstellen, dass kein innerer Abstand vorhanden ist */
}

/* Entfernt den rechten Abstand für die letzte Spalte */
.gridColumn:last-child {
    margin-right: 0;
}


.gridColumn_text {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 10px;
    line-height: 16px;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    color: #000000;
}



.gridWrapper .gridColumn:nth-child(5) { display: none;}
.gridWrapper .gridColumn:nth-child(6) { display: none;}
.gridWrapper .gridColumn:nth-child(7) { display: none;}
.gridWrapper .gridColumn:nth-child(8) { display: none;}
.gridWrapper .gridColumn:nth-child(9) { display: none;}
.gridWrapper .gridColumn:nth-child(10) { display: none;}
.gridWrapper .gridColumn:nth-child(11) { display: none;}
.gridWrapper .gridColumn:nth-child(12) { display: none;}



@media (min-width: 992px) {
    .gridWrapper {
        width: calc(100% - 80px);
    }
    .gridColumn {
        width: calc((100% - (5 * 16px)) / 6);
    }
    .gridWrapper .gridColumn:nth-child(5) { display: block;}
    .gridWrapper .gridColumn:nth-child(6) { display: block;}
}

@media (min-width: 1200px) {
    .gridWrapper {
        width: calc(100% - 120px);
    }
    .gridColumn {
        width: calc((100% - (5 * 16px)) / 6);
    }
    .gridWrapper .gridColumn:nth-child(5) { display: block;}
    .gridWrapper .gridColumn:nth-child(6) { display: block;}
}


@media (min-width: 1920px) {

    .gridWrapper {
        width: calc(100% - 280px);
    }

    .gridColumn {
        width: calc((100% - (9 * 16px)) / 12);
    }

    .gridWrapper .gridColumn:nth-child(5) { display: block;}
    .gridWrapper .gridColumn:nth-child(6) { display: block;}
    .gridWrapper .gridColumn:nth-child(7) { display: block;}
    .gridWrapper .gridColumn:nth-child(8) { display: block;}
    .gridWrapper .gridColumn:nth-child(9) { display: block;}
    .gridWrapper .gridColumn:nth-child(10) { display: block;}
    .gridWrapper .gridColumn:nth-child(11) { display: block;}
    .gridWrapper .gridColumn:nth-child(12) { display: block;}


}

@media (min-width: 2200px) {

    .gridWrapper {
        width: calc(100% - 480px);
    }

    .gridColumn {
        width: calc((100% - (9 * 16px)) / 12);
    }




}