svg {
  background: transparent;
  border: 0px dotted #3983ab;
  width: 75%;
  height: 350px;
  padding: 0;
  display: block;
  margin-left:auto;
  margin-right:auto;
  }
text {
  font-family:verdana;
  font-size: 18px;
}
#eins {
  fill: #c32e04;
  font-size: 32px;
  font-weight: bold;
  }
#zwei {
  fill: #FF8C00;
  stroke: #FF8C00;
  stroke-width: 3px;
  font-size: 96px;
  font-weight: bold;
  }
#drei {
  fill: #FF8C00;
  font-weight: bold;
  }

#hg {
   background:#FF8C00;
   }
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
nav li {
  list-style: none;
  margin: 0;
  padding: 0.5em;
  display: inline-block;
  color: #FFFF00;
}

nav a {
  display: inline-block;
  padding: 0.2em 10px;
  font-weight: bold;
  text-decoration: none;
  color: #FFFFFF;
}

nav ul a:hover,
nav ul a:active
nav li[aria-current] a:focus,
nav li[aria-current] a:hover   {
  color: #FFFF00;
  display: flex;

}
main {
  display: block;
  background: transparent;
  border-color: #8a9da8;
  font-weight: bold;
  color: #FFFFFF;
  min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */
}

section {
  background: #F1F3F4;
  border-color: slateblue;
}

article {
  background: #ffede0;
  border-color: #df6c20;
}
@media (min-width: 32em)  {        /* mehrspaltiges Layout für breitere Viewports */
  nav ul{
    flex-direction: row;
  }
  nav li {
    flex: 1;
    font-size: 1em;
  }
footer {

 padding: 10px;
 bottom:0;
 left: 0;
 right:0;
 background: transparent;
 border-color: #8a9da8;
}

footer p {
 float:right;
 margin: 0;
}

body {

          background-image: url(hgb2.jpg);
          background-attachment: fixed;
          background-size: cover;
          background-size:100% 100%;
          text: #000000;
          link: #FF0000;
          alink: #FF0000;
          vlink: #FF0000;

          }