/* ----------------------- Allgemein ----------------------- */

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

* {
	margin: 0;
	padding: 0;
}

html, body {
	font-family: 'Source Sans Pro', sans-serif;
	color: #000;
	font-size:0.75em;
	line-height:1.25em;
	font-weight:300;
	
	background: none;
	
	height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}

img {
	max-width:100%;
	height:auto;
	border:none;
}

strong {
	font-weight:600;
}

a:focus { 
   outline:none; 
}

a:link,
a:visited,
a:active {
	color: #000;
	text-decoration:underline;
}

a:hover {
	color: #6b85b8;
	-webkit-transition: color 0.25s;
	   -moz-transition: color 0.25s;
		 -o-transition: color 0.25s;
			transition: color 0.25s;
}

h1 {
	font-size:2.5em;
	line-height:1em;
	font-weight:200;
	margin:0 0 4% 0;
	text-align:left;
}

p {
	margin:0 0 0.5em 0;
}

h2 {
	font-family: 'Rufina', serif;
	color:#fff;
	font-size:2.5em;
	font-weight:700;
}

h3 {
	font-family: 'Rufina', serif;
	color:#fff;
	font-size:1em;
	line-height:1.25em;
	font-weight:700;
}

article {
	margin:0 0 5.5em 0;
	text-align:justify;
}

.liste {
	border-bottom:1px solid #000;
	margin:0 0 0.5em 0;
}

#galerie article.liste {
	width:30%;
	max-width:22em;
	margin:0 3% 2em 0;
	float:left;
}

.background {
	background-color:#000;}

.background img {
	width:100%;
}

a.galerie:link,
a.galerie:visited,
a.galerie:active {
	color: #000;
	text-decoration:none;
	
}

a.galerie:hover {
	-webkit-transition: color 0.25s;
	   -moz-transition: color 0.25s;
		 -o-transition: color 0.25s;
			transition: color 0.25s;
}

a.galerie:hover img {
	opacity: 0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity=50);
	-webkit-transition: opacity 0.25s;
	   -moz-transition: opacity 0.25s;
		 -o-transition: opacity 0.25s;
			transition: opacity 0.25s;
	
}

a.galerie p {
	margin:0.5em 0 0.5em 0;
}


/* *********************** Layout Spalten  *********************** */

#spalte-links {
	width:46%;
	max-width:29em;
	float:left;
	margin:0 3% 3em 6%;
}

#spalte-rechts {
	width:45%;
	float:right;
	overflow: hidden !important; /* FF Scroll-leiste */
	position:relative;
}

#spalte-alles {
	width:88%;
	float:left;
	margin:0 6% 3em 6%;
}

#spalte-1 {
	width:47%;
	float:left;
	margin:0 6% 4em 0;
}

#spalte-2 {
	width:47%;
	float:left;
	margin:0 0 4em 0;
}

.spalte-1 {
	width:47%;
	float:left;
	margin:0 6% 0 0;
}

.spalte-2 {
	width:47%;
	float:left;
}



/* ----------------------- Logo ----------------------- */

header {
	margin-top:60px;
}

header a img {
	width:150px;
}


/* ----------------------- Navigation ----------------------- */

nav#sprache {
	position:fixed;
	top:40px;
	right:0px;
	z-index:20;
	text-transform:uppercase;
}

nav#sprache h3 {
	display: inline;
}

div#spalte-alles nav#sprache {
	position:absolute;
	top:0.75em;
	right:0px;
	z-index:20;
	text-transform:uppercase;
}

nav#main {
	margin:3em 0 8em 0;
	text-transform:uppercase;
}

nav ul {
	list-style-type:none;
}

nav ul li {
	float:left;
	margin:0 5px 0 0;
}

nav ul li.last {
	float:left;
	margin:0 0 0 0;
}

nav a:link,
nav a:visited,
nav a:active {
	color: #6b85b8;
	text-decoration:none;
	font-size:1em;
	font-weight:400;
	padding:0.25em 0.25em 0.25em 0.25em;
	background-color:none;
}

nav#main li.sub:hover a{
	color:#000;
	background-color:#b3c1da;
	text-decoration:none;
	-webkit-transition: none;
	/*-webkit-transition: color 0.25s;
	   -moz-transition: color 0.25s;
		 -o-transition: color 0.25s;
			transition: color 0.25s;
			
	-webkit-transition: background-color 0.25s;
	   -moz-transition: background-color 0.25s;
		 -o-transition: background-color 0.25s;
			transition: background-color 0.25s;*/
}

