/* GRID Layout /////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
////////////////////// ///////////////////////////////////////////////////////////////////////////////////// */

.gridcontainer {
  width: 95%;
  display: grid;
  grid-template-columns: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% auto;
  hyphens: auto;
  margin-left: auto;
  margin-right: auto;
  /* muss im Echtbetrib weggelassen werden */
}

@media screen and (min-width: 993px) {
  .gbox1 {
    grid-row: 1;
    grid-column: 1/4;
    background: #c2bfcb;
    padding: 20px;
    color: #707070;
  }

  .gbox-hero {
    grid-row: 1;
    grid-column: 1/9;
  }

  .gbox1a {
    grid-row: 1;
    grid-column: 1/5;
    background: #e0e2ed; /* eventuell keine eigene Hintergrundfarbe */
    padding: 20px;
    color: #707070;
  }

  .gflex {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }

  .gflex1a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 20px;
  }

  .gflex p {
    font-size: calc(15px + (22 - 15) * ((100vw - 320px) / (2560 - 320)));
  }

  .gbox2 {
    grid-row: 1;
    grid-column: 4/9;
    /*
 background-image: url('../images/misc/klavier3a.jpg');
  background-size: contain;
    background-repeat: no-repeat;
	*/
    min-height: 40vh;
  }

  .gbox2a {
    margin-top: 50px;
    grid-row: 1;
    grid-column: 5/9;
    /*
 background-image: url('../images/misc/klavier3a.jpg');
  background-size: contain;
    background-repeat: no-repeat;
	*/
    min-height: 40vh;
  }

  /* GRID Layout Datenschutz /////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
////////////////////// ///////////////////////////////////////////////////////////////////////////////////// */
  .gbox3 {
    grid-row: 1;
    grid-column: 1/5;
    min-height: 40vh;
  }

  .gbox4 {
    grid-row: 1;
    grid-column: 5/9;
    /* background: #241c21;*/
    background: #c2bfcb;
    color: 707070;
    padding: 20px;
  }

  .gflex {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }

  .gflex p {
    font-size: calc(15px + (22 - 15) * ((100vw - 320px) / (2560 - 320)));
    color: #707070;
  }
}

@media screen and (max-width: 992px) {
  .gbox-hero {
    grid-row: 1;
    grid-column: 1/9;
  }

  .gbox2 {
    grid-row: 2;
    grid-column: 1/9;
    /*
 background-image: url('../images/misc/klavier3a.jpg');
  background-size: contain;
    background-repeat: no-repeat;
	*/
  }

  .gbox1 {
    grid-row: 1;
    grid-column: 1/9;
    background: #c2bfcb;
    padding: 20px;
  }

  .gbox1a {
    margin-top: 30px;
    grid-row: 1;
    grid-column: 1/9;
    background: #e0e2ed;
    padding: 20px;
    color: #707070;
  }

  .gbox2a {
    grid-row: 2;
    grid-column: 1/9;
    /*
 background-image: url('../images/misc/klavier3a.jpg');
  background-size: contain;
    background-repeat: no-repeat;
	*/
  }

  .gflex {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }

  .gflex1a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 0px;
  }

  .gflex p {
    font-size: calc(15px + (22 - 15) * ((100vw - 320px) / (2560 - 320)));
  }

  /* GRID Layout Datenschutz /////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////
////////////////////// ///////////////////////////////////////////////////////////////////////////////////// */

  .gbox3 {
    grid-row: 2;
    grid-column: 1/9;
  }

  .gbox4 {
    grid-row: 1;
    grid-column: 1/9;
    padding: 20px;
    background: #c2bfcb;
    color: #707070;
  }

  .gflex {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
  }

  .gflex p {
    font-size: calc(15px + (22 - 15) * ((100vw - 320px) / (2560 - 320)));
    color: #707070;
  }
}