@charset "UTF-8";
/* CSS Document */

/* ----------------- Allgemein --------------------- */
*{ /* damit das Padding auch auf Firefox funktioniert*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
html {
	overflow-y: scroll;
}
body {
	width: 100%;
	height: 100%;
	margin: 0em;
	padding: 0em;
}
img {
	max-width: 100%; /* Bilder sollen verkleinert werden wenn sie zu wenig Platz haben */
	height: auto;
	border: 0;
}

/* ----------------- Hauptfenster für kleine Screens --------------------- */
#ausrichten {
	width:100%;
	height:auto;
	float:left;
	box-shadow: 1px 2px 12px #737373; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
	-webkit-box-shadow: 1px 2px 12px #737373; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 1px 2px 12px #737373; /* Firefox 3.5 - 3.6 */
}

#ausrichten #kopf {
	width:100%;
	height:auto;
	overflow:hidden;
	background-color:#e4e4e4;
	float:left;
}

#ausrichten #kopf #logo {
	width:200px;
	height:auto;
	padding:0.2em 0.2em 0.2em 1em;
	float:left;
}
#ausrichten section 
{
	width:100%;
	height:auto;
	background-color:#FFFFFF;
	float:left;
}
#ausrichten footer {
	width:100%;
	height:auto;
	padding:2em;
	background-color:#e4e4e4;
	font-size:1em;
	color:#4b2857;
	float:left;
}

/* ----------------- Menu oben --------------------- */
nav {
	display:block; /* Setting für Mobilansicht */
	height:auto; /* Setting für Mobilansicht */
}
nav ul {
	font-size:1.1em;
	margin:0em;
	padding:0em;
}
nav li {
	list-style:none;
	display:inline-block;
	margin-right:1em;
}
nav a {
	color:#4b2857;
	text-decoration:none;
	font-weight: bold;
}
nav a:hover {
	color:#9360a1;
}
nav li.current a {
	color:#9360a1;
}

/* ----------------- Menu unten (footer) --------------------- */
footer ul {
	float:right;
	margin: 0em;
	padding: 0em;
}
footer li {
	list-style:none;
	display:inline-block;
	margin-right:1em;
}
footer a {
	color:#4b2857;
	text-decoration:none;
	font-weight: bold;
}
footer a:hover {
	color:#9360a1;
}
footer li.current a {
	color:#9360a1;
}

/* ----------------- Text unten (footer) --------------------- */
footer .custom {
	float: left;
}
footer .custom div {
	display:none; /* Für Mobilversion ausblenden */
}

/* ----------------- Beitrag (Section) --------------------- */
section figure.item-image { /* Beitragsbild */
	width:100%; /* in Breite anpassen */
	float:left;
	margin:0em;
}
section figure.item-image img { /* Beitragsbild */
    width: 100%;
    height: auto;
}
section div.page-header { /* Beitragstitel */
	margin-top:-3em; /* Titel über Bild positionieren, so dass in Mobilansicht nur 1 Zeile passt (!) */
	padding:0em 0em 0em 2em;
	float:left;
}
section div.com-content-article__body,
section div.gbs3 /* Formular abgesendet. TODO: Noch aktuell oder hat sich das seit Chronoforms7 verändert? */
{
	width:100%; /* Beitragstext in Mobilansicht volle Breite */
	padding:1em 2em 1em 2em;
	float:left;
}

