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

html,
body {
    height: 100%;
    margin: 0;
}

body {
    background-color: #f9f9f9;
    color: #666;
    font-size: 100%;
    font-family: 'Open Sans', Arial, sans-serif;
}

p {
    font-size: 1.2rem;
}

h1 {
    margin-top: 0;
    margin-bottom: 0;
}

h1 a {
    font-family: 'Kodchasan', Verdana, sans-serif;
    font-weight: normal;
    font-size: 3.2rem;
    color: #FFF;
    text-decoration: none;
    white-space: nowrap;
}

h2 {
    font-size: 2.4em;
    line-height: normal;
    font-weight: normal;
    color: #02856E;
    margin-top: 1em;
    margin-bottom: 1em;
}

h2.center {
    line-height: normal;
    margin-bottom: 2em;
}

h2.follow_page {
	margin-top: 0;
}

h3 {
    font-size: 2em;
    line-height: normal;
    font-weight: normal;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

h4 {
    font-size: 1.8em;
    font-weight: normal;
    color: #02856E;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

h5 {
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 0.2em;
}

h6 {
    font-size: 1.4em;
    font-weight: normal;
    text-decoration: none;
}

sup {
    font-size: 0.7em;
}

#page_wrapper {
    max-width: 80em;
    margin-left: auto;
    margin-right: auto;
    background: #FEFEFE;
}


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

nav {
    position: fixed;
    top: 4.2em;
    text-transform: uppercase;
}

nav img {
    width: 2em;
    height: auto;
}

/* Dropdown Button */
#dropbtn {
    background-color: #00A86B;
    color: white;
    padding: 1em;
    font-size: 1em;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
#dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Dropdown Content (Hidden by Default) */
#dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Links inside the dropdown */
#dropdown-content a {
    color: black;
    padding: 0.8em 1em;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
#dropdown-content a:hover {
    background-color: #ddd;
}

/* Show the dropdown menu on hover 
#dropdown:hover #dropdown-content {
    display: block;
}
*/

/* Change the background color of the dropdown button when the dropdown content is shown */
#dropdown:hover #dropbtn {
    background-color: #02856E;
}


/* -------------------------------- Header -------------------------------- */

header {
    background: #02856E;
    color: #FEFEFE;
    padding-top: 2em;
    padding-left: 8em;
    padding-right: 8em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header #title {
    padding-right: 2em;
}

header #title p {
    margin-top: 0;
    font-size: 2rem;
}

header #logo img {
    width: 10em;
    height: auto;
}


/* -------------------------------- Content -------------------------------- */

.white {
    color: #FFFFFF;
}

.breadcrumb {
	font-size: 1em;
	color: #02856E;
	text-align: right;
}

#vc {
    padding-left: 8em;
    padding-right: 8em;
    display: flex;
}

#vc address {
    padding-left: 8em;
    font-style: normal;
}

#vc address p.name {
    color: #02856E;
    font-size: 1.8rem;
    line-height: normal;
}

#vc address p.prof {
    font-size: 1.4rem;
    line-height: normal;
}

#vc address p.anschrift {
    font-size: 1.2rem;
    line-height: normal;
}

.leafs {
    width: 4rem;
}

main {
    background-color: #FEFEFE;
    padding-top: 0;
    padding-bottom: 2em;
}

main p {
    line-height: 1.8em;
}

main .inner {
    padding-top: 6em;
    padding-bottom: 6em;
    padding-left: 8em;
    padding-right: 8em;
}

main .nopaddingtop {
    padding-top: 0;
}

main ul,
main ol {
    margin: 0 0 2em 2em;
    padding: 0;
    font-size: 1.2rem;
}

main ul li,
main ol li {
    margin-top: 0.5em;
}

main ul li::marker {
    font-size: 1.2em;
    color: #02856E;
}

main .bg_green ul li::marker {
    color: #FEFEFE;
}

main ol {
    margin: 0 0 2em 1em;
    padding-left: 0;
}

main a {
    color: #02856E;
    text-decoration: none;
}

main a:hover {
    color: #777777;
    text-decoration: underline;
}

main .center {
    text-align: center;
}

main .col2 {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    text-align: center;
    margin-top: 4em;
}

main .col2_item {
    width: 45%;
    margin-bottom: 3em;
}

main .col3 {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    text-align: center;
}

main .col3_item {
    width: 30%;
}

img.round {
    width: 18.75em;
    height: auto;
    border-radius: 50%;
}

img.responsive {
	max-width: 100%;
	height: auto;
	margin-top: 3em;
	margin-bottom: 2em;
}

main .zitat {
    padding-top: 2em;
    padding-bottom: 1.5em;
    color: #02856E;
}

main .zitat p {
    font-size: 1.4rem;
    line-height: normal;
}

main .bg_green .zitat p {
    color: #FEFEFE;
}

main #vision {
    padding-top: 2em;
    padding-bottom: 4em;
    padding-left: 8em;
    padding-right: 8em;
}

main #beratung, #arbeitsweise {
    padding-top: 6em;
    padding-bottom: 6em;
    padding-left: 4em;
    padding-right: 4em;
}

main .col1 {
    padding-top: 6em;
    padding-bottom: 6em;
    padding-left: 4em;
    padding-right: 4em;
}

main #supervision h3 {
    line-height: 1em;
}

main .small {
    font-size: 0.9em;
    line-height: 3em;
}

