html {
  	font-size: 16px; /* Basisgröße */
 	width: 100%;
	height: 100%;
}

body {
	font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
	font-size: 1.0rem;
	color: #222;
	background-color: #f9f9f9;
	margin: 2.0em;
}

img {
	border: 0;
}

h1, h2, h3, h4, h5  {
	font-family: "Century Gothic", "Segoe UI", "Candara", "Gill Sans", "Helvetica Neue", "Helvetica", "DejaVu Sans", "Arial", sans-serif;
	font-weight: 600;
	color: mediumblue;
	margin: 8px 0 8px 0;
	text-shadow: 2px 2px 2px #777;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {	font-size: 1.25rem;
}

.invers {
	padding: 3px 3px 3px 12px;
	color: white;
	background-color: mediumblue;
	border-radius:5px;
}

h4 {font-size: 1.0rem;
}

p {
	margin: 6px 0 6px 0;
}

nav#texte ul {
  list-style: none;
  padding: 0;
}

nav#texte li {
  margin: 0.5em 0;
}

a, a[data-load] {
  color: #0066cc;
  text-decoration: none;
}

a:hover, a[data-load]:hover, a:active, a[data-load]:active {
  text-decoration: underline;
}

a:visited, a[data-load]:visited {
  color: navy;
  text-decoration: underline;
}

aside {
	width:100%;
}

main {
  margin-top: 2em;
}

footer {
	height:3.0em;
	margin:2.0em 0 1.0em 0;
	padding-top:1.5em;
	background-color: #DDDDDD;
	border-top:3px solid mediumblue;
	border-bottom:3px solid mediumblue;
	border-radius:5px;
	}
	
#hinweis {
	padding: 10px;
	background-color: #f1f1f1; 
}

#textfeld {
  background-color: #f1f1f1;
  margin: 0;
  padding: 0 1.0em 0 1.0em;
  transition: opacity 0.3s ease;
  position: relative;
  left: -16px;
  border-radius:5px;
}

#textliste-scrollen {
	width:100%;
	height:505px;
	overflow-y:auto;
	padding:0.5em;
	border:2px solid silver;
	border-radius:5px;
	box-sizing: border-box;
}

#textliste-scrollen h1, #textliste-scrollen h2, #textliste-scrollen h3, #textliste-scrollen h4, #textliste-scrollen h5  {
	text-shadow: 2px 2px 2px #fff;
}


#rubriken {
	margin:3.0em 0 0.5em 0;
}

#rubriken ul li {
	list-style-type:none;
	display:inline-block;
	padding:2px 5px;
	margin: 0 5px 7px 0;
	box-shadow:2px 2px 2px #777;
	border-radius:3px;
	transition: box-shadow 0.3s ease;
}

#rubriken ul li:hover {
	box-shadow:0px 0px 4px #fff;
}

#rubriken ul li.eben {	
	box-shadow:0 0 0 #000;	
}

#logo {
	width: 320px; 
	}
	
#block-left {
	width:100%;
}

.gold {
	border: 2px solid gold;
	font-family: 'Century Gothic', 'Segoe UI', 'Candara', 'Gill Sans', 'Helvetica Neue', 'Helvetica', 'DejaVu Sans', 'Arial', sans-serif;
	font-size:0.9rem;
}

.red {
	border: 2px solid red;
	font-family: 'Century Gothic', 'Segoe UI', 'Candara', 'Gill Sans', 'Helvetica Neue', 'Helvetica', 'DejaVu Sans', 'Arial', sans-serif;
	font-size:0.9rem;
}

.red-blue {
	border-left: 2px solid red;
	border-top: 2px solid red;
	border-right: 2px solid blue;
	border-bottom: 2px solid blue;
}

.blue {
	border: 2px solid blue;
	font-size:0.9rem;
}

.eben {
	box-shadow:0;
}

.copy {
	font-size: 0.6rem;
	margin: 1.0em 0 1.0em 0;
}

.icon {
	width:20px;
	height: 25px;
	position:relative;
	top:5px;
}

.sans {
	 font-family: 'Century Gothic', 'Segoe UI', 'Candara', 'Gill Sans', 'Helvetica Neue', 'Helvetica', 'DejaVu Sans', 'Arial', sans-serif;
	 font-size: 0.9rem;
}

.serif {
	font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}

#textliste-scrollen h3.textschatten {
	text-shadow: 2px 2px 2px #777;
}

/* Randabstände für kleinere Bildschirme aufheben */
/*@media screen and (max-width: 1279px) {
body {	
	margin: 2.0em;
	}
}
*/
/* Das Logo bzw. aside in den Textfuss zwingen, um ungewolltes float zu vermeiden */
/*@media screen and (max-width: 1279px) and (min-width: 889px) {
  aside {
    float: none;
    width: 100%;*/
    /*margin: 2em 0 0 0;
    text-align: center;*/ /* optional, für zentriertes Logo */
 /* }*/

  /*footer {
    clear: both;*/ /* sicherstellen, dass Footer korrekt folgt */
  /*  width: 100%;
  }
}*/


/* Das Layout für größere Viewports fließen lassen und #textfeld nach oben holen - für kleinere Viewportbreiten bleibt es beim normalen Fluss des Inhalts */
@media screen and (min-width: 1249px) {

body {
	margin: 2.0em 14% 2.0em 20%;
}

#block-left {
	float:left;
	width:72%;
	padding-right:1.0em;
}

#textfeld {
	width:70%;
	padding:1.0em;
	margin-top:-4.0em;
	clear:both;
}

aside {
    float:right;
    width: 24%;
    margin-right: 1.0em;
    flex-shrink: 0;
  }

footer {
	clear: both;
	display: block;
	width:70%;
	height:3.0em;
	margin:2.0em 0 1.0em 0;
	padding:1.5em 2.0em 0 0;
	background-color: #DDDDDD;
	border-top:3px solid mediumblue;
	border-bottom:3px solid mediumblue;
	}
	
#logo {
	width: 98%; 
	}
	
}