/* ========== HOME / BILD LINKS ========== */
.grid_21 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
margin-bottom:20px;
                 border:0px solid #00BF00;
}

.div21_2 { grid-area: 1 / 1 / 2 / 3; }
.div21_1 { grid-area: 1 / 3 / 2 / 4; }



.div21_2,
.div21_1 { border:0px solid #00BF00; }



@media all and (max-width: 1000px) {
         .grid_21 {
          grid-template-columns: 1fr 1fr 1fr;
         }

}



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

         .div21_2 { grid-area: 1 / 1 / 2 / 2; }
         .div21_1 { grid-area: 2 / 1 / 3 / 2;}

}



/* ========== HOME / BILD RECHTS ========== */
.grid_12 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
margin-bottom:20px;
                 border:0px solid #00BF00;
}

.div12_1 { grid-area: 1 / 1 / 2 / 2; }
.div12_2 { grid-area: 1 / 2 / 2 / 4; }



.div21_2,
.div21_1 { border:0px solid #00BF00; }



@media all and (max-width: 1000px) {
         .grid_12 {
          grid-template-columns: 1fr 1fr 1fr;
         }

}



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

         .div12_1 { grid-area: 1 / 1 / 2 / 2; }
         .div12_2 { grid-area: 2 / 1 / 3 / 2;}

}


/* ------------- HOME /  Textbreiten verkürzt ------ */
.shorter_21 { margin-left:0px;}
.shorter_12 { margin-left:0%}









/* --------------- HEADERBOXEN -------------------- */
.hbox {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.hbox1 { grid-area: 1 / 1 / 2 / 2; }
.hbox2 { grid-area: 1 / 2 / 2 / 3; }
.hbox3 { grid-area: 1 / 3 / 2 / 4; }
.hbox4 { grid-area: 1 / 4 / 2 / 5; }
.hbox5 { grid-area: 2 / 1 / 3 / 2; }
.hbox6 { grid-area: 2 / 2 / 3 / 3; }
.hbox7 { grid-area: 2 / 3 / 3 / 4; }
.hbox8 { grid-area: 2 / 4 / 3 / 5; }

.hbox1,.hbox2,.hbox3,.hbox4,.hbox5,.hbox6,.hbox7,
.hbox8 { border:3px solid #FFFFFF; padding: 0 10px 0 15px; background-color:#EFEFEF;}



@media all and (max-width: 1000px) {
         .hbox {
          grid-template-columns: 1fr 1fr 1fr;
         }

         .hbox1 { grid-area: 1 / 1 / 2 / 2; }
         .hbox2 { grid-area: 1 / 2 / 2 / 3; }
         .hbox3 { grid-area: 1 / 3 / 2 / 4; }
         .hbox4 { grid-area: 2 / 1 / 3 / 2; }
         .hbox5 { grid-area: 2 / 2 / 3 / 3; }
         .hbox6 { grid-area: 2 / 3 / 3 / 4; }
         .hbox7 { grid-area: 3 / 1 / 4 / 2; }
         .hbox8 { grid-area: 3 / 2 / 4 / 3; }

}


@media all and (max-width: 680px) {
         .hbox {
          grid-template-columns: 1fr 1fr;
         }

         .hbox1 { grid-area: 1 / 1 / 2 / 2; }
         .hbox2 { grid-area: 1 / 2 / 2 / 3; }
         .hbox3 { grid-area: 2 / 1 / 3 / 2; }
         .hbox4 { grid-area: 2 / 2 / 3 / 3; }
         .hbox5 { grid-area: 3 / 1 / 4 / 2; }
         .hbox6 { grid-area: 3 / 2 / 4 / 3; }
         .hbox7 { grid-area: 4 / 1 / 5 / 2; }
         .hbox8 { grid-area: 4 / 2 / 5 / 3; }

}




/* ----------------- PROFESSOREN ------------------ */
.profs {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.prof1 { grid-area: 1 / 1 / 2 / 2; }
.prof2 { grid-area: 1 / 2 / 2 / 3; }
.prof3 { grid-area: 1 / 3 / 2 / 4; }
.prof4 { grid-area: 1 / 4 / 2 / 5; }
.prof5 { grid-area: 1 / 5 / 2 / 6; }
.prof6 { grid-area: 2 / 1 / 3 / 2; }
.prof7 { grid-area: 2 / 2 / 3 / 3; }
.prof8 { grid-area: 2 / 3 / 3 / 4; }
.prof9 { grid-area: 2 / 4 / 3 / 5; }
.prof10 { grid-area: 2 / 5 / 3 / 6; }


.prof1,
.prof2,
.prof3,
.prof4,
.prof5,
.prof6,
.prof7,
.prof8,
.prof9,
.prof10 { background-color:#000000;  }




@media all and (max-width: 1000px) {
         .profs {
          grid-template-columns: 1fr 1fr 1fr;
         }

         .prof1 { grid-area: 1 / 1 / 2 / 2; }
         .prof2 { grid-area: 1 / 2 / 2 / 3; }
         .prof3 { grid-area: 1 / 3 / 2 / 4; }
         .prof4 { grid-area: 2 / 1 / 3 / 2; }
         .prof5 { grid-area: 2 / 2 / 3 / 3; }
         .prof6 { grid-area: 2 / 3 / 3 / 4; }
         .prof7 { grid-area: 2 / 1 / 4 / 2; }
         .prof8 { grid-area: 3 / 2 / 4 / 3; }
         .prof9 { grid-area: 3 / 3 / 4 / 4; }
         .prof10 { grid-area: 4 / 1 / 5 / 2; }

}


@media all and (max-width: 680px) {
         .profs {
          grid-template-columns: 1fr 1fr;
         }

         .prof1 { grid-area: 1 / 1 / 2 / 2; }
         .prof2 { grid-area: 1 / 2 / 2 / 3; }
         .prof3 { grid-area: 2 / 1 / 3 / 2; }
         .prof4 { grid-area: 2 / 2 / 3 / 3; }
         .prof5 { grid-area: 3 / 1 / 4 / 2; }
         .prof6 { grid-area: 3 / 2 / 4 / 3; }
         .prof7 { grid-area: 4 / 1 / 5 / 2; }
         .prof8 { grid-area: 4 / 2 / 5 / 3; }
         .prof9 { grid-area: 5 / 1 / 6 / 2; }
         .prof10 { grid-area: 5 / 2 / 6 / 3 ; }

}