@charset "utf-8";

#ue {font-size:2.0em; color:#b22222; font-family: 'New Century Schoolbook', sans-serif, serif;}
h1 {font-size:1.5em;}
h2 {font-size:1.2em;}
h3 {font-size:1.0em;}
h4 {font-size:0.8em;}

p {color:#000000;}
a {text-decoration: none;}
#rot {color:#b22222;}
#rotb {color:#b22222; font-weight: bold;}
#blau {color:#0000CD;}
#blaub {color:#0000CD; font-weight: bold;}
#seite {color: black; background: #ffff00; border-radius: 0.2rem; box-shadow: 0px 1px 2px #000000; padding: 2px;}

/* zentrieren eigenständig <mittig>*/
mittig {text-align: center;}
/* Zentrieren per id="" */
#mittig { text-align: center; }

body { display: flex; flex-flow: row wrap; font-size: 95%;
font-family: Arial, Helvetica, sans-serif;
margin: 0 auto; max-width: 73em; background: #d3d3d3;
background-image: url("hintergrund.webp"); }

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, article, section, aside, footer {
border-radius: 0.5em; border: 1px solid;
padding: 5px; margin: 2px; flex: 1 99%; 
word-break: normal; hyphens: auto; font-kerning: auto;
box-shadow: 0px 1px 3px #000; }

nav { position: sticky;	top: 1em; }
nav ul { list-style: none; margin-left: -2em; }
nav li { margin: 0.3em;	list-style: none; width: 12em }

ol li { left: 0; padding-left: 0; display: inline; list-style-type: none; background: #F1F3F4; font-size:0.8rem; color:#000000;}

header { background: #e4ebf2; border-color: #d5d5d5;
display: center; flex-flow: row wrap; text-align: center; }

header * { flex: 1 1 0%; }
header img { flex: 0 0 0%; width: auto; padding: 0em 0em 0em 0em; }

a img:hover { box-shadow: 0 0 10px #1e90ff; }
a { padding: 1px; padding-right: 0.2em; color: black;
	background: transparent no-repeat right; } 

/* Zeichen Interner Link bei hoover */
a:hover, a:focus { color: #fffafa; background: #1e90ff no-repeat right;
border-radius: 0.2rem; box-shadow: 0px 1px 2px #000000; }
a[href^="http"] { background: transparent no-repeat right; }

/* Zeichen Externer Link bei hoover */
a[href^="http"]:hover, a[href^="http"]:focus { background: #b22222 no-repeat right; }

section { background: #F1F3F4; border-color: #1e90ff; }

article { background: #F1F3F4; border-color: #d6d6d6; text-align: center; }
article figure { background: transparent; border-color: #d6d6d6; text-align: center; }
article img { border: 0; border-radius: 0.5em; align: center; box-shadow: 3px 3px 3px #a0a0a0; }

/ *a[href="#top"]::before { content: ' ⬆ '; color: #0000CD; } */

aside {	background: #e4ebf2; border-color: #d6d6d6; }
aside img{ border-radius: 0.5em; }

footer { background: #e4ebf2; border-color: #d6d6d6; display: flex; flex-flow: row wrap; } 
footer * { flex: 1 1 0%; justify-content: space-between; }
footer p { text-align: center; font-size:0.8em; color:#000000; }

address p {
	text-align: center;
    font-size:0.8rem; color:#000000;
}

/*  Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 20em) { 
header img { margin-right: 5px; }
article { order: 3; }
aside { flex: 1 auto; order: 2; } /* durch auto werden die beiden asides in eine Zeile gesetzt */		
footer { order: 5; } 
}

/* Large screens */
/* Der Article wird 2.5x so breit wie die beiden asides! */
@media all and (min-width: 50em) {	
article { order: 3; flex: 5 1 0%; }
aside { flex: 1.2 1 0%; }
}