body,html{
    background-color:#cecece;
}
.cp{
    cursor:pointer;
}
.bar{
    margin-bottom:40px;
    border:2px solid #999;

    height:80px;
    /* background-image: url("/img/bunteBar_reverse.jpg"); */
    background-size: 100%;
    border-radius:10px;
    overflow:hidden;
    
}
.barInside{
    background-color:#cecece;
    
    border:3p solid black;
    width:100%;
    height:100%;
    float:left;
    
    /* border-radius: 0px 10px 10px 0px; */
    
    /* -webkit-transition: width 5s ease-in-out; */
    /* -moz-transition: width 5s ease-in-out; */
    /* -o-transition: width 5s ease-in-out; */
    /* transition: width 5s ease-in-out; */
    transition: all 1.2s ease-in-out;
    /* margin-left:1px; */

}

.wrapper{
    padding:10px;
  
  
  
}



.schuleWrapper{
    padding:10px;
    background-color:#cecece;
    height:100%;
    overflow:hidden;
}

.green{
    background-color:#176d27;
}
.yellow{
    background-color:#f6f31a;
}
.orange1{
    background-color:#f6961a;
}
.orange2{
    background-color:#f6581a;
}
.red{
    background-color:#ff0000;;
}


.schuelerpic{
    margin-top:0px;
    height:80px;
    width:80px;
    border-radius:40px;
    cursor:pointer;


    

}



.grid2 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 1000px) {
  
  
    .wrapper{
      margin:auto;
      max-width:1000px;
    }
  
    .grid2 {
      grid-template-columns: 1fr 1fr ;
    }
  
    .grid2 .g1 {
      grid-column: span 1
    }
    .grid2 .g2 {
      grid-column: span 2
    }
    .grid2.g3 {
      grid-column: span 1
    }
    .grid2.g4 {
      grid-column: span 1
  
    }
  
  }
  
  /** MOBILE  */
  @media only screen and (max-width: 550px) {
  
  
    .wrapper{
      margin:15px;
      max-width:1000px;
    }
  
    .grid2  {
      grid-template-columns: 1fr;
    }
  
    .grid2 .g1 {
      grid-column: span 1
    }
    .grid2 .g2 {
      grid-column: span 1
      }
    .grid2.g3 {
      grid-column: span 1
    }
    .grid2.g4 {
      grid-column: span 1
  
    }
  }
  
  
  
  
  .grid3 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 551px)  {
  
  
  
    .grid3 {
      grid-template-columns: 1fr 1fr 1fr ;
    }
  
  
    .grid3 .g2 {
      grid-column: span 2
    }
    .grid3 .g3 {
      grid-column: span 3
    }
  }
  
  /** MOBILE  */
  @media only screen and (min-width: 351px) and (max-width: 550px) {
    .grid3 {
      grid-template-columns: 1fr 1fr;
    }
  
  
    .grid3 .g2 {
      grid-column: span 2
    }
    .grid3 .g3 {
      grid-column: span 2
    }
  }
  
  @media only screen and  (max-width: 350px) {
    .grid3 {
      grid-template-columns: 1fr
    }
  
  
    .grid3 .g2 {
      grid-column: span 1
    }
    .grid3 .g3 {
      grid-column: span 1
    }
  }
  
  
  
  
  
  
  
  .grid4 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  
  
    .grid4 .g2 {
      grid-column: span 2
    }
    .grid4 .g3 {
      grid-column: span 3
    }
    .grid4 .g4 {
      grid-column: span 4
    }
  }
  
  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid4 {
      grid-template-columns: 1fr 1fr;
    }
  
  
    .grid4 .g2 {
      grid-column: span 2
    }
    .grid4 .g3 {
      grid-column: span 2
    }
    .grid4 .g4 {
      grid-column: span 2
    }
  }
  
  
  .grid5 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid5 {
      grid-template-columns: 1fr 2fr 2fr 2fr 2fr ;
    }
  
  
    .grid5 .g2 {
      grid-column: span 2
    }
    .grid5 .g3 {
      grid-column: span 3
    }
    .grid5 .g4 {
      grid-column: span 4
    }
    .grid5 .g5 {
      grid-column: span 5
    }
  
  }
  
  // /** MOBILE  */
  // @media only screen and (max-width: 550px) {
  //   .grid5 {
  //     grid-template-columns: 1fr 1fr 1fr;
  //   }
  
  
  //   .grid5 .g2 {
  //     grid-column: span 2
  //   }
  //   .grid5 .g3 {
  //     grid-column: span 2
  //   }
  //   .grid5 .g4 {
  //     grid-column: span 2
  //   }
  //   .grid5 .g5 {
  //     grid-column: span 2
  //   }
  
  // }
  
  
  .grid6 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid6 {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  
  
    .grid6 .g2 {
      grid-column: span 2
    }
    .grid6 .g3 {
      grid-column: span 3
    }
    .grid6 .g4 {
      grid-column: span 4
    }
    .grid6 .g5 {
      grid-column: span 5
    }
    .grid6 .g6 {
      grid-column: span 6
    }
  }
  
  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid6 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
  
    .grid6 .g2 {
      grid-column: span 2
    }
    .grid6 .g3 {
      grid-column: span 2
    }
    .grid6 .g4 {
      grid-column: span 2
    }
    .grid6 .g5 {
      grid-column: span 2
    }
    .grid6 .g6 {
      grid-column: span 2
    }
  }
  
  
  
  
  .grid7 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid7 {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  
  
    .grid7 .g2 {
      grid-column: span 2
    }
    .grid7 .g3 {
      grid-column: span 3
    }
    .grid7 .g4 {
      grid-column: span 4
    }
    .grid7 .g5 {
      grid-column: span 5
    }
    .grid7 .g6 {
      grid-column: span 6
    }
    .grid7 .g7 {
      grid-column: span 7
    }
  }
  
  
  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid7 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  
  
    .grid7 .g2 {
      grid-column: span 2
    }
    .grid7 .g3 {
      grid-column: span 2
    }
    .grid7 .g4 {
      grid-column: span 2
    }
    .grid7 .g5 {
      grid-column: span 2
    }
    .grid7 .g6 {
      grid-column: span 2
    }
    .grid7 .g7 {
      grid-column: span 2
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .grid8 {
    display: grid;
    grid-gap: 1em;
  }
  
  
  /** DESKTOP */
  @media only screen and (min-width: 551px) {
    .grid8 {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }
  
  
    .grid8 .g2 {
      grid-column: span 2
    }
    .grid8 .g3 {
      grid-column: span 3
    }
    .grid8 .g4 {
      grid-column: span 4
    }
    .grid8 .g5 {
      grid-column: span 5
    }
    .grid8 .g6 {
      grid-column: span 6
    }
    .grid8 .g7 {
      grid-column: span 7
    }
  }
  
  
  /** MOBILE  */
  @media only screen and (max-width: 550px) {
    .grid8 {
      grid-template-columns: 1fr 1fr ;
    }
  
  
    .grid8 .g2 {
      grid-column: span 2
    }
    .grid8 .g3 {
      grid-column: span 2
    }
    .grid8 .g4 {
      grid-column: span 2
    }
    .grid8 .g5 {
      grid-column: span 2
    }
    .grid8 .g6 {
      grid-column: span 2
    }
    .grid8 .g7 {
      grid-column: span 2
    }
  }