* {font-family:TAHOMA,ARIAL,VERDANA,sans-serif;font-size:1em;}
h1 {font-size:1.2em;margin:0.0em 0 0.2em 0;}
h2 {font-size:1.1em;margin:0.3em 0 0.1em 0;}
h3 {font-size:1.05em;margin:0.2em 0 0.1em 0;}
h4 {font-size:1.0em;margin:0.1em 0 0.05em 0;}

@media screen {
html, body
{
  height: 100.1%;

}
  a[href^="mailto"]:before {
    content: "eMail: ";                       /* in utf: \00a  */ 
    }

  a[href$=".pdf"]:after {content: "\00a0"url(/fileadmin/pdf.png); }      /* pdf-Logo anzeigen */
  a[href^="http:"]:after {content: "\00a0\2197"; }                       /* Zeichen für ext. Link */

  body{
    background-image: url(../images/hg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-color: #FFFFFF;       /* falls die HG-Grafik nicht angezeigt wird */
    background-size: cover;          /* über den ganzen Monitor */
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  section {
    width: 980px;
    margin: 5px auto;
  }
  header , footer , article {
    background-color: rgba( 250 , 255 , 245 , 0.7 );   /* letzter Wert = Farbtransparenz */
    border: 1px solid rgba( 250 , 255 , 245 , 0.7 );   /* Rand um die Flächen */
    border-radius: 5px;                                /* abgerundeter Block */
  }
  article {
    margin: 10px 0;                                    /* Streifen zwischen den Blöcken */
  }
  header nav {
    float: left;
    width: 800px;
    margin-top: 20px;                                    /* hält 20 px Abstand nach oben im Kopf */
  }
  
  header img {                                         /* dadurch wird der Logo-Bereich zum Block */
    display: block;
    float: left;
  }
  
  nav ul , nav li {
    margin: 0;
    padding: 0;
    border: 0;
  }
  nav li {
    list-style-type: none;                             /* Aufzählung zählt für Navi nicht */
    display: inline-block;                             /* trennt die Navi-Blöcke */
    padding: 0 20px;                                   /* Trennung der Steuer-Elemente */
  }
  hr.clear {                                           /* hebt ein float auf für hr (hor. Linie)*/
    border: 0;
    width:  0;
    height: 0;
    clear: both;
  }
  footer {
    padding: 10px;                                      /* Abstand Text zum Rand im Fuss*/
  }
  footer > a {                                   /* Betrifft alle DIREKT folgenden footer-a-Elemente */
    display: block;
    float: left;
    width: 333px;
  }
  footer nav {                                         /* der linke Teil im Fuss */
    width: 350px;
    float: left;
    text-align: center;                                  /* Ausrichtung des Inhaltes */
  }
  footer div {                                         /* der rechte Teil im Fuss */
    width: 200px;
    float: right;
    text-align: right;                                   /* Ausrichtung des Inhaltes */
  }

  aside , main {                                         /* Mitte */
    padding: 10px;                                       /* Abstand global */ 
  }
  article > div {                                        /* gilt nur für dieses article */
    width: 779px;
    float: left;
  }
  
  main{
  float: right;
  width: 560px;
  /* background-color: #0000FF;       MITTLERE SÄULE IN BLAU*/
  }
   #left{
    width: 178px;
    float: right;
  /*   background-color: #FF0000;     LINKE SÄULE IN ROT*/
  }
  #right{
    width: 178px;
    float: left;
    font-size: .8em;
  /*   background-color: #008000;     RECHTE SÄULE IN GRÜN*/
  } 
    #right li, #right ul{
    padding: 0;
    border: 0;
    margin: 0;
    list-style-type: none;
    }
    #right li {
    margin: 10px 0;
    }
} /* screen */
@media screen and (min-width:1000px) {
  /* normal PC */
  .mini {display:none;}

} /* min-width:1000px */

@media screen and (min-width:491px) and (max-width:999px) {
  /* Tablett */

} /* min-width:491px and max-width:999px */

@media screen and (max-width:490px) {
  /* Smartphone */
  .maxi {display:none;}
  body{
    background-image: none;
  }
  aside , main , article > div{
    float: none;                                         /*  Float ausschalten */
    width: auto;                                         /* Breite auf 100 % (Auot) */
  }  
} /* max-width:490px */

@media print {
  /* Druckausgabe */
html, body
{
  height: 100%;

}
} /* print */