* {    
	box-sizing: border-box;
}
html {
  background-color:white;
  color: black;
}
body {
  margin: 0 auto;
  padding: 1%; /* Ein wenig Abstand, damit der Anschein eines Blattes auf der Wand immer erhalten bleibt. */
  max-width: 80em; /*75em Eine Begrenzung der Breite auf höhstens 75em. Das machen wir um nicht zu lange Textbreiten zu erhalten, welche dann schlecht zu lesen sind. */
  font-family: verdana, arial, sans-serif ;
  font-size: 1.0em; /* 0.8em Ein Kompromiss über den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen im Browser selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
  border: 1px solid #aaa; /* Eine kleine optische Abgrenzung. */
  border-top: 0; /* Ganz oben allerdings würde es mit dem grauen Rand komisch aussehen, deshalb weg damit. */
  background: white;
}
.skip {
  position: absolute;
  margin-left: -999px;
}
header {  
  background-image: url("../img/taube130r.png");
  background-repeat: no-repeat;
  background-color: #08ade3;
  background-position-x: 15px;
  padding: 0 1em;
  text-align: right;
  font-size: 2em;
}
header a#logo1 {
  font-size: 2.5em;
  text-decoration: none;
  line-height: 80px;
  top: 0;
  left: 0;
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    	-webkit-text-stroke: 1px grey;
  background-image: linear-gradient( to right, red, orange, yellow, green, blue, indigo, violet);
}
header a#logo2 {
  color: white; 
  text-decoration: none;
  font-size: 0.65em; 
  line-height: 50px; 
}
a { color: #0B4D8C; text-decoration: underline; } 
a:visited { color: black; } 
a:focus {background-color: yellow;}
main {
  padding: 0 2%; 
  line-height: 1.5em;
}
section{display : inline-block;width:73%;}
aside {
  width: 25%; 
  float: right;
  clear:right;
  display : inline-block;
  padding: 0em 1% 1em;
  margin: 6em 1% 0 1%;
  border-left: 1px dotted #aaa; 
  font-size: 0.9em; 
}
aside dt {
  font-size: 1.2em;
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 1px dotted #aaa;
}
aside dd { 
  padding: 0;
  margin: 0.2em 0;
}
h1 { 
  font-size: 2.7em;
  font-weight: normal;
  line-height: 1.0em;
  padding: 0.6em 0 0.2em 2%;
  margin: 0;
  border-bottom: 1px dashed #E6E6FA;
}
h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4, h5, h6 { 
  color: #6699CC;
  font-family: Georgia, "Times New Roman", Times, serif;
}

/*DL, DT, DD Datenliste 50px? */
dl 	{ margin-bottom:20px;}
dl dt {	
    float:left;
    font-weight:bold;
    margin-right:5px;
    padding:5px; 
    width:50%;
}
dl dd {
    margin:2px 0;
    padding:2px 0;
}
img { /* Alle Bilder bekommen einen schönen Rahmen. */
  border: solid 1px #aaa;
  padding: 1px;
}
.fleft { 
  float: left;
  margin: 0 1em 0.2em 0; /* Man sollte einen schönen Abstand wählen, sonst kleben die Sachen so am Text. */
  width: 33%;
}
.fright {
  float: right;
  margin: 0 0em 0.2em 1em; 
  width: 28%
}
footer {
  clear: both; 
  padding: 2%;
  text-align:center;
  border-top: 1px dotted #aaa; 
}
footer .copy span {
	margin:0 auto;
	display:block;
}
nav ul {
  background: #08ade3;
  padding: 5px 5%; 
  margin: 0;
  text-align: right;
  color: yellow; 
}
nav ul li {
  font-size: 1.2em;
  display: inline; 
  list-style-type: none; 
  border-left: 1px solid white; 
  padding: 0 .5em 0 .5em;
  font-weight: bold;
}
nav ul li a {
  color: white; 
  padding:0.1em 1em;
  border-radius:0.2em;
  text-decoration: none;
}
nav ul li a:hover,
nav ul li a:focus {
	color:green;
	background:yellow;
	opacity:0.8;
}
@media only screen and (max-width: 600px) {
nav ul {
	display:block; 
	background:transparent;
	margin: 1em 0;
}
nav ul li{width:90%;margin: 5px 0;  }   /* Damit man auf SmartPhones navigieren kann, werden die Menüpunkte jetzt über 90% der Screen-Breite gezogen */
nav ul li.active{padding:0 2em; background:green; border-radius:10px;}
nav ul li a{display:inline-block;width:100%; color:white; background:green; margin:5px 0; border-radius:10px;text-align:center;}
nav ul li a:after{display:none;} 
section,
section.spalte, 
aside {
	float:none;
	display:block;
	width:100%;
}
.fleft,.fright {
	width:50%;
}
}
/* Tabellenformatierung */
table {
	border-collapse: separate;
	border-spacing: 0.2em;
	margin-left: 1em;
	box-shadow: 0 0 0.1em #666;
	position: relative;
	z-index: 1;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1.0em;
}

th,
td {
	padding: 0.2em 0.5em;
	border-radius: 0.1em;
}

thead th {
	background-color: #bef0ff;
	color: black;
}

td {
/*	font-style: italic; */
	text-align: left;
	box-shadow: inset 1px 3px 5px -3px rgba(0, 0, 0, 0.5);
}

tbody tr:nth-child(even) {
	background-color: #e4ebf2;
	color: #000;
}

td:empty {
	box-shadow: none;
	background-color: none;
}

th[scope=row] {
	color: #08ade3;
	text-align: center;
	background-color: #fff;
}
/*
caption {
	color: white;
	background: #08ade3;
	font-size: 1.2em;
	box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%);
	padding: 0.2em 0.2em 0.2em 2em;
	width: 10em;
	margin-left: -.6em;
	position: relative;
 	font-style: italic;
}

caption::before {
	content: "";
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	top: 1em;
	left: -0.6em;
	border-style: solid;
	border-width: 0.6em;
	border-color: transparent hsl(13, 96%, 35%) transparent transparent;
	z-index: -1;
}
*/
tbody tr:hover,
tfoot tr:hover {
	background-color: #fffbf0;
}

tbody td:hover,
tfoot td:hover {
	background-color: #fce4a2;
}
/*
em {
  text-indent: -2.5em;
  padding-left: 2.5em;
  text-align: left;
  margin: 0em 1em 1em 1.5em; 
}
*/