main .smaller {
    font-size: 0.7em;
}

span.uppercase {
    text-transform: uppercase;
}

.divider {
    padding: 2em;
    text-align: center;
}

.parallax {
    background-color: #F9F9F9;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1280px auto;
    height: 34em;
}

audio {
	margin-bottom: 1em;
}

/* -------------------------------- Home -------------------------------- */

main #beraterinnen {
    display: flex;
    justify-content: space-between;
}

main .person {
    width: 40%;
    padding: 2em;
    background-color: #02856E;
    color: #FEFEFE;
    display: flex;
    border-radius: 25px;
    font-size: 1.2rem;
}

main .person img.round {
    width: 200px;
    height: auto;
}

main .bg_green {
    background-color: #02856E;
    color: #FEFEFE;
}

main .bg_green h2 {
    color: #FEFEFE;
    margin-top: 1em;
}

main .bg_green p {
    line-height: normal;
}

main .bg_green.center p {
    font-size: 1.4em;
    line-height: normal;
}

hr.divider-white {
    width: 30%;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    color: #FEFEFE;
    border-top: 1px solid #FEFEFE;
    border-bottom: 0;
}

/* -------------------------------- Footer -------------------------------- */

#footer_img {
    width: 100%;
    height: auto;
    font-size: 0;
}

footer {
    padding-top: 4em;
    padding-bottom: 4em;
    padding-left: 8em;
    padding-right: 8em;
    margin-top: -0.2em;
    background-color: #02856E;
    color: #FEFEFE;
    display: flex;
    justify-content: space-between;
}

footer address {
    font-style: normal;
    line-height: 1.9em;
}

footer .header {
	font-family: 'Kodchasan', Verdana, sans-serif;
    font-size: 1.5rem;
}

#footer_email {
    color: #FEFEFE;
    text-decoration: none;
}

#footer_link {
    color: #FEFEFE;
    margin-top: 3em;
}

#footer_link a {
    color: #FEFEFE;
    padding-top: 1em;
    padding-right: 1em;
}

#footer_link a:hover {
    text-decoration: none;
}

#footer_logo {
    width: 300px;
}

#copyright p {
    font-size: 0.8em;
    text-align: center;
    padding-bottom: 2em;
}


/* -------------------------------- Media Queries -------------------------------- */

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

    nav {
        top: 0;
        left: 0;
    }
    
    nav .dropbtn {
        background-color: #02856E;
    }

    header {
        padding-left: 4em;
        padding-right: 4em;
    }

    #vc {
        padding-left: 1em;
        padding-right: 1em;
        display: block;
        text-align: center;
    }

    #vc address {
        padding-left: 0;
    }

    main .inner {
        padding-top: 2em;
        padding-bottom: 4em;
        padding-left: 4em;
        padding-right: 4em;
    }

    main .nopaddingtop {
        padding-top: 0;
    }

    main .col3_item {
        width: 100%;
        padding-bottom: 2em;
    }

    main #vision {
        padding-left: 4em;
        padding-right: 4em;
    }


    footer {
        padding-left: 4em;
        padding-right: 4em;
    }
}

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

    h1 a {
        font-size: 2rem;
    }

    header #title p {
        font-size: 2rem;
    }
}

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

    main .col2_item {
        width: 100%;
    }
}

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


    h1 a {
        font-size: 2rem;
    }

    h2,
    h2.center {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.3rem;
    }

    h5 {
        font-size: 1.2rem;
    }

    h6 {
        font-size: 1.1rem;
    }

    p {
        font-size: 1rem;
    }

    header {
        padding-top: 0.8em;
        padding-bottom: 0.8em;
        padding-left: 1em;
        padding-right: 1em;
        flex-direction: column-reverse;
		text-align: center;
    }

    header #title {
        padding-right: 0;
    }

    header #title p {
        font-size: 1.5rem;
    }

    #vc address p.name {
        font-size: 1.5rem;
    }

    #vc address p.prof {
        font-size: 1.2rem;
    }

    #vc address p.anschrift {
        font-size: 1.1rem;
    }

    img.round {
        width: 12.5em;
    }

    main p {
        line-height: 1.6em;
    }

    main .inner {
        padding-top: 2em;
        padding-bottom: 2em;
        padding-left: 2em;
        padding-right: 2em;
    }

    main .nopaddingtop {
        padding-top: 0;
    }

    main .zitat p {
        font-size: 1.2rem;
    }

    main #beratung, #arbeitsweise {
        padding-top: 4em;
        padding-bottom: 4em;
        padding-left: 2em;
        padding-right: 2em;
    }

    main .einspaltig {
        padding-top: 4em;
        padding-bottom: 4em;
        padding-left: 2em;
        padding-right: 2em;
    }

    main #vision {
        padding-left: 2em;
        padding-right: 2em;
    }

    main .bg_green p {
        font-size: 1.2rem;
        line-height: normal;
    }

    main ul,
    main ol {
        font-size: 1rem;
    }

    footer {
        flex-direction: column-reverse;
        align-items: center;
        padding-left: 2em;
        padding-right: 2em;
    }

    footer address {
        padding-top: 2em;
        padding-right: 0;
    }

    footer address p {
        text-align: center;
    }
}

/* Alte Mobiles mit geringer Auflösung */

@media screen and (max-width: 320px) {
    body {
        font-size: 0.8em;
    }
}