nav#sprache a:hover,
nav#main li a:hover {
	text-decoration:underline;
}

a.aktiv {
	text-decoration:underline !important;
}

/* ----------------------- Subnavigation ----------------------- */

nav ul li ul {
	position:absolute;
	background-color:#b3c1da;
	padding:0.5em 0 0.5em 0;
	text-transform:none;
	font-size:0.95em;
	display:none;
}

nav#main li.sub:hover ul {
	display:block;
}


nav ul li ul li {
	clear:left;
}

nav ul li ul li a:link,
nav ul li ul li a:visited,
nav ul li ul li a:active {
	color: #000;
	text-decoration:none;
}

nav ul li ul li a:hover {
	text-decoration:underline !important;
}


/* ----------------------- Mobilenavigation ----------------------- */

.styled-select select {
	display:none;
}

/* ----------------------- Image ----------------------- */

figure#image {
	width: 300px;
	overflow:hidden;
	position:fixed;
	background-image:url(../bilder/image/joseph-f-achermann.png);
	background-repeat:no-repeat;
	background-size:auto 100%;
	z-index:10;
	margin-top: 100px;
}

aside {
	position:fixed;
	margin:0 0 0 5%;
	top:500px;
	z-index:30;
}

aside h2 {
	background-color:#cd0150;
	padding:0.5em;
	margin:0 0.75em 0.25em 0;
	white-space:nowrap;
}

aside h3 {
	background-color:#cd0150;
	padding:0.5em;
	margin:0 0 0 3em;
}


/* ----------------------- Kontakt ----------------------- */

form p {
	margin:0 0 1em 0;
}

input.feld {
	width:100%;
	height:2.5em;
	border:none;
	background-color:#dadceb;
	color:#000;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:1.25em;
	font-weight:400;
	outline:none;
	padding:0em 0.5em 0em 0.5em;
	margin:0.25em 0.25em 0 0;
	text-align:left;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	-webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
	vertical-align:middle;
}

input.feld:hover,
input.feld:focus {
	background-color:#6b85b8;
	color:#000;
	-webkit-transition: color 0.25s, background-color 0.25s;
	   -moz-transition: color 0.25s, background-color 0.25s;
		 -o-transition: color 0.25s, background-color 0.25s;
			transition: color 0.25s, background-color 0.25s;
}

textarea.feld {
	width:100%;
	height:5em;
	border:none;
	background-color:#dadceb;
	color:#000;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:1.25em;
	font-weight:400;
	outline:none;
	padding:0.5em 0.5em 0.5em 0.5em;
	margin:0.25em 0em 0 0;
	text-align:left;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	-webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
}

textarea.feld:hover,
textarea.feld:focus {
	background-color:#6b85b8;
	color:#000;
	-webkit-transition: color 0.25s, background-color 0.25s;
	   -moz-transition: color 0.25s, background-color 0.25s;
		 -o-transition: color 0.25s, background-color 0.25s;
			transition: color 0.25s, background-color 0.25s;
}



.submitbutton,
.button {
	width:auto;
	height:2.5em;
	margin:0.5em 0 0 0em;
	padding:0 1em 0 1em;
	border:none;
	background-color:#000;
	color:#c3c5db;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:1em;
	font-weight:800;
	vertical-align:middle;
	cursor:pointer;
	outline:none;
	-webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
	-webkit-border-radius:0px;
    -moz-border-radius:0px;
    border-radius:0px;
}

.submitbutton:hover,
.button:hover,
.upload .uploader .qq-uploader:hover,
.uploader .qq-upload-drop-area:hover {
	background-color:#000;
	color:#6b85b8;
	-webkit-transition: color 0.25s, background-color 0.25s;
	   -moz-transition: color 0.25s, background-color 0.25s;
		 -o-transition: color 0.25s, background-color 0.25s;
			transition: color 0.25s, background-color 0.25s;
}




input.error {
	background-color:#ffd0d0 !important;
	border:0px solid #700101 !important;
}

p.error {
	font-weight:400;
	color:#ff0000;
	background-color:#ffd0d0;
	width:100%;
	padding:0.525em;
}

p.erfolg {
	font-weight:400;
	color:#000;
	background-color:#dadceb;
	padding:0.525em;
	width:95%;
	font-size:2.25em;
	line-height:1.5em;
	font-weight:300;
}
.social_share {
	display: none;
}