@charset "UTF-8";

html {
	font-size: 62.5%;
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}


body {
	font-size: 1.6px; /* Fallback für alte Browser, die rem nicht kennen */
	font-size: 1.6rem; /* 16px */
	line-height: 1.5;
	font-family: Arial, Helvetica;
	font-weight: 300;
	color: #444;
	background-color: #efefef;
}


aside {
	text-align: center;
}

.section {
	margin: 1em 0;
}

h1,
h2,
h3 {
	font-family: 'Arial', sans-serif;
	font-weight: 500;
	line-height: 130%;
	color: #333333;
}

h1 {
	font-size: 2.8rem;
	margin: 0;
}

h2 {
	font-size: 2.2rem;
	margin: 0.5em 0;
}

aside h2 {
   margin: 0;
}

h3 {
	font-size: 2.0rem;
	margin: 0.6em 0;
}

main p {
	margin: 0.5em 0;
	text-align: justify;
}

p.teasertext {
	font-size: 1.7rem;
	line-height: 150%;
	margin: 0.8em 0;
}


ul,
ol {
	padding: 0;
	margin: 0 0 0.625em 2rem;
}

b,
strong {
  font-weight: 600;
}

a:link,
a:visited {
	color: #333333;
	text-decoration: underline;
	font-weight: 600;
}

.footer a:link,
.footer a:visited {
	color: #FFFFFF;
	text-decoration: underline;
	font-weight: 600;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
	color: #FFFFFF;
	text-decoration:none;
}

.logo {
	font-size: 1em;
	color:#333333;
	text-align: left;
	font-family: Arial,Helvetica;
	display: inline-block;
	padding: 0;
}

.suche {
	padding: 0.2em;
	color: #ffffff;
}

.nav nav {
	width: 100%;
}

.suche form {
	display:inline;
}

div.infobox {
	background-color: #efefef;
	margin: 1em 0 1em 0;
	padding: 0.2em;
	overflow:hidden;
}

.infobox a:link,
.infobox a:visited {
	text-decoration: none;
	font-weight: 300;
}

.infobox a:hover,
.infobox a:focus,
.infobox a:active {
	text-decoration: underline;
}

.artikel-box p {
	margin: 0em 0em 0em 0em;
}

.artikel-box img {
	float: left;
	margin: 0em 0.5em 0em 0em;
	border: 1px solid #bbb;
	border-radius: 4px;
	padding: 5px;
}

div.galerie {
	margin-top:1.5em;
}

.galerie img {
 margin: 0.5em 1.5em 0.5em 0em;
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für Fluides Layout                            *
 * ----------------------------------------------------------------------------- */

.page-wrapper {
	margin: 0 auto;
	max-width: 1400px;
	background-color: #333333;
}

.header {
	padding: 1.5em 1.935483871%;
	background-color: #ffffff;
	text-align: left;
}


.navbar {
	width: 100%;
}

.navbar-left {
	float: left;
	width: 74.567672833%;
}

.navbar-right {
	width: 25.432327167%;
	margin-left: 71.567672833%;
}

.main-wrapper {
	/* Hintergrund-Farbe auskommentieren, wenn Raster angezeigt werden soll! */
	background-color: #fff;
	overflow: auto;
	padding: 0;
	width: 100%;
}

.main-content {
	border-right: 1px dashed #ddd;
	float: left;
	width: 74.567672833%;
	padding: 2em 2.3369036027%;
}

.aside {
	width: 25.432327167%;
	margin-left: 74.567672833%;
	margin-top: 1em;
	padding: 2em 2.3369036027%;
}

.footer {
	background-color: #333333;
	color: #fff;
	text-align: center;
	padding: 0.8em 1.935483871%;
}


@media screen and (max-width: 1269px) {

.main-content {
	overflow: auto;
	width: 100%;
	padding: 2em 2.3369036027%;
}

.aside {
	overflow: auto;
	width: 100%;
	margin-left: 0%;
	padding: 2em 2.3369036027%;
}

}


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

.main-nav {
	margin: 0;
}

.main-nav > li {
	margin-left: 0;
	border-bottom: 1px solid rgba(250, 250, 250, 0.6);
}

.main-nav li > a,
.main-nav li > b {
	padding: 0.6em 2rem;
	display: block;
	font-size: 1.8rem;
}

.main-nav a:link {
	text-decoration: none;
}

.main-nav__item-act b {
	font-weight: 600;
}



/* ----------------------------------------------------------------------------- *
 *                       Styles für CSS Toggle Menü Button                       *
 * ----------------------------------------------------------------------------- */


/*** Menü-Link zum Ein-und Ausblenden des Menüs ***/

a.toggle-nav {
	position: absolute;
	top: 1.2rem;
	right: 4rem;
	display: inline-block;
	padding: 0.357em;
	font-weight: 300;
	border-radius: 0.2em;
	text-decoration: none;
	cursor: pointer;
}

a.toggle-nav:link,
a.toggle-nav:hover,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
	background: #111111;
	color: #fff;
}

