.grid {
    display: -ms-grid; /* für IE */
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    coloumn-gap: 30px;
    grid-gap: 30px;
    gap:30px
}

.nogap {
	grid-gap: 0;
}

.justify-items-center {
	justify-items: center;
}

.align-items-center {
	align-items: center;
}

.align-items-end {
	align-items: end;
}

                            .grid-12        { -ms-grid-columns: 1fr; grid-template-columns: 1fr; }
@media (min-width: 576px) { .grid-xs-12     { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } }
@media (min-width: 768px) { .grid-sm-12     { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } }
@media (min-width: 992px) { .grid-md-12     { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } }
.grid-12>*:nth-child(1),
.grid-xs-12>*:nth-child(1),
.grid-sm-12>*:nth-child(1),
.grid-md-12>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-align: left;
}
.grid-12>*:nth-child(2),
.grid-xs-12>*:nth-child(2),
.grid-sm-12>*:nth-child(2),
.grid-md-12>*:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-align: left;
}




.grid-1-11 { -ms-grid-columns: 1fr 11fr; grid-template-columns: 1fr 11fr; }

.grid-2-10 { -ms-grid-columns: 2fr 10fr; grid-template-columns: 2fr 10fr; }

.grid-3-9 { -ms-grid-columns: 3fr 9fr; grid-template-columns: 3fr 9fr; }

.grid-4-8 { -ms-grid-columns: 4fr 8fr; grid-template-columns: 4fr 8fr; }


.grid-5-7 { -ms-grid-columns: 5fr 7fr; grid-template-columns: 5fr 7fr; }




                            .grid-7-5       { -ms-grid-columns: 7fr 5fr; grid-template-columns: 7fr 5fr; }
@media (min-width: 992px) { .grid-md-7-5    { -ms-grid-columns: 7fr 5fr; grid-template-columns: 7fr 5fr; } }


                            .grid-6-6       { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; }
@media (min-width: 576px) { .grid-xs-6-6    { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .grid-sm-6-6    { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .grid-md-6-6    { -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; } }
.grid-6-6>*:nth-child(1),
.grid-xs-6-6>*:nth-child(1),
.grid-sm-6-6>*:nth-child(1),
.grid-md-6-6>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-align: left;
}
.grid-6-6>*:nth-child(2),
.grid-xs-6-6>*:nth-child(2),
.grid-sm-6-6>*:nth-child(2),
.grid-md-6-6>*:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: left;
}

                            .grid-8-4       { -ms-grid-columns: 8fr 4fr; grid-template-columns: 8fr 4fr; }
@media (min-width: 576px) { .grid-xs-8-4    { -ms-grid-columns: 8fr 4fr; grid-template-columns: 8fr 4fr; } }
@media (min-width: 768px) { .grid-sm-8-4    { -ms-grid-columns: 8fr 4fr; grid-template-columns: 8fr 4fr; } }
@media (min-width: 992px) { .grid-md-8-4    { -ms-grid-columns: 8fr 4fr; grid-template-columns: 8fr 4fr; } }
.grid-8-4>*:nth-child(1),
.grid-xs-8-4>*:nth-child(1),
.grid-sm-8-4>*:nth-child(1),
.grid-md-8-4>*:nth-child(1) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-align: left;
}
.grid-8-4>*:nth-child(2),
.grid-xs-8-4>*:nth-child(2),
.grid-sm-8-4>*:nth-child(2),
.grid-md-8-4>*:nth-child(2) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: left;
}





.grid-10-2 { grid-template-columns: calc(10 / 12 * 100%) calc(2 / 12 * 100%); }


                            .grid-4-4-4     { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; }
@media (min-width: 992px) { .grid-md-4-4-4  { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } }
.grid-4-4-4>*:nth-child(1),
.grid-xs-4-4-4>*:nth-child(1),
.grid-sm-4-4-4>*:nth-child(1),
.grid-md-4-4-4>*:nth-child(1) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-align: left;
}
.grid-4-4-4>*:nth-child(2),
.grid-xs-4-4-4>*:nth-child(2),
.grid-sm-4-4-4>*:nth-child(2),
.grid-md-4-4-4>*:nth-child(2) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: left;
}
.grid-4-4-4>*:nth-child(3),
.grid-xs-4-4-4>*:nth-child(3),
.grid-sm-4-4-4>*:nth-child(3),
.grid-md-4-4-4>*:nth-child(3) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-align: left;
}
/* dieser media query wird nur vom IE 10 und 11 ausgelesen */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .grid-4-4-4>*,
    .grid-xs-4-4-4>*,
    .grid-sm-4-4-4>*,
    .grid-md-4-4-4>* {
         margin-right: 30px;
    }
    .grid-4-4-4>*:nth-child(3n+3),
    .grid-xs-4-4-4>*:nth-child(3n+3),
    .grid-sm-4-4-4>*:nth-child(3n+3),
    .grid-md-4-4-4>*:nth-child(3n+3) {
        margin-right: 0px;
    }
 }





                            .grid-3-3-3-3       { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (min-width: 992px) { .grid-md-3-3-3-3    { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; } }


                            .grid-2-2-2-2-2-2       { -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
@media (min-width: 992px) { .grid-md-2-2-2-2-2-2    { -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; } }
.grid-2-2-2-2-2-2>*:nth-child(1),
.grid-xs-2-2-2-2-2-2>*:nth-child(1),
.grid-sm-2-2-2-2-2-2>*:nth-child(1),
.grid-md-2-2-2-2-2-2>*:nth-child(1) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-align: left;
}
.grid-2-2-2-2-2-2>*:nth-child(2),
.grid-xs-2-2-2-2-2-2>*:nth-child(2),
.grid-sm-2-2-2-2-2-2>*:nth-child(2),
.grid-md-2-2-2-2-2-2>*:nth-child(2) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: left;
}
.grid-2-2-2-2-2-2>*:nth-child(3),
.grid-xs-2-2-2-2-2-2>*:nth-child(3),
.grid-sm-2-2-2-2-2-2>*:nth-child(3),
.grid-md-2-2-2-2-2-2>*:nth-child(3) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-align: left;
}
.grid-2-2-2-2-2-2>*:nth-child(4),
.grid-xs-2-2-2-2-2-2>*:nth-child(4),
.grid-sm-2-2-2-2-2-2>*:nth-child(4),
.grid-md-2-2-2-2-2-2>*:nth-child(4) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 4;
    -ms-grid-column-align: left;
}
.grid-2-2-2-2-2-2>*:nth-child(5),
.grid-xs-2-2-2-2-2-2>*:nth-child(5),
.grid-sm-2-2-2-2-2-2>*:nth-child(5),
.grid-md-2-2-2-2-2-2>*:nth-child(5) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 5;
    -ms-grid-column-align: left;
}
.grid-2-2-2-2-2-2>*:nth-child(6),
.grid-xs-2-2-2-2-2-2>*:nth-child(6),
.grid-sm-2-2-2-2-2-2>*:nth-child(6),
.grid-md-2-2-2-2-2-2>*:nth-child(6) {
    display: block;
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-align: left;
}











/**/
.grid-item {
    align-self: normal;
}


/* ende eigenes grid-system */

.d-block {display:block;}
.d-none {display:none;}

@media (min-width: 576px) { .d-xs-block { display:block; } }
@media (min-width: 768px) { .d-sm-block { display:block; } }
@media (min-width: 992px) { .d-md-block { display:block; } }

@media (min-width: 576px) { .d-xs-none { display:none; } }
@media (min-width: 768px) { .d-sm-none { display:none; } }
@media (min-width: 992px) { .d-md-none { display:none; } }