@charset "utf-8";
/* CSS Document mühsam kreiiert von Sandra Barmettler */

* {
	margin: 0;
	padding: 0;
	}

html, body {
	height: 100%;
	}
	
body {
	width: 100%;
	background-color: #222222;
	}

div#container {
	width: 100%;
	min-height: 100%;
	margin: auto;
	position: relative;
	}	

div#outer {
	padding-top: 50px;
	}	

div.center {
	width: 80%;
	padding: 0 10% 100px 10%;
	margin: auto;
	position: relative;
	}

.inhalt {
	width: 60%;
	max-width:900px;
	min-width:700px;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.8);
	margin: auto;
	padding:2% 2% 8% 2%;
	}

.hintergrundbild {
	background-size: cover;
	}


/*==================== Zeichenformate ======================*/
h1 {
	font-family: 'Fira Sans', sans-serif;
	font-size:2em;
	color: #ffffff;
	letter-spacing:1px;
	margin-bottom:40px;
	}

h3 {
	font-family: 'Fira Sans', sans-serif;
	font-size:1,7em;
	color: #ffffff;
	letter-spacing:1px;
	margin-bottom:10px;
	}

p {
	font-family: 'Fira Sans', sans-serif;
	font-weight:300;
	font-size:1,1em;
	color: #ffffff;
	marin-bottom:20px;
	}

tr {
	font-family: 'Fira Sans', sans-serif;
	font-weight:300;
	color: #ffffff;
	margin-bottom:20px;
	}

a {
	font-family: 'Fira Sans', sans-serif;
	font-weight:700;
	font-size:1,1em;
	color: #666666;
	text-decoration:none;
	}

.Fliesstext {
	font-family: 'Fira Sans', sans-serif;
	font-weight:300;
	font-size:1,1em;
	color: #ffffff;
	margin-bottom:20px;
	}
/*===================== Zeichenformate ======================*/	


/*======================== Kacheln =========================*/
.kacheln {
	width: 30.333%;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.6);
	padding: 3%;
	margin: 1.5%;
	float: left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}

div.clear {
	clear: both;
	height: 0;
	line-height: 0;
	}

.homekachel {
	width: 8%;
	border-radius: 10px;
	margin-left: 10%;
	margin-bottom: 30px;
	float: right;
	}
	
.facebookkachel {
	width: 8%;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.6);
	margin-right: -8%;
	margin-left:10%;
	margin-bottom: 30px;
	float: right;
	}
/*======================== Kacheln =========================*/


/*====================== akkordeon =======================*/
#toggle-view {
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
	}

#toggle-view li {
	margin:2% 0% 2% 0%;
	border-bottom:2px solid #cccccc;
	position:relative;
	cursor:pointer;
	}

#toggle-view h3 {
	font-family: 'Fira Sans', sans-serif;
	font-size:1.3em;
	color: #ffffff;
	letter-spacing:1px;
	margin:0;
	}

#toggle-view span { /*plus resp minuszeichen*/
	font-family: 'Fira Sans', sans-serif;
	font-size:1.3em;
	position:absolute;
	right:5px; 
	top:0;
	color:#cccccc;
	}

#toggle-view .panel {
	margin:1% 5% 1% 0%;
	display:none;
	}

.Karten {
	width:30%;
	background-color:#ffffff;
	border-radius:10px;
	margin-right:2%;
	margin-bottom:2%;
	cursor:all-scroll;
	}

#toggle-view li.aufzaehlung {
	margin:1% 0% 0% 0%;
	border-bottom:none;
	cursor: text;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 300;
	font-size: 1,1em;
	color: #ffffff;
	margin-left:12px;
	list-style-type: square;
	list-style-position: outside;
	}

div.drachenkind {
	font-family: 'Fira Sans', sans-serif;
	font-weight: 300;
	font-size: 1,1em;
	color: #ffffff;
	margin-bottom: 10%;
	list-style-type: none;
	border-bottom: none;
	clear: left;
	margin: 10px 0;
	}
	
div.drachenbild {
	float:left;
	width: 20%;
	padding-right: 1%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}

div.drachenbeschrieb {
	float:left;
	width:80%;
	}
/*====================== akkordeon =======================*/


/*====================== php =======================*/
table { 
	width: 100%;
	}

.spalte1 {
	width:20%;
	}

.Eingabefeld {
	font-family: 'Fira Sans', sans-serif;
	font-weight:300;
	font-size:1em;
	width:100%;
	}

#Absender {
	font-family: 'Fira Sans', sans-serif;
	font-weight:300;
	float:right;
	font-weight:700;
	font-size:1em;
	padding:1%;
	}	

.tabelle {
	background-color: rgba(0,0,0,0.6);
	border-radius:10px;
	padding:1%;
	border:0; 
	cellspacing:1em;
	}

.klein {
	color: white;
	font-size: 0.75em;
	}
/*====================== php =======================*/


/*====================== betandra =======================*/
.Portraitbild {
	width:14%;
	margin-right:5%;
	float:left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}
/*====================== betandra =======================*/


@media screen and (max-width:1000px) {
div.center {
	padding-bottom: 250px;	
	}

.inhalt {
	padding-bottom: 350px;
	}

.kacheln {
	width: 46.999%;
	}

.facebookkachel {
	width: 16%;
	border-radius: 10px;
	margin-left: 10%;
	float: right;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}

.homekachel {
	width: 16%;
	border-radius: 10px;
	margin-left: 10%;
	float: right;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}

.facebookkachel {
	width: 16%;
	border-radius: 10px;
	margin-left: 10%;
	float: right;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}

.Portraitbild {
	width:40%;
	margin-right:6%;
	float:left;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	}
}


@media screen and (max-width:600px) {
.kacheln {
	width: 97%;
	float: none;
	}
}