/* 1. Allgemeine Styles
=====================*/
* { padding: 0; margin: 0; }
html { 
  overflow-y: scroll;
  }
body {
  background: white;
  color: black;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 87.5%;
  }
html,body {
height:100%;
}


/* 2. Styles für die layoutbereiche
======================================*/  
header {
  display: flex;
  justify-content: center;
  background-color: white;
  height: 6.0em;
  }
@media screen and (max-width: 768px) {
  header {
  font-size: 80%;
  height: 3.0em;
  }
}
div#flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: white;
  gap: 1em;
  }
.frame {
  margin-right: 2px;
  width: 168px;
  height: 112px;
  border: 2px solid #ccc;
  background: white; 
  }
img#bild_1 {
  width: 100%;
  }
div#bild6 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: 1.0em;
  }
h1#headline1 {
  padding-top: 3.0em;
  padding-bottom: 0.0em;
  color: black;
  text-align: center;
  font-size: 90%;
  letter-spacing: 0.1em;
  font-weight: bold;
  }
 h1#headline2 {
  padding-top: 0.5em;
  padding-bottom: 1.0em;
  color: black;
  text-align: center;
  font-size: 90%;
  letter-spacing: 0.0em;
  font-weight: bold;
  }
#headline1 span, #headline2 span
  { 
  color: red; 
  }
footer {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background-color: white;
  height: auto;
  padding-top: 0.0em;
  font-size: 100%;
  letter-spacing: 0.1em;
  word-spacing: 0.2em;
  line-height: 1.5em;
  font-weight: bold;
  text-align: center;
  padding-right: 2.0em;
  padding-left: 2.0em;  
  }
@media screen and (max-width: 768px) {
  footer {
  font-size: 80%;
  height: 11.0em;
  padding-top: 1.5em;
  }
}
footer a {
  color: black;
  border: 0px;
  }
footer a:hover,
footer a:focus,
footer a:visited {
  color: white;
  }
a { 
  text-decoration: none;
  outline: none;
  }