@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: center;
} 
.aside {
	border-top: 1px dashed #ddd;
	padding-top: 2em;  
	margin-top: 2em;    
}
.aside img {max-width: 50%, height:auto;}             /*--Bilder in aside kleiner--------------*/
.footer { background-color: #da0545;
	padding: 0.6em 2rem;
	text-align: center;
}

.section {
	padding: 1em 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.6em 2rem;
}



/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                            640px / 16px/em = 40em                             *
 * ----------------------------------------------------------------------------- */
@media screen and (min-width: 40em) and (max-width: 80em) {
	body {
		font-size: 1.5rem; /* 15px */
	}
}

@media screen and (min-width: 40em) {
	.header {
		padding: 1.5em 2.4rem;
		text-align: left;
	}
	.main-wrapper {
		padding: 0rem 0;    /* von 3rem(padding top und paddin bottom) auf 0 eändert 6.maerz
                                     Zwischenraum verschwindet*/
		display: flex;
		flex-direction: row;
	}
	.main-content {
		flex: 1 70%;
		order: 1;
		border-right: 1px dashed #ddd;
		padding: 0 2rem 0 3rem;
	}
	.aside {
		flex: 1 30%;
		order: 2;
		padding: 1rem 3rem 0 2rem; /* von 0 auf (Pading-top)1rem geändert*/
		border-top: none;
		margin: 0;
	}
	.footer {
		padding: 0.8em 2rem;
		text-align: right;
	}
}



/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 64em) {
	.header {
		padding: 1.5em 2.4rem;
		text-align: left;
	}
	.main-wrapper {
		padding: 3rem 0;
		display: table;
	}
	.main-content {
		display: table-cell;
		width: 70%;
		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;
	}
	.logo a:hover,
	.logo a:focus,
	.logo a:active {
		background-color: #fff;
		color: #da0545;
	}
	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: #189ca4 transparent;
		margin-left: -2rem;
		display: block;
	}
	/* .main-wrapper macht Platz für .nav */
	.main-wrapper {
		width: 80%;
		padding: 0;
	}
	.main-content {
		width: 65%;
		padding: 2em 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: #da0545 transparent;
		margin-left: -2rem;
	}
	.nav.arrow-down::after {
		display: none;
	}
}


/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1280px / 16px/em = 80em                             *
 * ----------------------------------------------------------------------------- */

@media screen and (min-width: 80em) {
         
         
    .page-wrapper {
		margin: 0 auto;
        max-width: 80em; background-color: #189ca4;} /*heute verändert von beige , dmit die dunkle Blaufarbe bis zum Footer geht */
         
}
/* ----------------------------------------------------------------------------- *
 *                                 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: 0.357em;
	font-weight: 300;
	border-radius: 0.2em;
	text-decoration: none;
	cursor: pointer;
}

a.toggle-nav:hover {
	background: #96cfbf;
	border: 1px solid #96cfbf;
	color: #fff;
}

a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
	background: #189ca4;
	border: 1px solid #189ca4;
	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: 30em) {
	.header {
		text-align: right; }
    .aside {padding-left: 15px; font-size: 120%;} 
             /* smartphone Version bis 480px*/
    /* habe am 25.feb hinzugefügt, um Rand darzstellen, Schrift auf 95%, auf 30em erhöht*/
}  
         /*  smart-phonre Version unter 320px bis 480px */
     @media screen and (min-width: 15em) and (max-width:30em) {
                   .header, main-content, aside, header {display: block; width: 100%;}
           .aside  {text-align: center;}
}
       /* klassische Tablet- Version zwei Säulen bis 640px */
 
/* habe ich heute sa. 5.3. geändert */
@media screen and (min-width: 30em) and (max-width:40em){
               body {font-size:1.4em; background-color: beige;}
               
              .header { width:100%; padding: 0.6em 0.4em; background: #da0545;} 
              .main-content {background-color: beige; color: black;}
            
           /* folgende Css-Angaben sind wahrscheinlich falsch und bringen Ungleichgewicht hinein*/
         .aside {background: khaki; text-align: center; padding: 1.2em;}
             .aside h3 {font-size: 1.6em; color: red; text-align: center;}
             .aside ul {text-decoration: none;}
             .aside ul li  {text-decoration: none; list-style: none; font-size: 1.0em; color: red; text-align: center;}
             .aside ul li a{ background-color: #e2e4e8; font-size: 1.0em; color: #00008b; text-align: center;}
          
    
   
            .aside ul li a:link  {font-size: 1.0em; color: #f00;}
            .aside  a:hover;.aside ul li a:focus; .aside ul li a:active {font-size: 1.0em; color: aqua;}
        
    
    .footer  { width: 100%;  background: #da0545; }
              .footer ul li {font-size: 18px; color: white;}
              .footer ul li a {font-size: 18px; color: white;}

                    }      
/*              */

/* ----------------------------------------------------------------------------- *
 *             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;
		font-size: 1.8rem;
		/* 18px */
	}
	.main-nav .pushy-submenu > ul > li > a::before,
	.main-nav .pushy-submenu > ul > li > b::before {
		content: ' ♦ ';
		width: 1em;
		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: #96cfbf;
	}
}


/* Bilder flexibel machen */
img {
	max-width: 100%;
	height: auto;
}
/* von mir am 11.2.eingefügt*/
img ul {text-decoration: none; list-style-type: none;}
img ul li {text-decoration: none; list-style-type: none;}
/*--------------*/
/* NEU: */
/* ----------------------------------------------------------------------------- *
 *                            Bildergalerie mit Lightbox                         *
 * ----------------------------------------------------------------------------- */

.section__fancybox {
	margin: 0 -1rem;
}

.section__fancybox h2 {
	padding: 0.5em 1rem;
}

ul.fancybox-gallery {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}

ul.fancybox-gallery li {
	flex: 1 50%;
	padding: 0.2rem 0.2rem 0;
	line-height: 0;
}

ul.fancybox-gallery li a {
	display: block;
	border: 5px solid beige;      /* von mir am 26.feb von weiß auf beiige geä#ndert */
}

ul.fancybox-gallery li a:hover,
ul.fancybox-gallery li a:focus {
	background-color: transparent;
	border-color: beige;          /* geändert auf beige am 26.feb. war #f8b255 orange*/
}