body {display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: : auto auto auto auto;
grid-template-areas: "navi navi" "foto inhalt" "themen inhalt" "fuss fuss";}
.navi {grid-area: navi;}
.foto {grid-area: foto;}
.themen {grid-area: themen;}
.inhalt {grid-area: inhalt;}
.fuss {grid-area: fuss;}
.button {grid-area: themen;}}


/* ------------------------------------------------------------*/
/* ------------------------------------------------------------*/
/* -------------------------------------------------*/
nav {
  background-color: white;
  color: white;
}
.navi ul {
  max-width: 100%;
  margin: auto;
  padding: 0;
  background: #bbbbbb;
  list-style: none;
  border-radius: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.navi a {
  font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 1.5rem;
  text-decoration: none;
  color: #ffffff;
  line-height: 2rem;
  text-align: center;
  padding: 0.5rem;
  display: block;
  max-width: 100%;
}
.navi a:hover {
  color: #ffffff;
background-color: #111111;
}
nav a.aktuell {font-weight: bold; color: yellow;}
/* -------------------------------------------------------------------*/

.foto {margin-left: 0rem; margin-top: 0.2rem; background-color: white;font-family: "Helvetica Neue", Arial, sans-serif;
text-decoration: none;color: #ffffff; line-height: 1.2rem; }
img {max-width: 85%; height: auto; margin-left: 0rem; margin right: 1rem; padding: 1.6rem;}
.foto1 {font-family: "Helvetica neue", Arial, sans-serif;margin-left: 1.6rem; padding: 1.6rem;margin-top: 0rem;}
/* -------------------------------------------------------------------------- */

.themen {margin-top: 0.2rem; background-color: white;
  font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: left;  }
h1 {margin-left: 3.5rem; }
h2 {font-size: 1.2rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;
   text-align: left; margin-left: 2rem;}
h3 {margin-left: 1rem;font-size: 2rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;background-color: #hhhhhh;}
div {margin-left: 1rem; margin-top: 3rem; font-size: 2rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;background-color: #hhhhhh;}
.button {font: 60%/1.5 sans-serif; display: inline-block; text-align: center; vertical-align: middle; padding: 0.05rem 0.05rem; border-radius: 0.3rem; color: #333333;
  text-decoration: none; background-color: #dedede; margin: 0.01rem; transition: all 0.2s ease;}}
/* .button {font: 100%/1.5 sans-serif; display: inline-block; text-align: center; vertical-align: middle; padding: 0.4rem 0.8rem; border-radius: 0.3rem; color: #fff;
  text-decoration: none; background-color: #4c96e5; margin: 1rem; transition: all 0.2s ease;}} */
/* -------------------------------------------------------------------------- */
.inhalt {margin-top: 0.2rem; background-color: white; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;max-width: 63vw;}
h3 {margin-left: 0rem;font-size: 1.8rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;background-color: #hhhhhh;}
h4 {margin-left: 2rem;font-family: "Helvetica neue", Arial, sans-serif; font-size: 1.2rem; padding: 1.6rem;margin-top: 0rem;}
h5 {padding-left: 0.2rem; font-size: 1.2rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111 ;
      text-align: left; margin-left: 2rem;}
p {margin-left: 0rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111; font-size: 1.2rem;background-color: #hhhhhh;}
.foto2 {font-family: "Helvetica neue", Arial, sans-serif;font-size: 0.7rem; margin-left: 3rem; padding:0;margin-top: -2rem;}
.foto3 {margin-left: 0rem; margin-bottom: 0rem;}
ul {margin-left: 3rem;}
/* -------------------------------------------------------------------------- */
.fuss {background-color: #bbbbbb;font-size: 1.1rem; font-family: "Helvetica Neue", Arial, sans-serif; color: #111111;}