/* ==== MS GRIDTYPES ==== */
/* ====================== */




/* ==== positionierung in boxen === */

.ctr {display: flex; align-items: center;}




/* ==== 2-SPALTIG ===================================================== */

/* =========== 2fr ======== */
.gridtype2fr {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;

}

.grd2fr_a50 { grid-area: 1 / 1 / 2 / 2; }
.grd2fr_b50 { grid-area: 1 / 2 / 2 / 3; }


@media all and (max-width: 800px) {
        .gridtype2fr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd2fr_a50 { grid-area: 1 / 1 / 2 / 2; }
        .grd2fr_b50 { grid-area: 2 / 1 / 3 / 2; }
}



/* =========== 2fr ======== */
.gridtype12 {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
border:0px solid #FF0000;
}

.grd12_a { grid-area: 1 / 1 / 2 / 2; }
.grd12_b { grid-area: 1 / 2 / 2 / 3; }


@media all and (max-width: 800px) {
        .gridtype12 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd12_a { grid-area: 1 / 1 / 2 / 2; }
        .grd12_b { grid-area: 2 / 1 / 3 / 2; }
}


.gridtype21 {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
border:0px solid #FF0000;
}

.grd21_a { grid-area: 1 / 1 / 2 / 2; }
.grd21_b { grid-area: 1 / 2 / 2 / 3; }


@media all and (max-width: 800px) {
        .gridtype21 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd21_a { grid-area: 1 / 1 / 2 / 2; }
        .grd21_b { grid-area: 2 / 1 / 3 / 2; }
}




