@font-face {font-family:FontAwesome;src:url(hilfsmittel/fontawesome-webfont.woff)}
* {font-family: Arial,Verdana,Helvetica,sans-serif; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
body { background-color:#BBBBBB; width: 100%; margin: 0px auto; margin-bottom: 40px; }
#hilfscontainer { margin:5px auto 50px; padding: 5px; max-width:979px; background-color:#DDDDDD; border-radius: 0.7em; }
#header { order: 10; padding: 0 }
#links {
	float: left;
	width: 100px;
	padding: 0px;
	order:30;
}
#nav {
	background-color:white;
	float: left;
	width: 105px;
	padding: 5px;
	font-size: 80%;
	border-radius: 0.7em;
	margin-top: 0px;
	text-align: center;
	}
#auto:before { content:"Mein Leben:"; }
#auto { font-weight: bold; }
#reise:before { content:"Reiseberichte:"; }
#reise { font-weight: bold; }
.verweis { float: left; width: 90px; padding: 5px; margin-top: 5px; }
.verweis a { display:block; height:100%; background:#FFFFFF; border-radius: 0.7em; text-align: center; text-decoration: none; }
.verweis a:link { color: #000000; }
.verweis a:visited { color: #888888; }
.verweis a:hover { background:#dddddd; font-weight: bold; }
#social {
	background-color:white;
	float: left;
	width: 105px;
	padding: 5px;
	font-size: 80%;
	border-radius: 0.7em;
	margin-top: 50px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	line-height: 50px;
	}
#social a { text-decoration: none; flex-basis: 40px; text-align: center; }
#social a:hover { background:#dddddd; font-weight: bold; border-radius: 0.7em; }
#teilen:before { content: "Teilen:"; }
#teilen { font-weight: bold; flex-basis: 100px; text-align: center; line-height: 30px;}
#facebook:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 24px;
	content: "\f09a";
	color: #3b5998;
	margin-left: 5px;
	line-height: 30px;
}
#google-plus:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 24px;
	content: "\f0d5";
	color: #d34836;
	line-height: 30px;
	flex-basis: 40px; 
}
#google-plus { padding-top: 2px; }
#twitter:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 28px;
	content: "\f099";
	color: #55acee;
	line-height: 30px;
	flex-basis: 40px; 
}
#linkedin:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 30px;
	content: "\f0e1";
	color: #55acee;
	line-height: 30px;
	flex-basis: 40px; 
}
#pinterest:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 30px;
	content: "\f0d2";
	color: #bd2126;
	line-height: 30px;
	flex-basis: 40px; 
}
#xing:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 30px;
	content: "\f168";
	color: #cfdc00;
	line-height: 30px;
	flex-basis: 40px; 
}
#kontakt:before { content: "Kontakt:"; }
#kontakt { font-weight: bold; flex-basis: 100px; text-align: center; line-height: 30px;}
#mail:before {
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
	font-size: 24px;
	content: "\f0e0";
	color: #999999;
	margin-right: 5px;
	line-height: 30px;
	flex-basis: 40px; 
}


#main {
	background-color:white;
	padding: 10px 65px;
	border-radius: 0.7em;
	display: block;
	order:20;
	margin: 0 120px;
	}
#rechts {
	float: right;
	padding: 5px;
	width: 100px;
	order:15;
	display: none;
	}
#nach_oben {
		position:fixed;
    	bottom:10px;
		right:20px;
		display: none;
		background-color: #ffffff;
		border-radius: 10px;
		padding: 5px;
		font-size: 30px;
		z-index: 200;
}
#nach_oben a:link { color: #999999; }
#nach_oben a:visited { color: #999999; }
h1 {
	font-size: 230%;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 10px;
	}
h2 {
	font-size: 130%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	}
h3 {
	font-size: 90%;
	font-weight: normal;
	text-align: center;
	margin-bottom: 10px;
	}
li {
	font-size: 110%;
	margin-bottom: 10px;
	text-align: justify;
	}
.tag {
	font-size: 110%;
	text-align: left;
	font-weight:bold;
	margin-top: 20px;
	margin-bottom: 10px;
	position: relative;
	}
.normal {
	font-size: 110%;
	margin-bottom: 10px;
	text-align: justify;
	position: relative;
	}
a.fussnote {
	vertical-align: super;
	font-size: 80%;	
	}
a.fussnote span {
	background-color:white;
	font-size: 12px;
	float: right; 
	width: 105px;
	margin: 25px -185px 0px 0px;
	padding: 5px;
	border-radius: 0.7em;
	position: relative;
	clear: right;
	text-align:justify;
	font-weight: normal;
	top: -60px;
	}
