@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: 1em;
        margin-top: 1em;
}

.footer {
        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;
}


        #Bild-Damaris {
         width: 40%;
         float: left;
         margin: 0.5rem;
        }

/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                            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 */
        }
}


/* ----------------------------------------------------------------------------- *
 *                          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: center;
        }
        /*** Textauszeichnungen ***/
        .logo {
                font-size: 2.9rem;
                text-align: center;
                padding: 0;
        }
        h1 {
                font-size: 2.8rem;
                /* 28px */
                margin: 0;
        }
        p.teasertext {
                margin: 0.8em 0;
        }
        /*** Zierelemente: Pfeil verwendet in Header und in Nav ***/
        .triangle-down {
                position: relative;
        }
        .triangle-down::after {
                content: '';
                position: absolute;
                bottom: -2rem;
                border-width: 2rem 2rem 0;
                border-style: solid;
                display: none;
                width: 0;
        }
        .nav.triangle-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.triangle-down::after {
                display: block;
                left: 20%;
                border-color: #da0545 transparent;
                margin-left: -2rem;
        }
        .nav.triangle-down::after {
                 display: none;
        }

        .slides{
                 margin: 2rem 0;
                 line-height: 0;
                 overflow: hidden;

        }
        figcaption{
                  line-height: 1.4;
                  padding: 0.5em 0 0;

        }
        #Bild-Damaris{
                 float:left;
                 margin-right: 2rem;

        }
}


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

@media screen and (min-width: 80em) {
        .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;
}

       #sie_sind_hier {
                 background: lightgrey;
                  color: black;
         }
/* ----------------------------------------------------------------------------- *
 *                       Styles für CSS Toggle Menü Button                       *
 * ----------------------------------------------------------------------------- */


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

a.toggle-nav {
        position: relative;
        width: 100%;
        height: 4rem;
        display: inline-block;
        padding: 0.5em;
        font-weight: 300;
        border-radius: 0.4em;
        text-decoration: none;
        cursor: pointer;
        text-align: center;
}


a.toggle-nav:link,
a.toggle-nav:visited,
a.toggle-nav:active,
a.toggle-nav:focus {
        background: #189ca4;
        border: 1px solid silver;/*#189ca4;*/
        color: #fff;
}
a.toggle-nav:hover {
        background: #96cfbf;
        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: 24em) {
        .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: 39.998em) {
         .main-wrapper {
          padding: 0;
         }
          .main-content {
                width: 100%;
                padding: 0.5em 0.5em;
        }

         #kontaktformular{
         width: 100%;
          padding: 0.5em;
          margin-bottom: 2em;
          box-sizing: border-box;
         border: solid lightblue 0.2em;
          border-radius: 0.5em;
          }
        .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ü               *
 * ----------------------------------------------------------------------------- */


@media screen and (max-width: 63.938em) {
         .page-wrapper {
                 background-color: #da0545; /*rot*/
         }
         .aside {
                padding: 0 3rem 0 2rem;
        }
        .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;
        }
}

@media screen and (min-width: 40em) and (max-width: 63.998em) {

        #Bild-Damaris {
         width: 25%;
        }
       /* Menü Button ausschalten*/
         .toggle-nav.menu-btn {
       display: none;
       }

        .main-nav > li > a {
                 background-color: #189ca4; /*grünblau*/
                 border: 1px solid lightblue;
        }
        .main-nav > li {
                 display: inline-block;

        }
        .main-nav > li > a,
        .main-nav > li > b {
                padding: 0.7em 1.2rem;
        }
        .main-nav {
                        width: 45em; /*navibreite begrenzen*/
        }
}