/* ----------------- Mobilnavigation mit Ein- Ausklappfunktion --------------------- */
/* Aktivierung in index.php per javascript bei 900px */
a.meanmenu-reveal { /* hide the link until viewport size is reached */
	display: none;
}
.mean-container .mean-bar { /* when under viewport size, .mean-container is added to body */
	float: left;
	width: 100%;
	position: absolute;
	top:0em; /* position Navi */
	padding: 2px 0;
	min-height: 2em;
	z-index: 999999;
}
.mean-container a.meanmenu-reveal {
	width: 22px;
	height: 15px;
	padding: 7px 7px 7px 7px;
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	color:#4b2857; /* Farbe des Schliesskreuzes */
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 22px;
	font-size: 1px;
	display: block;
	font-weight: 700;
}
.mean-container a.meanmenu-reveal span { /* Menu Button */
	display: block;
	background: #4b2857; /* Farbe der 3 Öffnen-Linien */
	height: 3px;
	margin-top: 3px;
}
.mean-container .mean-nav { /* Hintergrund Navi */
	float: left;
	width: 100%;
	background:#CCC;
	margin-top: 5em; /* Höhe des Navibalkens */
}
.mean-container .mean-nav ul { /* Ausrichtung ul */
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
}
.mean-container .mean-nav ul li { /* Ausrichtung Plusquadrate */
	position: relative;
	float: left;
	width: 100%;
}
.mean-container .mean-nav ul li a { /* Styling Links komplett */
	display: block;
	float: left;
	width: 90%;
	padding: 1em 5%;
	margin: 0;
	text-align: left;
	color: #4b2857;
	border-top: 1px solid #fff; /* Farbe der Linien */
	text-decoration: none;
	/*text-transform: uppercase;*/
}
.mean-container .mean-nav ul li.current a { /* Current link */
	color:#9360a1;
}
.mean-container .mean-nav ul li li a { /* Styling sub nav */
	width: 80%;
	padding: 1em 10%;
	color:#FFFFFF;
	border-top: 1px solid #f1f1f1;
	background-color:#9360a1;
	text-shadow: none !important;
	visibility: visible;
}
.mean-container .mean-nav ul li.mean-last a { /* Styling letztes (unterstes) Element */
	border-bottom: none;
	margin-bottom: 0;
}
.mean-container .mean-nav ul li li li a { /* Weitere Unternavigationen wenn noetig */
	width: 70%;
	padding: 1em 15%;
}
.mean-container .mean-nav ul li li li li a {
	width: 60%;
	padding: 1em 20%;
}
.mean-container .mean-nav ul li li li li li a {
	width: 50%;
	padding: 1em 25%;
}
.mean-container .mean-nav ul li a:hover {
	color:#FFF;
	background:#9360a1;
}
.mean-container .mean-nav ul li li a:hover {
	color:#FFF;
	background:#4b2857;
}
.mean-container .mean-nav ul li a.mean-expand { /* definition Plusquadrate */
	margin-top: 1px;
	width: 26px;
	height: 23px;
	padding: 12px !important;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-weight: 700;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4) !important;
	border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
	background:#9360a1;
}
.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}
.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}
.mean-container .mean-bar, .mean-container .mean-bar * {/* Fix for box sizing on Foundation Framework etc. */
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
.mean-remove {
	display: none !important;
}

/* ----------------- RESPONSIVE für grössere Mobilgeräte --------------------- */
@media screen and (min-width:760px) {
	footer .custom div {
		display:block; /* Firmenname wieder einblenden */
	}
}

	/* ----------------- RESPONSIVE für Tabletgrösse --------------------- */
@media screen and (min-width:900px) {
	nav {
		display:block; /* Hauptmenu ab dieser Groesse wieder anzeigen */
		float:right; /* Mobilansicht überschreiben, diese war links */
		width:70%; /* Mobilansicht überschreiben, diese war 100% */
		padding: 4em 1em 0 0;
		text-align:right;
	}
	#ausrichten #kopf #logo {
		width:30%;
		padding:0.5em 0.5em 0.5em 2em;
	}
	section div.page-header {
		padding-left:10%; /* seitlich 10% einrücken */
		margin-top:-6.5em; /* Titel etwas weiter hinauf über Bild schieben */
	}
	section div.page-header h1 {
		font-size:3em; /* Seiten-Ueberschriften vergrössern */
	}
	section div.com-content-article__body,
	section div.gbs3, /* Formular abgesendet */
	footer
	{
		padding:1em 10% 2em 10%; /* seitlich 10% einrücken */
	}
}

/* ----------------- RESPONSIVE für Desktop --------------------- */
@media screen and (min-width:1200px) {
	/* Website einmitten (mit Float nur über Trick 77 moeglich, overflow: hidden in body gehört dazu) */
	body {
		overflow: hidden;
	}
	.wrap { 
		float: left;
		position: relative;
		left: 50%;
	}
	nav ul {
	font-size: 1.4em;	/* Hauptmenu Schrift nun groesser */
	}
	#ausrichten {
		width: 1200px; /* nun fixe Breite */
		position: relative;
		left: -50%;
		margin: 20px auto;
	}
	.clear { /* IE needs this to clear center floating at the end */
		clear: left;
		height: 1px;
		margin-top: -1px;
	}
}