/* =========== 2fr ======== */
.gridtype2575 {
display: grid;
grid-template-columns: 25% 75%;
grid-template-rows: auto;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd2575_a { grid-area: 1 / 1 / 2 / 2; }
.grd2575_b { grid-area: 1 / 2 / 2 / 3; }


@media all and (max-width: 800px) {
        .gridtype2575 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd2575_a { grid-area: 1 / 1 / 2 / 2; }
        .grd2575_b { grid-area: 2 / 1 / 3 / 2; }
}




/* =========== neben 75 + 25 %======== */
.gridtype7525 {
display: grid;
grid-template-columns: 75% 25%;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd7525_a { grid-area: 1 / 1 / 2 / 2; }
.grd7525_b { grid-area: 1 / 2 / 2 / 3; }












.gridtype22 {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-column-gap: 2%;
grid-row-gap: 0px;
}

.grd22_L1 { grid-area: 1 / 1 / 2 / 2; border:0px solid #FF3F00;}
.grd22_L2 { grid-area: 2 / 1 / 3 / 2; border:0px solid #FF3F00;}
.grd22_R1 { grid-area: 1 / 2 / 2 / 3; border:0px solid #FF3F00;}
.grd22_R2 { grid-area: 2 / 2 / 3 / 3; border:0px solid #FF3F00;}



@media all and (max-width: 800px) {
        .gridtype22 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd22_L1 { grid-area: 1 / 1 / 2 / 2; }
        .grd22_L2 { grid-area: 2 / 1 / 3 / 2; }
        .grd22_R1 { grid-area: 3 / 1 / 4 / 2; }
        .grd22_R2 { grid-area: 4 / 1 / 5 / 2; }
}

/* gridtype22 ohne resonsive-Umbruch */

.gridtype22_remain {
display: grid;
grid-template-columns: 49% 49%;
grid-template-rows: auto;
grid-column-gap: 2%;
grid-row-gap: 0px;
}

.grd22_L1_remain { grid-area: 1 / 1 / 2 / 2; border:0px solid #FF3F00;}
.grd22_L2_remain { grid-area: 2 / 1 / 3 / 2; border:0px solid #FF3F00;}
.grd22_R1_remain { grid-area: 1 / 2 / 2 / 3; border:0px solid #FF3F00;}
.grd22_R2_remain { grid-area: 2 / 2 / 3 / 3; border:0px solid #FF3F00;}






/* ==== 3-SPALTIG ===================================================== */

/* =========== 3fr einreihig ======= */
.gridtype3fr {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd3fr_a33 { grid-area: 1 / 1 / 2 / 2; }
.grd3fr_b33 { grid-area: 1 / 2 / 2 / 3; }
.grd3fr_c33 { grid-area: 1 / 3 / 2 / 4; }


@media all and (max-width: 800px) {
        .gridtype3fr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd3fr_a33 { grid-area: 1 / 1 / 2 / 2; }
        .grd3fr_b33 { grid-area: 2 / 1 / 3 / 2; }
        .grd3fr_c33 { grid-area: 3 / 1 / 4 / 2; }
}



/* =========== 3fr zweireihig ======= */
.gridtype3fr2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd3fr2_a33 { grid-area: 1 / 1 / 2 / 2; }
.grd3fr2_b33 { grid-area: 1 / 2 / 2 / 3; }
.grd3fr2_c33 { grid-area: 1 / 3 / 2 / 4; }
.grd3fr2_d33 { grid-area: 2 / 1 / 3 / 2; }
.grd3fr2_e33 { grid-area: 2 / 2 / 3 / 3; }
.grd3fr2_f33 { grid-area: 2 / 3 / 3 / 4; }


@media all and (max-width: 800px) {
        .gridtype3fr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd3fr2_a33 { grid-area: 1 / 1 / 2 / 4; }
        .grd3fr2_d33 { grid-area: 2 / 1 / 3 / 4; }
        .grd3fr2_b33 { grid-area: 3 / 1 / 4 / 4; }
        .grd3fr2_e33 { grid-area: 4 / 1 / 5 / 4; }
        .grd3fr2_c33 { grid-area: 5 / 1 / 6 / 4; }
        .grd3fr2_f33 { grid-area: 6 / 1 / 7 / 4; }
}




/* =========== 3fr mit Abstand======== */
.gridtype33 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 2%;
grid-row-gap: 0px;
}

.grd33_a { grid-area: 1 / 1 / 2 / 2; }
.grd33_b { grid-area: 1 / 2 / 2 / 3; }
.grd33_c { grid-area: 1 / 3 / 2 / 4; }


@media all and (max-width: 800px) {
        .gridtype33 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd33_a { grid-area: 1 / 1 / 2 / 2; }
        .grd33_b { grid-area: 2 / 1 / 3 / 2; }
        .grd33_c { grid-area: 3 / 1 / 4 / 2; }
}




/* =========== neben 33 + 66%  ======== */
.gridtype3366 {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd3366_33 { grid-area: 1 / 1 / 2 / 2; }
.grd3366_66 { grid-area: 1 / 2 / 2 / 3; }




/* =========== 2+2quads + 1vertikal-rechts ======== */
/* ABE
   CDE */
.gridtype4q1vr {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}

.grd4q1vr_a { grid-area: 1 / 1 / 2 / 2; }
.grd4q1vr_b { grid-area: 1 / 2 / 2 / 3; }
.grd4q1vr_c { grid-area: 2 / 1 / 3 / 2; }
.grd4q1vr_d { grid-area: 2 / 2 / 3 / 3; }
.grd4q1vr_e { grid-area: 1 / 3 / 3 / 4; }

@media all and (max-width: 800px) {
        .gridtype4q1vr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd4q1vr_a { grid-area: 1 / 1 / 2 / 2; }
        .grd4q1vr_b { grid-area: 2 / 1 / 3 / 2; }
        .grd4q1vr_c { grid-area: 4 / 1 / 5 / 2; }
        .grd4q1vr_d { grid-area: 5 / 1 / 6 / 2; }
        .grd4q1vr_e { grid-area: 3 / 1 / 4 / 2; }
}





/* ==== 4-SPALTIG ===================================================== */

/* =========== 4 neben > 1 responsive ======== */
.gridtype4fr {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
margin-bottom:-0px;
}

.grd4fr_a25 { grid-area: 1 / 1 / 2 / 2; }
.grd4fr_b25 { grid-area: 1 / 2 / 2 / 3; }
.grd4fr_c25 { grid-area: 1 / 3 / 2 / 4; }
.grd4fr_d25 { grid-area: 1 / 4 / 2 / 5; }


@media all and (max-width: 800px) {
        .gridtype4fr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd4fr_a25 { grid-area: 1 / 1 / 2 / 2; }
        .grd4fr_b25 { grid-area: 2 / 1 / 3 / 2; }
        .grd4fr_c25 { grid-area: 3 / 1 / 4 / 2; }
        .grd4fr_d25 { grid-area: 4 / 1 / 5 / 2; }
}





/* =========== 4 neben > 2 neben responsive ======== */
.gridtype4fr2 {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
margin-bottom:-0px;
}

.grd4fr2_a25 { grid-area: 1 / 1 / 2 / 2; }
.grd4fr2_b25 { grid-area: 1 / 2 / 2 / 3; }
.grd4fr2_c25 { grid-area: 1 / 3 / 2 / 4; }
.grd4fr2_d25 { grid-area: 1 / 4 / 2 / 5; }


@media all and (max-width: 800px) {
        .gridtype4fr2 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr);
        }

        .grd4fr2_a25 { grid-area: 1 / 1 / 2 / 2; }
        .grd4fr2_b25 { grid-area: 1 / 2 / 2 / 3; }
        .grd4fr2_c25 { grid-area: 2 / 1 / 3 / 2; }
        .grd4fr2_d25 { grid-area: 2 / 2 / 3 / 3; }
}







/* =========== 3fr mit Abstand======== */
.gridtype211 {
display: grid;
grid-template-columns: 50% 25% 25%;
grid-template-rows: auto;
grid-column-gap: 0;
grid-row-gap: 0px;
}

.grd211_a { grid-area: 1 / 1 / 2 / 2; }
.grd211_b { grid-area: 1 / 2 / 2 / 3; }
.grd211_c { grid-area: 1 / 3 / 2 / 4; }


@media all and (max-width: 800px) {
        .gridtype211 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd211_a { grid-area: 1 / 1 / 2 / 2; }
        .grd211_b { grid-area: 2 / 1 / 3 / 2; }
        .grd211_c { grid-area: 3 / 1 / 4 / 2; }
}








/* =========== 3 neben  25+25+50% ======== */
.gridtype252550 {
display: grid;
grid-template-columns: 25% 25% 50%;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd252550_a25 { grid-area: 1 / 1 / 2 / 2; }
.grd252550_b25 { grid-area: 1 / 2 / 2 / 3; }
.grd252550_c50 { grid-area: 1 / 3 / 2 / 4; }


@media all and (max-width: 800px) {
        .grdtype252550 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd252550_a25 { grid-area: 1 / 1 / 2 / 2; }
        .grd252550_b25 { grid-area: 2 / 1 / 3 / 2; }
        .grd252550_c50 { grid-area: 3 / 1 / 4 / 2; }
}









/* =========== 6 neben ======== */
.gridtype6fr {
display: grid;
grid-template-columns: repeat(6, 16.666%);
grid-template-rows: auto;
margin-bottom:-0px;
}

.grd6fr_a { grid-area: 1 / 1 / 2 / 2; }
.grd6fr_b { grid-area: 1 / 2 / 2 / 3; }
.grd6fr_c { grid-area: 1 / 3 / 2 / 4; }
.grd6fr_d { grid-area: 1 / 4 / 2 / 5; }
.grd6fr_e { grid-area: 1 / 5 / 2 / 6; }
.grd6fr_f { grid-area: 1 / 6 / 2 / 7; }


@media all and (max-width: 800px) {
        .gridtype6fr {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd6fr_a { grid-area: 1 / 1 / 2 / 2; }
        .grd6fr_b { grid-area: 2 / 1 / 3 / 2; }
        .grd6fr_c { grid-area: 3 / 1 / 4 / 2; }
        .grd6fr_d { grid-area: 4 / 1 / 5 / 2; }
        .grd6fr_e { grid-area: 5 / 1 / 6 / 2; }
        .grd6fr_f { grid-area: 6 / 1 / 7 / 2; }
}


.gridtype12111 {
display: grid;
grid-template-columns: repeat(6, 16.666%);
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.grd12111_a { grid-area: 1 / 1 / 2 / 2; }
.grd12111_b { grid-area: 1 / 2 / 2 / 4; }
.grd12111_d { grid-area: 1 / 4 / 2 / 5; }
.grd12111_e { grid-area: 1 / 5 / 2 / 6; }
.grd12111_f { grid-area: 1 / 6 / 2 / 7; }

@media all and (max-width: 800px) {
        .gridtype12111 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd12111_a { grid-area: 1 / 1 / 2 / 2; }
        .grd12111_b { grid-area: 2 / 1 / 3 / 2; }
        .grd12111_d { grid-area: 3 / 1 / 4 / 2; }
        .grd12111_e { grid-area: 4 / 1 / 5 / 2; }
        .grd12111_f { grid-area: 5 / 1 / 6 / 2; }
}



.gridtype11121 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
grid-template-rows: auto;
}

.grd11121_a { grid-area: 1 / 1 / 2 / 2; }
.grd11121_b { grid-area: 1 / 2 / 2 / 3; }
.grd11121_c { grid-area: 1 / 3 / 2 / 4; }
.grd11121_d { grid-area: 1 / 4 / 2 / 5; }
.grd11121_f { grid-area: 1 / 5 / 2 / 6; }

@media all and (max-width: 800px) {
        .gridtype11121 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd11121_a { grid-area: 1 / 1 / 2 / 2; }
        .grd11121_b { grid-area: 2 / 1 / 3 / 2; }
        .grd11121_c { grid-area: 3 / 1 / 4 / 2; }
        .grd11121_d { grid-area: 4 / 1 / 5 / 2; }
        .grd11121_f { grid-area: 5 / 1 / 6 / 2; }
}




.gridtype321 {
display: grid;
grid-template-columns: 3fr 2fr 1fr;
grid-template-rows: 1fr;
}

.grd321_a { grid-area: 1 / 1 / 2 / 2; }
.grd321_d { grid-area: 1 / 2 / 2 / 3; }
.grd321_f { grid-area: 1 / 3 / 2 / 4; }

@media all and (max-width: 800px) {
        .gridtype321 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        }

        .grd321_a { grid-area: 1 / 1 / 2 / 2; }
        .grd321_d { grid-area: 2 / 1 / 3 / 2; }
        .grd321_f { grid-area: 3 / 1 / 4 / 2; }
}




/*
.gridtype11222211 {
display: grid;
grid-template-columns: 1fr 1fr repeat(4, 2fr) 1fr 1fr;
grid-template-rows: auto;
}


.grd11222211_a1 { grid-area: 1 / 1 / 2 / 2; }
.grd11222211_a2 { grid-area: 1 / 2 / 2 / 3; }
.grd11222211_b { grid-area: 1 / 3 / 2 / 4; }
.grd11222211_c { grid-area: 1 / 4 / 2 / 5; }
.grd11222211_d { grid-area: 1 / 5 / 2 / 6; }
.grd11222211_e { grid-area: 1 / 6 / 2 / 7; }
.grd11222211_f1 { grid-area: 1 / 7 / 2 / 8; }
.grd11222211_f2 { grid-area: 1 / 8 / 2 / 9; }

.grd11222211_a1,
.grd11222211_a2,
.grd11222211_f1,
.grd11222211_f2 { background-color: #1F1F1F}

.grd11222211_a1:hover { background-image: linear-gradient(to left, #1F1F1F, #BFBFBF);}
.grd11222211_f2:hover { background-image: linear-gradient(to right,#1F1F1F ,#00FF00);}

@media all and (max-width: 800px) {
         .gridtype11222211 {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         grid-template-rows: auto;
         }

         .grd11222211_a1 { grid-area: 1 / 1 / 2 / 2; }
         .grd11222211_a2 { grid-area: 1 / 2 / 2 / 3; }
         .grd11222211_b { grid-area: 2 / 1 / 3 / 2; }
         .grd11222211_c { grid-area: 2 / 2 / 3 / 3; }
         .grd11222211_d { grid-area: 2 / 3 / 3 / 4; }
         .grd11222211_e { grid-area: 2 / 4 / 3 / 5; }
         .grd11222211_f1 { grid-area: 1 / 3 / 2 / 4; }
         .grd11222211_f2 { grid-area: 1 / 4 / 2 / 5; }

}

*/




/* =================== kopfbalken mit Ziffern =============================== */
.gridtype11222211 {
display: grid;
grid-template-columns: 1fr 1fr repeat(4, 2fr) 1fr 1fr;
grid-template-rows: auto;
background-color:#2F2F2F;
}


.goitem {
  align-self: center;
}

.gobog {
  display: flex;
  align-items: center;
  min-height:250px;
}


.grd11222211_a1 { grid-area: 1 / 1 / 2 / 2; }
.grd11222211_a2 { grid-area: 1 / 2 / 2 / 3; }
.grd11222211_b { grid-area: 1 / 3 / 2 / 4; }
.grd11222211_c { grid-area: 1 / 4 / 2 / 5; }
.grd11222211_d { grid-area: 1 / 5 / 2 / 7; }

.grd11222211_f1 { grid-area: 1 / 7 / 2 / 8; }
.grd11222211_f2 { grid-area: 1 / 8 / 2 / 9; }

.grd11222211_a1,
.grd11222211_a2,
.grd11222211_b,
.grd11222211_c,
.grd11222211_d,
.grd11222211_f1,
.grd11222211_f2 { background-color: #2F2F2F}


.grd11222211_f2:hover { background-image: linear-gradient(to right,#2F2F2F, #82899b, #FFFFFF);}

.grd11222211_a1:hover { background-image: linear-gradient(to left, #2F2F2F, #BFBFBF);
                         -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
                         }



@media all and (max-width: 800px) {
         .gridtype11222211 {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         grid-template-rows: auto;
         }

         .grd11222211_a1 { grid-area: 1 / 1 / 2 / 2; }
         .grd11222211_a2 { grid-area: 1 / 2 / 2 / 3; }
         .grd11222211_b { grid-area: 2 / 1 / 3 / 2; }
         .grd11222211_c { grid-area: 2 / 2 / 3 / 3; }
         .grd11222211_d { grid-area: 2 / 3 / 3 / 5; }

         .grd11222211_f1 { grid-area: 1 / 3 / 2 / 4; }
         .grd11222211_f2 { grid-area: 1 / 4 / 2 / 5; }


         .grd11222211_a1,
         .grd11222211_a2,
         .grd11222211_f1,
         .grd11222211_f2 { transform: scale(0); height:0px;}

         .gobog {min-height:0px;}

}