.Ueberschrift {
  font-size: xx-large;
  text-align: center;
  text-decoration: underline;
  grid-column-start:2;
  grid-column-end: 5;
}

.P1 {
  width:300px;
  height:auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  
}

p {
  font-size: large;
}

li a {
  display: block;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  Line-height: 200px;
}

li a:hover {
  background-color: #555555;
  color: white;
}

.P2 {
  width: 50px;
  height: auto;
}

.P3 {
  width: 60px;
  height:auto;
}

.P4 {
  width: 350px;
  height: auto;
}

.MP1 {
  Width:150px;
  height:auto;
}

.MP2 {
  Width:130px;
  height:auto;
}

.PP1 {
  width: 100px;
  height: auto;
}

.T1, .T2, .T3, .T4, .MT1, .MT2, .MT3, .MT4, .WT1, .WT2, .WT3, .WT4, .WT5, .WT6, .PT1, .PT2, .PT3, .PT4 {
  margin: 5px;
  border:black;
  border-style: solid;
  border-radius: 5px;
  background-color: #bfb795;
  height: 100%;
}

.P2, .P3, .P4, .MP1, .MP2, .PP1 {
  border-style: solid;
  border-width: 2px;
  margin: 3px;
  position:relative;
}

.Container1 {
  display:grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr); 
  column-gap: 12px;
  row-gap: 12px;
  height: 100vh;
  align-items: center;
}

.NavigationBar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 5;
  height: 100%;
  background: linear-gradient(#f1f1f1, #f1f1f1);
}

.Container2 {
  display:grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr); 
  column-gap: 12px;
  row-gap: 12px;
  height: 100vh;
  align-items: center;
}

.NavigationBar2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 5;
  height: 100%;
  background: linear-gradient(#f1f1f1, #f1f1f1);
}


.Ueberschrift2 {
  grid-column-start:2;
  grid-column-end: 6;
}

.MT1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 2;
}

.MT2 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 2;
}

.MT3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 3;
}

.MT4 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 3;
}

.Container3 {
  display:grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr); 
  column-gap: 12px;
  row-gap: 12px;
  height: 100vh;
  align-items: center;
}

.NavigationBar3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 5;
  height: 100%;
  background: linear-gradient(#f1f1f1, #f1f1f1);
}


.Ueberschrift3 {
  grid-column-start:2;
  grid-column-end: 6;
}

.PT1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 2;
}

.PT2 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 2;
}

.PT4 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 3;
}

.PT3 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 3;
}

.Container4 {
  display:grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr); 
  column-gap: 12px;
  row-gap: 12px;
  height: 100vh;
  align-items: center;
}

.NavigationBar4 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 5;
  height: 100%;
  background: linear-gradient(#f1f1f1, #f1f1f1);
}

.Ueberschrift4 {
  grid-column-start:2;
  grid-column-end: 6;
}

.WT1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}

.WT2 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 3;
}

.WT3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

.WT4 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}

.WT5 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 4;
  grid-row-end: 5;
}

.WT6 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 4;
  grid-row-end: 5;
}

@media (max-width: 768px) {

.Container1, .Container2, .Container3, .Container4 {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  height: auto;
}

.NavigationBar, .NavigationBar2, .NavigationBar3, .NavigationBar4 {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.Ueberschrift, .Ueberschrift2, .Ueberschrift3, .Ueberschrift4 {
  grid-column: 1;
  text-align: center;
}

.T1, .T2, .T3, .T4, .MT1, .MT2, .MT3, .MT4, .WT1, .WT2, .WT3, .WT4, .WT5, .WT6, .PT1, .PT2, .PT3, .PT4 {
  grid-column: 1;
  grid-row: auto;
}

img {
  max-width: 100%;
  height: auto;
}
}