/*Erkenntnisse: 
- Bei Webkit-Box muss das erste Element im Horizontalen eine definierte Breite bekommen!
- Bei Webkit-Box gibt es keinen wrap, also alle horizontal oder alles vertikal!
- Webkit-Box setzt "horizontal" nicht richtig um. Deshalb webkit-box-orient immer vertical!
- Der IE setzt Höhen bei vertikal nur richtig um, wenn "flex: 1 auto" angegeben ist (für ältere IE: -ms-flex...)!
- CSS-Kommentare nicht in <!--...--> fassen!
- Ohne "<meta name="viewport" content="width=device-width, initial-scale=1.0;" />" geht niX!
*/

@charset "utf-8";
/* CSS Document */
html {background-color: #FFD585C9;}
body {
	display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: vertical; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;
	justify-content: center; background-color:inherit; max-width:1100px;
}
/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

main {
    display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: vertical; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;
	background:inherit; justify-content: center;}
	
@media all and (min-width: 470px) {
	main {position: relative;
	-webkit-box-orient: horizontal; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap;}
	}
		
section.seiteninhalt {
	-webkit-box-flex: 2; -ms-flex: 2 auto; -webkit-flex: 2 auto; flex: 2 auto;
    display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: vertical; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap;
    -webkit-border-radius: 3px; border-radius: 3px;
	padding: 0px; margin: 0px; height: auto;
	background-color: inherit;
	overflow: hidden;}

@media all and (min-width: 470px) {
	section.seiteninhalt {
	-webkit-box-flex: 3; -ms-flex: 3 auto; -webkit-flex: 3 auto; flex: 3 auto;
	-webkit-box-orient: horizontal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap;}
	}
@media all and (min-width: 900px) {
	section.seiteninhalt {
	-webkit-box-flex: 4; -ms-flex: 4 auto; -webkit-flex: 4 auto; flex: 4 auto;}
	}
		
article {
	-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1; flex: 1 auto;
    -webkit-border-radius: 3px; border-radius: 3px; border: hidden;
	padding: 0px; padding-bottom: 5px; margin: 5px; height: auto;
	text-align: left; background-color:inherit;font-family: arial; font-size: 0.8em; color: #009;
	overflow: hidden; min-width: 230px; 
	-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
}
	
@media all and (min-width: 470px) {
    article {
	-webkit-box-flex: 2; -ms-flex: 2 auto; -webkit-flex: 2; flex: 2;}
    article.fliesstext {
	-webkit-box-flex: 3; -ms-flex: 3 auto; -webkit-flex: 3; flex: 3;
	}
}
/*
@media all and (min-width: 900px) {
    article.fliesstext {
	-webkit-box-flex: 4; -ms-flex: 4 auto; -webkit-flex: 4; flex: 4;}
}
*/
@media all and (min-width: 900px) {
	article {min-width: 260px;}
    article.fliesstext {
	-webkit-box-flex: 5; -ms-flex: 5 auto; -webkit-flex: 5; flex: 5;
	}
}

div {height: auto; margin: 0px; padding: 0px; text-align:center;}

div.bilderrahmen {
    display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
	-webkit-box-orient: vertical; -webkit-flex-flow: column nowrap; flex-flow: column nowrap;
	margin-bottom: 10px; height: auto;  -webkit-border-radius: 6px; border-radius: 6px; margin: 1px;
    -webkit-box-shadow: inset -1px -1px 2px inherit; box-shadow: inset -1px -1px 2px inherit;
	 background-color:#FFD585C9; position: relative; width: 96%; max-width: 320px; margin-left: auto; margin-right: auto;}
   @media all and (min-width: 1100px) {
    div.bilderrahmen {-webkit-box-orient: horizontal; -webkit-flex-flow: row wrap; flex-flow: row wrap;}
}
div.bilderrahmen a{background-color: inherit; margin: 0px; padding: 0px;
 -webkit-box-shadow: none; box-shadow: none;}
div.hintergrund {position: relative; width: 100%; height: auto; z-index: 1;}

p {font-family: arial; font-size: 1em; text-align:justify; height: auto; margin: 5px;}
p.warnung {width: 80%; background: #FF0; color: #C00;
    margin: 0px; margin-left: auto; margin-right: auto; text-align: center; padding-bottom: 5px;} 
p.bild {-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1 auto; flex: 1 auto; margin: 0px; margin-top: 5px; height: auto; text-align: center;}
	
p.left {text-align: justify; color: #030;}
p.right {text-align: justify; color: #030;}

@media all and (min-width: 900px) {
p.left {-webkit-box-flex: 2; -ms-flex: 2 auto; -webkit-flex: 2 auto; flex: 2 auto; width: 50%; text-align: left;}
p.right {-webkit-box-flex: 2; -ms-flex: 2 auto; -webkit-flex: 2 auto; flex: 2 auto; width: 50%; text-align: right;}
}

ul {margin-left:0.5em; padding-left:0.5em; margin-top: 3px;}
/* mal sehen, ob das irgendwo gebraucht wird:
div.bilderrahmen ul {
	-webkit-box-flex: 1; -ms-flex: 1 auto; -webkit-flex: 1 auto; flex: 1 auto;
    font-family: arial; font-size: 1em; text-align: left; height: auto;}
*/
img {margin-left: 5px; margin-right: 5px; max-width: 160px; width: auto;
    -webkit-border-radius: 6px; border-radius: 6px; border: hidden; color: #060;}	
	
@media all and (min-width: 900px) {
    img {margin-left: 10px; margin-right: 10px; max-width: 250px;}
}

img.grossbild {
	max-width: 100%; width: 95%; display: block; margin-left: auto; margin-right: auto;
}
/*
@media all and (min-width: 900px) {
	img.grossbild {margin-left: 5px; margin-right: 5px; max-width: 250px; height: 200px;}
}
*/
@media all and (min-width: 900px) {
	img.grossbild {margin-left: 5px; margin-right: 5px; min-height: 200px;}
}

h1 {margin: 10px;text-align: center; margin-top: 20px; font-family: arial; font-size: 1.2em; font-weight: normal;
-webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;
}
h2 {margin: 0px;font-family: arial; font-size: 1.1em; font-weight: normal; text-align: center; margin-top: 20px;
-webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;
}
@media all and (min-width: 470px) {
    h1 {font-size: 1.6em;}
	h2 {font-size: 1.3em;}
}

li {margin-bottom: 4px;}

section article div {text-align: center;}
section article a {
   color: inherit; background-color:#ff0; text-decoration: none;
   padding-left: 2px; padding-right: 2px;
   -webkit-box-shadow: inset -2px -2px 4px #444; box-shadow: inset -2px -2px 4px #444;
   -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none;}
section article a:hover {-webkit-box-shadow: inset 1px 1px 2px #444; box-shadow: inset 1px 1px 2px #444;}
section article p.bild a {background-color: inherit; margin: 0px; padding: 0px;
   -webkit-box-shadow: none; box-shadow: none;}
/*Vorige Zeile hinzugefügt, müsste eigentlich überall passen. Falls nicht, mit der nächsten Zeile beschränken auf die Bilderrahmenbilderlinks. Dann gibt's aber Probleme bei Rahmenlosen Bildern.
section article div.bilderrahmen p.bild a {background-color: inherit; margin: 0px; padding: 0px;
   -webkit-box-shadow: none; box-shadow: none;}
*/
section article td a {background-color: inherit; margin: 0px; padding: 0px;
   -webkit-box-shadow: none; box-shadow: none;}