.page {
  width: 100%;
  display: grid;
  grid-template-rows: 1% auto auto 5%;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "titel"
    "inhalt"
    "footer";
}

.titel {
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.bild {
  margin-top: 3%;
  width: 100%;
  border-radius: 25%;
}
img {
  /*width: 100%;  verkleinert das Element !!*/
  border-radius: 5%;
}
.text {
  margin-left: 0;
}

h1 h2 h3 {
  text-align: center;
  font: Roboto, sans-serif;
}
h1 {
  font-size: calc(40px + 2vw);
  line-height: calc(40px + 1.6vw);
}
h2 {
  font-size: calc(24px + 1vw);
  line-height: calc(24px + 1vw);
}
h3 {
  font-weight: normal;
  font-size: calc(12px + 0.5vw);
  line-height: calc(12px + 1.5vw);
}
p {
  text-align: justify;
  font: 16px Roboto, sans-serif;
  line-height: 25px;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
/* Media Queries
--------------------------------------------- */
/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  /*.flex-container {
    flex-direction: column;
  }
  inhalt {
    width: 96%;
    text-align: justify;
  }
  #logo img {
    width: 100%;
  }*/
  p {
    width: 90vw;
    text-align: justify;
    hyphens: auto;
    font: 18px Roboto, sans-serif;
    line-height: 30px;
  }
}
/*  ende @media  */

@media all and (max-width: 1400px) {
  body {
    width: 100%;
  }
  header {
    background-color: #e6e6e6;
    width: 100%;
  }
}