@media screen and (min-width: 64em) {
	/*** Menü-Link verstecken in großen Viewports ***/
	a.toggle-nav {
		display: none;
	}
}


/*** Platz schaffen für den Menü-Button in kleinen Viewports ***/

@media screen and (max-width: 23em) {
	.header {
		text-align: right;
	}
}


/* ----------------------------------------------------------------------------- *
 *             Pushy-Off-Canvas-Navigation im Basis- und Tablet-Layout           *
 * ----------------------------------------------------------------------------- */


/*! Pushy - v1.0.0 - 2016-3-1
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */


/* Menu Appearance */

@media screen and (max-width: 63.938em) {
	.pushy {
		position: absolute;
		top: 0;
		width: 250px;
		height: 100%;
		z-index: 9999;
		overflow: auto;
		visibility: hidden;
		background-color: rgba(235,235,235,0.85);
		-webkit-overflow-scrolling: touch;
		/* enables momentum scrolling in iOS overflow elements */
	}
	.pushy ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.pushy a {
		display: block;
		color: #000000;
		padding: 15px 30px;
		text-decoration: none;
		outline: 0;
	}
	.pushy a:hover {
		color: #FFF;
	}
	.pushy.pushy-left {
		left: 0;
	}
	.pushy.pushy-right {
		right: 0;
	}
	/* Menu Movement */
	.pushy-left {
		-webkit-transform: translate3d(-250px, 0, 0);
		-ms-transform: translate3d(-250px, 0, 0);
		transform: translate3d(-250px, 0, 0);
	}
	.pushy-open-left #container,
	.pushy-open-left .push {
		-webkit-transform: translate3d(250px, 0, 0);
		-ms-transform: translate3d(250px, 0, 0);
		transform: translate3d(250px, 0, 0);
	}
	.pushy-right {
		-webkit-transform: translate3d(250px, 0, 0);
		-ms-transform: translate3d(250px, 0, 0);
		transform: translate3d(250px, 0, 0);
	}
	.pushy-open-right #container,
	.pushy-open-right .push {
		-webkit-transform: translate3d(-250px, 0, 0);
		-ms-transform: translate3d(-250px, 0, 0);
		transform: translate3d(-250px, 0, 0);
	}
	.pushy-open-left .pushy,
	.pushy-open-right .pushy {
		-webkit-transform: translate3d(0, 0, 0);
		-ms-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	/* Menu Transitions */
	#container,
	.pushy,
	.push {
		transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
	}
	/* Site Overlay */
	.site-overlay {
		display: none;
	}
	.pushy-open-left .site-overlay,
	.pushy-open-right .site-overlay {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9998;
		background-color: rgba(0, 0, 0, 1);
		-webkit-animation: fade 500ms;
		animation: fade 500ms;
	}
	@keyframes fade {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@-webkit-keyframes fade {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	/* Submenu Appearance */
	.pushy-submenu {
		/* Submenu Icon */
	}
	.pushy-submenu ul {
		padding-left: 15px;
		transition: max-height 0.2s ease-in-out;
	}
	.pushy-submenu ul .pushy-link {
		transition: opacity 0.2s ease-in-out;
	}
	/* Submenu Movement */
	.pushy-submenu-closed ul {
		max-height: 0;
		overflow: hidden;
	}
	.pushy-submenu-closed .pushy-link {
		opacity: 0;
	}
	.pushy-submenu-open ul {
		max-height: 1000px;
	}
	.pushy-submenu-open .pushy-link {
		opacity: 1;
	}
	.no-csstransforms3d .pushy-submenu-closed ul {
		max-height: none;
		display: none;
	}
}


/* ----------------------------------------------------------------------------- *
 *                Layout-Anpassungen für das Pushy-Off-Canvas-Menü               *
 * ----------------------------------------------------------------------------- */

a.toggle-nav {
	left: auto;
	right: 4rem;
}

@media screen and (max-width: 63.938em) {
	.pushy-submenu > a::after {
		width: 1em;
		text-align: right;
		content: '+';
		display: inline-block;
		color: #f8b255;
		font-family: sans-serif;
		font-weight: 600;
	}
	.pushy-submenu > a:hover::after {
		color: #fff;
	}
	.pushy-submenu > a::after {
		float: right;
	}
	.pushy-submenu.pushy-submenu-open a::after {
		color: #fff;
	}

.main-nav > li {
	margin-left: 0;
	border-bottom: 1px solid rgba(250, 250, 250, 0.6);
}


/*horizontales Menü enthält nur noch Such-Formular*/
.navbar-left {
	overflow: auto;
	width: 100%;
}

.navbar-right {
	overflow: auto;
	width: 100%;
	margin-left: 0%;
}


}


/* ----------------------------------------------------------------------------- *
 *                    Standard-Desktop-Layout der Navigation                     *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 64em) {
	.main-nav {
		overflow: hidden;
		box-shadow: none;
		margin: 0;
		padding: 0;
	}
	.main-nav > li {
		float: left;
		display: inline-block;
		width: auto;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.7em 1.2rem;
		display: inline-block;
		font-size: 1.8rem;
		/* 18px */
	}
	.main-nav ul {
		list-style-type: none;
		overflow: hidden;
		margin: 0;
	}
	.main-nav .pushy-submenu > ul > li > a::before,
	.main-nav .pushy-submenu > ul > li > b::before {
		content: ' ♦ ';
		width: 1em;
		color: #fff;
		display: inline-block;
	}

	.main-nav > li {
		float: left;
	}
	.main-nav > li > a,
	.main-nav > li > b {
		padding: 0.5em 3rem;
		display: block;
	}
	.main-nav a:link,
	.main-nav a:visited {
		color: #fff;
	}
	.main-nav a:hover,
	.main-nav a:focus,
	.main-nav a:active {
		color: #fff;
		background-color: #3a8ed6;
	}
}



/* ----------------------------------------------------------------------------- *
 *                          Styles für Teaserboxen                               *
 * ----------------------------------------------------------------------------- */

.teaser-box {
	background-color: #fff;
	border: 1px solid #ddd;
}
.artikel-box {
	background-color: #fff;
	border: 1px solid #ddd;
}

.teaser-box h2 {
	margin: 0;
	font-size: 20px;
}

.artikel-box h2 {
	margin: 0;
	font-size: 20px;
}

.box-inner {
	padding: 1em;
	overflow: auto; /*Artikel-Boxen können floatendes Thumbnail enthalten, das nicht über die Grenzen ragen soll.*/
}

@media screen and (max-width: 1399px) {
	h1 {
		font-size: 2.5rem;
	}
	.teaser-box {
		overflow: auto;
		width: 100%;
		margin-bottom: 1em;
	}
	.artikel-box {
		overflow: auto;
		width: 100%;
		margin-bottom: 1em;
	}
	.teaser-box img {
		float:left;
		margin: 0em 0.5em 0em 0em;
		border: 1px solid #bbb;
		border-radius: 4px;
		padding: 5px;
	}
	.teaser-box picture {
		float:left;
		margin: 0em 0.5em 0em 0em;
	}
}

@media screen and (min-width: 1400px) {
	.section.teaser-articles {
		display: flex
	}
/*
	.section.articles {
		display: flex
*/
	}
	.teaser-box {
		flex: 1 50%;
		margin: 0 2.3369036027% 1em 0;
	}
	.teaser-box:nth-of-type(2n+2) {
		margin-right: 0;
	}
	.teaser-box img {
		max-width: 100%;
		width: 100%;
		margin: auto;
		object-fit: none;
		object-position:center;
	}
	.artikel-box {
		/*overflow: auto;*/
		width: 100%;
		margin-bottom: 1em;
	}
}