.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;
}

.flex_col {
    display: flex;
    flex-direction: column;
}

.justify_center {
    justify-content: center;
}

.justify_between {
    justify-content: space-between;
}

.justify_right {
    justify-content: flex-end;
}

.align_center {
    align-items: center;
}
.align_baseline {
    align-items: baseline;
}

.align_self_start {
    align-self: flex-start;
}


.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, .flex_col) {
    gap: var(--paddingX);
}

.flex_gapSmall:is(.flex_row, .flex_row_center, .flex_row_top, .flex_row_stretch, .flex_row_bottom,, .flex_col) {
    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 ... */
}

.flex_basis_1 {
    flex-basis: 1;
}

.flex_grow_1 {
    flex-grow: 1;
}
.flex_grow_09 {
    flex-grow: 0.9;
}
.flex_grow_08 {
    flex-grow: 0.8;
}
.flex_grow_07 {
    flex-grow: 0.7;
}
.flex_grow_06 {
    flex-grow: 0.6;
}
.flex_grow_05 {
    flex-grow: 0.5;
}
.flex_grow_04 {
    flex-grow: 0.4;
}
.flex_grow_03 {
    flex-grow: 0.3;
}
.flex_grow_02 {
    flex-grow: 0.2;
}
.flex_grow_01 {
    flex-grow: 0.1;
}

.gap_05 {
    gap: 0.5em;
}
.gap_1 {
    gap: 1em;
}
.gap_5 {
    gap: 5em;
}

.width_100 {
    width: 100%;
}
.width_90 {
    width: 90%;
}
.width_80 {
    width: 80%;
};
.width_70 {
    width: 70%;
}
.width_60 {
    width: 60%;
}
.width_50 {
    width: 50%;
}
.width_40 {
    width: 40%;
}
.width_30 {
    width: 30%;
}
.width_20 {
    width: 20%;
}
.width_10 {
    width: 10%;
}

.flex_wrap {
    flex-wrap: wrap;
}
.flex_nowrap {
    flex-wrap: nowrap;
}

.flex_basis {
    flex: 1 1 auto;
}

.flex_basis_70p {
    flex: 1 1 70%;
}

.flex_basis_10 {
    flex: 1 1 10em;
}