.flex_row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.flex_row_stretch {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
}

.flex_row_center {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}


.right:is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch),
.reverse:is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch) {
    justify-content: flex-end;
}
.justify:is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch) {
    justify-content: center;
}

.spaceBetween:is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch) {
    justify-content: space-between;
}
.flex_gap:is(.flex_row, .flex_row_center, .flex_row_top, .flex_row_stretch, .flex_row_bottom) {
    gap: var(--paddingX);
}

.flex_gapSmall:is(.flex_row, .flex_row_center, .flex_row_top, .flex_row_stretch, .flex_row_bottom) {
    gap: var(--paddingXSmall);
}


.flex_row_top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: start
}

.flex_row_bottom {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: end;
}

    .vertical:is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch){
        flex-direction: column;
    }


.nowrap:is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch){
    flex-wrap: nowrap;
}

.flex_cell_450 {
    flex: 0 1 450px;
}

.flex_cell_400 {
    flex: 0 1 400px;
}

.flex_cell_350 {
    flex: 0 1 350px;
}

.flex_cell_300 {
    flex: 0 1 300px;
}

.flex_cell_250 {
    flex: 0 1 250px;
}

.flex_cell_150 {
    flex: 0 1 150px;
}

.flex_cell_100 {
    flex: 0 1 100px;
}

.flex_cell_50 {
    flex: 0 1 50px;
}


/* Flexbasis prinzipiell:*/
.flex_cell_quarter, .flex_cell_25p {
    --flexBasis: 24.999%;
}
.flex_cell_third, .flex_cell_33p {
    --flexBasis: 33.333%;
}
.flex_cell_twothird, .flex_cell_66p {
    --flexBasis: 66.6%;
}
.flex_cell_half, .flex_cell_50p {
    --flexBasis: 49.999%;
}
.flex_cell_threequarter, .flex_cell_75p {
    --flexBasis: 74.999%
}

/* Flex-Basis, wenn gap appliziert*/
/* Muss leider unschön alles mehrfach angegeben werden, weil properties sich bei Verschachtelung selber austricksen */
.flex_gap > *:is(.flex_cell_quarter, .flex_cell_25p) {
    --flexBasis: calc(24.999% - calc(var(--paddingX) * 0.75));
}
.flex_gap > *:is(.flex_cell_third, .flex_cell_33p) {
    --flexBasis: calc(33.333% - calc(var(--paddingX) * 0.67));
}
.flex_gap > *:is(.flex_cell_twothird, .flex_cell_66p) {
    --flexBasis: calc(66.6% - calc(var(--paddingX) * 0.33));
}
.flex_gap > *:is(.flex_cell_half, .flex_cell_50p) {
    --flexBasis: calc(49.999% - calc(var(--paddingX) * 0.5));
}
.flex_gap > *:is(.flex_cell_threequarter, .flex_cell_75p) {
    --flexBasis: calc(74.999% - calc(var(--paddingX) * 0.25));
}
.flex_gapSmall > *:is(.flex_cell_quarter, .flex_cell_25p) {
    --flexBasis: calc(24.999% - calc(var(--paddingXSmall) * 0.25));
}
.flex_gapSmall > *:is(.flex_cell_third, .flex_cell_33p) {
    --flexBasis: calc(33.333% - calc(var(--paddingXSmall) * 0.33));
}
.flex_gapSmall > *:is(.flex_cell_twothird, .flex_cell_66p) {
    --flexBasis: calc(66.6% - calc(var(--paddingXSmall) * 0.666));
}
.flex_gapSmall > *:is(.flex_cell_half, .flex_cell_50p) {
    --flexBasis: calc(49.999% - calc(var(--paddingXSmall) * 0.5));
}
.flex_gapSmall > *:is(.flex_cell_threequarter, .flex_cell_75p) {
    --flexBasis: calc(74.999% - calc(var(--paddingXSmall) * 0.75));
} 

*:is(.flex_cell_25p, .flex_cell_quarter, .flex_cell_33p, .flex_cell_third, .flex_cell_twothird, .flex_cell_66p, .flex_cell_50p, .flex_cell_half, .flex_cell_75p, .flex_cell_threequarter):is(.flex_row, .flex_row_center, .flex_row_bottom, .flex_row_top, .flex_row_stretch) {
    /* eine Flex-Cell, die selber auch wieder eine Flexrow darstellt */
    /* da muss gap vererbt sein, sonst Kuddelmuddel */
    
} 

*:is(.flex_cell_25p, .flex_cell_quarter, .flex_cell_33p, .flex_cell_third, .flex_cell_twothird, .flex_cell_66p, .flex_cell_50p, .flex_cell_half, .flex_cell_75p, .flex_cell_threequarter) {
    flex: 0 1 var(--flexBasis);
} 

/* bei Größen unter 800px stellen wir die flex-cells auf Grow - sie dürfen weiter wachsen als es ihre Flex-basis erlaubt*/
@media screen and (max-width: 800px) {
    *:is(.flex_cell_25p, .flex_cell_quarter, .flex_cell_33p, .flex_cell_third, .flex_cell_twothird, .flex_cell_66p, .flex_cell_50p, .flex_cell_half, .flex_cell_75p, .flex_cell_threequarter) {
        flex-grow:1;
    }
} 
/* bei noch kleineren Größen wird die flex-basis 100% - jedes Element nimmt volle Breite ein. */
@media screen and (max-width: 600px) {
    *:is(.flex_cell_25p, .flex_cell_quarter, .flex_cell_33p, .flex_cell_third, .flex_cell_twothird, .flex_cell_66p, .flex_cell_50p, .flex_cell_half, .flex_cell_75p, .flex_cell_threequarter) {
        flex-basis:100%;
    }
} 


  .flex_cell_rest {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis:0; /* ohne das schrumpfen manche nicht zurück ... */
}