a.fussnote span:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	border-width: 7px;
	margin-left: -7px;
	border-color: #ffffff;
	border-radius: 0 0 14px 0;
}
bild {
	height: auto;
	font-size:80%;
	position: relative;
	z-index: 10;
}
bild.links {
	max-width:75%;
	float: left; 
	margin: 10px 10px 5px -50px;
	position: relative;
	}
bild.rechts {
	max-width:75%;
	float: right; 
	margin: 10px -50px 5px 10px;
	position: relative;
	}
bild.mitte {
	max-width:100%;
	float: none; 
	margin: 10px 0px 5px 0px;
	position: relative;
	}
#footer {
	background-color:white;
	font-size: 70%;
	margin: 5px 0px 0px;
	padding: 5px;
	border-radius: 0.7em;
	position: relative;
	clear: both;
	order:50;
	}
@media only screen and (max-width:800px) {
	#hilfscontainer {
		display: flex;
		flex-direction: column;
		}
	#nav {
    	width: auto;
		padding: 0px;
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
		}
	#links {
		float: left;
    	width: auto;
		}
	#social {
		width: 100%;
		margin-top: 5px;
		margin-bottom: 0px;
		padding: 0px;
		line-height: normal;
		}
	#teilen { flex-basis: 0px; display: none; }
	#facebook:before { font-size: 38px; }
	#facebook { padding: 20px 10px 0 10px; line-height: 50px;}
	#google-plus:before { font-size: 38px; margin-top: 50px;}
	#google-plus { padding: 20px 10px 0 10px; line-height: 50px;}
	#twitter:before { font-size: 48px; }
	#twitter { padding: 20px 10px 0 10px; line-height: 50px;}
	#linkedin:before { font-size: 48px; }
	#linkedin { padding: 16px 10px 0 10px; line-height: 50px;}
	#pinterest:before { font-size: 43px; }
	#pinterest { padding: 20px 10px 0 10px; line-height: 50px;}
	#xing:before { font-size: 43px; }
	#xing{ padding: 20px 10px 0 10px; line-height: 50px;}
	#kontakt { flex-basis: 0px; display: none; }
	#mail:before { font-size: 43px;}
	#mail { padding: 20px 10px 0 10px; line-height: 50px;}
	#nach_oben { display: block; }
	#rechts {
		display: block;
		background-color: #ffffff;
		border-radius: 0.7em;
		margin: 0px;
		text-align: right;
		padding: 0px;
		font-size: 70%;
		width: auto;
	}
	#main {
		margin: 5px 0px;
		padding: 10px 65px;
		border-radius: 0.7em;
		display: block;
		clear: left;
		}
	#footer { margin-top: 5px; }
	#auto { display: none; }
	#reise { display: none; }
	a.fussnote {
		vertical-align: super;
		font-size: 80%;	
		font-weight: normal;
		border-bottom: 1px;
		padding-bottom: 1px;
		border-bottom-color: #000000;
		border-bottom-style: dashed;
		z-index: 210;
		}
	a.fussnote span {
		display: block;
		position: absolute;
		border:1px solid #000000;
		width: 200px;
		height: auto;
		font-size: 13px;
		opacity: 0;
		-webkit-transition: opacity 5s cubic-bezier(1,0.01,0.77,0.77);
		-moz-transition: opacity 5s cubic-bezier(1,0.01,0.77,0.77);
		-o-transition: opacity 5s cubic-bezier(1,0.01,0.77,0.77);
		-ms-transition: opacity 5s cubic-bezier(1,0.01,0.77,0.77);
		transition: opacity 5s cubic-bezier(1,0.01,0.77,0.77),z-index 5s;
		z-index: -1;
		}
	a.fussnote:hover { cursor: pointer; }
	a.fussnote span:before {
		top: 100%;
		left: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		border-width: 8px;
		margin-left: -8px;
		border-color: #000000;
		border-radius: 0 0 16px 0;
	}
	a.fussnote:active span {
		opacity: 1;
		-webkit-transition: opacity 0s cubic-bezier(1,0.01,0.77,0.77);
		-moz-transition: opacity 0s cubic-bezier(1,0.01,0.77,0.77);
		-o-transition: opacity 0s cubic-bezier(1,0.01,0.77,0.77);
		-ms-transition: opacity 0s cubic-bezier(1,0.01,0.77,0.77);
		transition: opacity 0s cubic-bezier(1,0.01,0.77,0.77);
		z-index: 2000;
		}
	}
@media only screen and (max-width:600px) {
	bild.links { margin: 10px 10px 5px 0px; max-width:50%; }
	bild.rechts { margin: 10px 0px 5px 10px; max-width:50%;	}
	bild.mitte { margin: 10px 0px 5px 0px; }
	#main {	padding: 10px;}
}