@charset "UTF-8";

/* ----------------------------------------------------------------------------- * 
 *          Responsive Webdesign - Praxisbeispiele - 3. Auflage 2017             *
 *           In atmosphere.css sind Farben und Schriften definiert,              *
 *                  die für alle Beispiele verwendet werden.                     *
 *       In der layout.css stehen ergänzende Styles für alle Layoutstufen.       *
 *          Autoren: Andrea Ertel und Kai Laborenz (Rheinwerk Verlag)            *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- *
 *       Änderung des default-Box-Modells aller Elemente auf "border-box"        *
 *          https://www.paulirish.com/2012/box-sizing-border-box-ftw/            *			 
 * ----------------------------------------------------------------------------- */

html {
	box-sizing: border-box;
}

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


/* ----------------------------------------------------------------------------- */

.header {
	text-align: left;
}

.aside {
	border-top: 1px dashed #ddd;
	padding-top: 1em;
	margin-top: 1em;
}

.footer {
	padding: 0.6em 2rem;
	text-align: center;
}

.section {
	padding: 0.3em 0;
}


/*** Textauszeichnungen ***/

h1 {
	margin: 0 0 0.625em;
}

h2 {
	margin: 0;
}

h3 {
	margin: 0.6em 0;
}

p {
	margin: 0.5em 0;
}

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

.logo a:link,
.logo a:visited {
	padding: 0.8em 7rem;
	}

/* ----------------------------------------------------------------------------- *
 *                           Konfiguration Login-Formular                        *
 * ----------------------------------------------------------------------------- */
	
.form-group{margin-bottom:1rem}

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                 (z.B. iPad "hochformat", iPhone X "querformat)                *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */


/* Etwas kleinere Schrift für größere Screens */
@media screen and (min-width: 40em) and (max-width: 80em) {
	body {
		font-size: 1.5rem; /* 15px */
		background:blue;
	}
}


/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops (z.B. iPad "querformat")  *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 64em) {
	body {
		background:lime;
	}

	.header {
		padding: 1.5em 2.4rem;

	}
	.main-wrapper {
		padding: 3rem 0;
		display: table;
	}
	.main-content {
		display: table-cell;
		width: 70%;
		max-width:40em;
		border-right: 1px dashed #ddd;
		padding: 0 2rem 0 3rem;
	}
	.aside {
		display: table-cell;
		width: 30%;
		padding: 0 3rem 0 2rem;
		border-top: none;
		margin: 0;
	}
	.footer {
		padding: 0.8em 2rem;
		text-align: right;
	}
	/*** Textauszeichnungen ***/
	.logo {
		font-size: 2.8rem;
		text-align: left;
		display: inline-block;
		padding: 0;
	}
	.logo a:link,
	.logo a:visited {
		padding: 0.1em 0.6rem;
	}
	h1 {
		font-size: 2.8rem;
		/* 28px */
		margin: 0;
	}
	p.teasertext {
		margin: 0.8em 0;
	}
	/*** Zierelemente: Pfeil verwendet in Header und in Nav ***/
	.arrow-down {
		position: relative;
	}
	.arrow-down::after {
		content: '';
		position: absolute;
		bottom: -2rem;
		border-width: 2rem 2rem 0;
		border-style: solid;
		display: none;
		width: 0;
	}
	.nav.arrow-down::after {
		left: 70%;
		border-color: #4c4c4c transparent;
		margin-left: -2rem;
		display: block;
	}
	/* .main-wrapper macht Platz für .nav */
	.main-wrapper {
		width: 80%;
		padding: 0;
	}
	.main-content {
		width: 65%;
		padding: 0rem 2rem;
	}
	.aside {
		width: 35%;
		padding: 3rem;
	}
	/* Zierelemente: Pfeil in Header einblenden, Pfeil in Nav ausblenden */
	.header.arrow-down::after {
		display: block;
		left: 20%;
		border-color: #BB0A30 transparent;
		margin-left: -2rem;
	}
	.nav.arrow-down::after {
		display: none;
	}

}


/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops (z.B. PC)                  *
 *                           1280px / 16px/em = 80em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 80em) {
	body {
		background:yellow;
	}

	.page-wrapper {
		margin: 0 auto;
		max-width: 80em;
	}
}


/* ----------------------------------------------------------------------------- *
 *                                 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: 0.4rem;
	right: 0.5rem;
	display: inline-block;
	padding: 0em;
	font-weight: 700;
	border-radius: 0.2em;
	text-decoration:none;
	width: 5.0rem;
	font-size: 2.2rem;
	color: #fff;
	text-align:center;
}

a.toggle-nav:hover {
	background: #BB0A30;
	border: 1.8px solid #fff;
	color: #fff;
}

a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
	background: #bb0a30;
	border: 1.8px solid #fff;
	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: fixed;
		width: 250px;
		height: 100%;
		z-index: 9999;
		overflow: auto;
		visibility: hidden;
		-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: #b3b3b1;
		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, 0.5);
		-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 {
	right: auto;
	left: 0.5rem;
}

@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;
	}
}


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

@media screen and (min-width: 64em) {
	.main-nav {
		padding: 0 2rem;
		overflow: hidden;
	}
	.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;
	}
	.main-nav .pushy-submenu > ul > li > a::before,
	.main-nav .pushy-submenu > ul > li > b::before {
		content: '♦';
		width: 1.5em;
		color: #fff;
		display: inline-block;
	}
	/* Navigation wird links neben dem Inhalt angeordnet */
	.main-nav {
		width: 20%;
		float: left;
		box-shadow: none;
		margin: 1.6em 0 0;
		padding: 0;
	}
	.main-nav > li {
		width: 100%;
		float: none;
	}
	.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: #b3b3b3;
	}
}


/* ----------------------------------------------------------------------------- *
 *                            Bildergalerien und Slider                          *
 * ----------------------------------------------------------------------------- */


/* slick-slider */

.section__img-slider ul {
	padding: 0;
	margin: 0;
}

.section__carousel-slider img {
	border: 2px solid #fff;
}

.section__text-slider {
	border-top: 3px solid #efefef;
	border-bottom: 3px solid #efefef;
}

@media screen and (min-width: 40em) {
	.section__text-slider {
		padding: 2rem 5rem;
		/*border: 3px solid #efefef;*/
		border:0px;
		border-radius:4px;
		box-shadow:1px 1px 7px rgba(0,0,0,0.1);
		box-sizing: border-box;
	}
	.slick-prev {
		left: -4rem;
	}
	[dir=rtl] .slick-prev {
		right: -4rem;
	}
	.slick-next {
		right: -4rem;
	}
	[dir=rtl] .slick-next {
		left: -4rem;
	}
	.slick-prev,
	.slick-next {
		height: 3rem;
		width: 3rem;
	}
	.slick-prev::before,
	.slick-next::before {
		font-size: 3rem;
		color: #da0545;
	}
	.section__img-slider {
		padding: 1rem 3rem;
	}
}