/* Gesamtbreite: 55em */
/* Block links:  40em (auch 10em + 30em) */
/* Block rechts: 15em */
 /*-------------------------------------------------------------------*/
*, *::before, *::after {
   box-sizing: border-box;
   }
.mittig {position: fixed;
         z-index: 9999;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
}
#sprache_knopf {
  font-size: 1.5em;
  width: 10em;
  color: #3b8fa8;
  background-color: #aaebff;
  margin: 1em;
  padding: 0.1em;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
#siezen_knopf {
  font-size: 1.5em;
  width: 10em;
  color: #3b8fa8;
  background-color: #aaebff;
  margin: 1em;
  padding: 0.1em;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
#klotz {
  width: 50%;
  align-self: flex-start;
}
#blassbild {
  width: 95%;
  margin: 1em;
}
 /*-------------------------------------------------------------------*/
li {
  margin-left: 2em;
}
ul.haken {
  list-style-type: none;
}
 /*-------------------------------------------------------------------*/
.times {
  font-family: "Times New Roman", Times, serif;
}
.helvetica {
  font-family: Arial, Helvetica, sans-serif;
}
.versal {
  font-size: 2em;
  font-weight: bold;
}
.listimage {
  float:left;
  width:1.5em;
}
.aus {
  display: none;
}
.blass {
  background-color: #f1f1f1;
}
.flex_titel {
  display: flex;
  flex-direction: row;
  width: 40em;
  align-items: center;
  justify-content: space-between;
}
.flex_horizontal {
  display: flex;
  flex-direction: row;
  width: 40em;
  align-items: center;
  justify-content: space-between;
}
.flex_vertikal {
  display: flex;
  flex-direction: column;
  width: 15em;
  align-items: center;
  justify-content: space-between;
}
.flex_horizontal_umgekehrt {
  display: flex;
  flex-direction: row-reverse;
  width: 40em;
  align-items: center;
  justify-content: space-between;
}
.siegel {
  width: 10em;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.qrcolor {
  width: 10em;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.relativ {
  position: relative;
  z-index: 2;
}
.titel {
  color: #3b8fa8;
  width: 30em;
  font-size: 2.5em;
  text-align: center;
}
.foto {
  width: 15em;
}
.masze {
  font-size: 1.5em;
  height: 1em;
  margin: 0em;
}
.absatz {
  width: 38em;
  margin: 1em;
}
.block {
  width: 29em;
  margin: 1em;
}
.links {
  width: 22em;
  margin: 1em;
}
.impressum_rechts {
  width: 30%;
  margin: 1em;
  font-style: italic;
}
.eingabeflaeche {
  width: 29em;
  margin: 0em;
  font-size: 2em;
}
.eingabefeld {
  margin: 0em;
  height: 1em;
  font-size: 1.5em;
}
.knopf {
  z-index: 2;
  color: black;
  width: 12em;
  background-color: #aaebff;
  margin: 1em;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.langknopf {
  z-index: 2;
  color: black;
  width: 40em;
  background-color: #aaebff;
  margin: 1em;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.zentralknopf {
  z-index: 2;
  color: black;
  width: 38.5em;
  background-color: #aaebff;
  margin: 0 auto;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.unknopf {
  color: gray;
  width: 12em;
  background-color: #aaebff;
  margin: 1em;
  padding: 1em;
  text-align: center;
}
.schalt {
  color: black;
  width: 5em;
  background-color: #aaebff;
  margin: 1em;
  padding: 1em;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.schwebesiegel {
  width: 25em;
  z-index: 1;
  background-color: white;
  margin: 1em;
  padding: 1em;
  position: absolute;
  top: 6em;
  left: 4em;
}
.schwebekasten {
  width: 20em;
  z-index: 1;
  background-color: white;
  margin: 1em;
  padding: 1em;
  position: absolute;
  top: 9.5em;
  right: 1em;
}
.schwebehinweis_rechts_oben {
  width: 30em;
  z-index: 3;
  background-color: white;
  margin: 1em;
  padding: 1em;
  position: fixed;
  top: 0em;
  right: 0em;
}
.schwebehinweis_rechts_unten {
  width: 30em;
  z-index: 3;
  background-color: white;
  margin: 1em;
  padding: 1em;
  position: fixed;
  bottom: 0em;
  right: 0em;
}
.schwebeimpressum {
  width: 12em;
  z-index: 1;
  background-color: white;
  margin: 1em;
  padding-left: 1em;
  position: absolute;
  top: -3em;
  left: 6.5em;
}
.matrix {
  display: grid;
  grid-template-columns: 11em 4em 2em;
}
.fehlermeldung {
  width: 38em;
  border-width: 0.5em;
  border-color: red;
  border-style: solid;
  padding: 0.5em;
  font-weight: bold;
}
.kopfmeldung {
  width: 28em;
  border-width: 0.5em;
  border-color: red;
  border-style: solid;
  padding: 0.5em;
  font-weight: bold;
}
#farbkasten {
  width: 10em;
  border-width: 0.5em;
  padding: 0.5em;
}
.copy {
  font-size: 1em;
}
.mittig {position: fixed;
         z-index: 9999;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
}
body {
  display: flex;
  justify-content: center;
}
.wrapper {
  width: 40em;
}
.rot {
  color: red;
}
iframe {
  width: 100%;
  max-width: 40em;
  height: 800px;
  border: none;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.popup {
    color: black;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 600px;
    text-align: left;
    background-color: white;
    box-sizing: border-box;
    padding: 10px;
    z-index: 100;
    display: none;
    /*to hide popup initially*/
}
h3 {
    text-align: center;
}