* {    
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}


/* -- Allgemeines -- */
html {
  color: black;
}

body {
  background: #8b8b83; 
  margin: 0 auto;
  padding: 2% 15% 2% 15%; /* Abstand Bildschirmrand -> Blatt auf der Wand. */
  font-family: verdana, arial, sans-serif ;
  font-size: 1em; /* Textgröße */
}

.skip { 
  position: absolute;
  margin-left: -999px;
  width: 990px;
}

/* - Kopfleiste - */
header {
  height: 130px;
  text-align: left;
  background-color: #cdcdc1;
  overflow: hidden;
  margin: 0; /* Einheitlich für alle Browser */
}

a {
  color: #0B4D8C; 
  text-decoration: underline; 
}
a:visited {
  color: #890fc2; 
} 

/* - Hauptfenster - */
main {
  background-color: #fffff0; 
  padding: 20px 20px 10px 20px; 
  line-height: 1.25em; /* Zeilenhöhe. */
  font-size: 0.9em;
  display: block;
}

h1, h2, h3, h4, h5, h6 { 
  color: #000000;
  font-family: Georgia, "Times New Roman", Times, serif;
}
h2, h3, h4 {
  font-weight: normal; 
}
h1 { /* Derzeit nicht eingesetzt */
  font-size: 2.7em;
  font-weight: normal;
  line-height: 0.8em;
  padding: 0.6em 0 0.2em 0;
  margin: 0;
}

h2 {
  font-size: 1.5em;
  line-height: 1.25em;
}

img { /* Bilderrahmen derzeit auf null, da unerwünscht. */
  border: solid 0px #aaa;
  padding: 1px;
}

table, th, td {
  border: 1px solid grey; 
}

table {
  border-spacing: 0;
}

th, td {
  padding: 4px;
}

.fleft { 
  float: left;
  margin: 0 1em 0.2em 0; 
  width:33%;
}
.fright {
  float: right;
  margin: 0 0 0.2em 1em;
  padding: 1px;
  width:33%
}


/* - Menü - */
nav ul {
  background: #a6a64e;
  padding: 5px 0 5px 0;
  margin: 0;
  text-align: center;
  color: #47470d; /* Menüpunkt aktive Seite, kein Link */
}
nav ul li {
  font-size: 0.9em;
  display: inline; /* Menü nebeneinander */
  list-style-type: none; /* Ohne Spiegelstriche */
  border-left: 1px solid white; /* Trennungsstrich zwischen Listenpunkten */
  font-weight: bold;
  padding: 0 10px 0 10px;
}
nav ul li a {
  color: #fffff0; /* Links auf andere Unterseiten */
  text-decoration: none;
}
nav ul li a:hover { 
  color: #a6a64e;
  background: #fffff0;
  opacity: 0.9;
  border-radius: 0.3em;
  padding: 2px 2px 2px 2px;
}
nav ul li a:visited { 
  color: #dadabe;
}


/* Einspaltenlayout */
@media only screen and (max-width: 750px) {
body {
 padding: 2% 5% 2% 5%;
}
nav ul {
 display:block; 
 background:transparent;	/*Hintergrund des Menüs wird durchsichtig. */
 margin: 1em 0;
}
nav ul li{ 
 width:90%; /* So groß für Navigation auf SmartPhones  */
 margin: 5px 0;  
 border-left: 0px;
}   
nav ul li.active{
 background:green; 
 border-radius:10px;
}
nav ul li a{
 display:inline-block;
 width:100%;
 color:white; 
 background:#a6a64e; 
 margin:5px 0; 
 border-radius:10px;
 text-align:center;
}
nav ul li a:after{
 display:none;
} 

section, /* kein Spalten-Layout mehr, alles wird untereinander dargestellt*/
section.spalte, 
aside {
 float:none;
 display:block;
 width:100%;
}


.fleft,.fright {		/*Damit die Bilder jetzt nicht zu klein werden, nehmen sie die halbe Breite des Bildschirms ein.*/
 width:50%;
}
}


/* Drucker */
@media print {
body {
 background: white;
 color: black;
 font-family: georgia, "Times New Roman", "Times serif"; /* Serifenschrift (Lesbarkeit) */
}
header {
 text-align: left;
 line-height: 0.8em;
 font-size: 3em;
 font-family: verdana, arial, sans-serif; /* Da das Logo ähnlich wie auf dem Bildschirm aussehen soll nehmen wir hier auch die gleiche Schriftart. */
 letter-spacing: -3px;
}
header a#logo {
 text-decoration: none; /* Hier lassen wir den Unterstrich weg. */
}
.skip, aside, nav { /* Wenn sich jemand eine Seite aus dem Internet ausdruckt dann will er mit hoher Wahrscheinlichkeit den Inhalt drucken und nicht das Menü oder sonstige Angaben, die für die Navigation auf dem Bildschirm gedacht sind. Deshalb lassen wir diese vom Papier verschwinden. Das spart auch viel Paphier und Tinte. */
 display: none;
}

.fright { /* Damit die Fließeigenschaften auch beim Drucken beachtet werden. */
 float: right;
 margin: 0 0 1em 1em;
}
.fleft {
 float: left;
 margin: 0 1em 1em 0;
}
}