body {
  margin: 0px;
  background: #ffff99;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #6666cc;
}
  
header {
  margin-top: 20px;
  margin-bottom: 20px;
}
  
nav {
  position: sticky;
  top: 0px;
  font-weight: 800;
  backdrop-filter: blur(8px);

  /* Das ist dafür, dass die Navigation jederzeit anklickbar ist */
  z-index: 99;
}

footer {
  font-weight: 800;
  color: blue;
  text-decoration: none;
}
  
/* Das Titelbild hat eine Länge von 100% und eine Höhe von 240 Pixel */
#titelbild {
  width: 100%;
  height: 240px;
}
  
/* Das ist dafür, dass das Titelbild bei einer Länge von mindestens 800 Pixel eine Höhe von 320 Pixel hat */
@media screen and (min-width: 800px) {
  #titelbild {
    height: 320px;
  }
}

/* Das ist dafür, dass das Titelbild bei einer Länge von mindestens 1200 Pixel eine Höhe von 480 Pixel hat */
@media screen and (min-width: 1200px) {
  #titelbild {
    height: 480px;
  }
}
  
/* Das Img im Titelbild füllt den Bereich voll aus und ist immer mittig gecovert, Überhänge verschwinden */
#titelbild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.querformatfoto {
  display: flex;
  justify-content: center;
}

.querformatfoto img {
  width: 100%;
  max-width: 1200px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.hochformatfoto {
  display: flex;
  justify-content: center;
}

.hochformatfoto img {
  height: 400px;
}

@media screen and (min-width: 330px) {
  .hochformatfoto img {
    height: 500px;
  }
}

@media screen and (min-width: 400px) {
  .hochformatfoto img {
    height: 630px;
  }
}

.hochformatdia {
  display: flex;
  justify-content: center;
}

.hochformatdia img {
  height: 400px;
}

@media screen and (min-width: 380px) {
  .hochformatdia img {
    height: 500px;
  }
}

@media screen and (min-width: 468px) {
  .hochformatdia img {
    height: 630px;
  }
}

.querformatdia {
  display: flex;
  justify-content: center;
}

.querformatdia img {
  height: 150px;
}

@media screen and (min-width: 330px) {
  .querformatdia img {
    height: 200px;
  }
}

@media screen and (min-width: 500px) {
  .querformatdia img {
    height: 300px;
  }
}

@media screen and (min-width: 650px) {
  .querformatdia img {
    height: 400px;
  }
}

@media screen and (min-width: 800px) {
  .querformatdia img {
    height: 500px;
  }
}

@media screen and (min-width: 945px) {
  .querformatdia img {
    height: 600px;
  }
}

@media screen and (min-width: 1065px) {
  .querformatdia img {
    height: 680px;
  }
}

/* Die ungeordnete Liste im Footer und in der Navigation */
footer ul, nav ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
  
/* Die Listenpunkte in der ungeordnete Liste im Footer und in der Navigation */
footer ul li, nav ul li {
  padding: 10px;
}

footer ul a, nav ul a {
  color: blue;
  text-decoration: none;
}

/* Klasse Mitte für das flexible mittige Darstellen in der Horizontalen und in der Vertikalen */
.mitte {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Klasse Mitte für das flexible mittige Darstellen in der Horizontalen */
.mitte2 {
  display: flex;
  justify-content: center;
}

.deko {
  font-size: 18px;
  color: #0000ff;
  text-decoration: none;
  background-color: #ccccff;
  padding: 8px;
  border-radius: 8px;
}

.deko2 {
  font-size: 18px;
  color: #0000ff;
  text-decoration: none;
}

a:hover {
  color: red;
}

section {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
  
  /* Das ist dafür, dass die Überschrift nicht hinter dem verschwomennen Bereich ist */
  padding-top: 48px;
  transform: translateY(-48px);
}