:root {
    --color-olive: #708573;
    --color-beige: #97907a;

    --color-theme: var(--color-beige);

    --body-background: var(--color-theme);
    --content-background: white;
    --text-size: 16px;
    --font: "Open Sans";
    --text-color: var(--color-theme);
    --link-color: var(--color-theme);
    --footer-text-color: white;
    --footer-link-color: white;
    --menuicon-background: var(--color-theme);

}
/* Open Sans Light */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Light.woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-LightItalic.woff');
    font-weight: 300;
    font-style: italic;
}

/* Open Sans Regular */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Regular.woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Italic.woff');
    font-weight: 400;
    font-style: italic;
}

/* Open Sans Semi-Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Semibold.woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-SemiboldItalic.woff');
    font-weight: 600;
    font-style: italic;
}

/* Open Sans Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-Bold.woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-BoldItalic.woff');
    font-weight: 700;
    font-style: italic;
}

/* Open Sans Extra-Bold */
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-ExtraBold.woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/OpenSans/OpenSans-ExtraBoldItalic.woff');
    font-weight: 900;
    font-style: italic;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--text-color);
    font-size: 100%;
    box-sizing: border-box;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: none;
}
a:focus,
.no-touchevents a:hover {
    text-decoration: underline;
}
a#top {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    line-height: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    vertical-align: baseline;
}
img {
    border: 0;
}

/* General */
.frame-ruler-before {
    border-top: 1px solid #808080;
    padding-top: 1em;
}
.frame-ruler-after {
    border-bottom: 1px solid #808080;
    padding-bottom: 1em;
}
.frame-space-before-extra-small {
    margin-top: 1em;
}
.frame-space-before-small {
    margin-top: 2em;
}
.frame-space-before-medium {
    margin-top: 3em;
}
.frame-space-before-large {
    margin-top: 4em;
}
.frame-space-before-extra-large {
    margin-top: 5em;
}
.frame-space-after-extra-small {
    margin-bottom: 1em;
}
.frame-space-after-small {
    margin-bottom: 2em;
}
.frame-space-after-medium {
    margin-bottom: 3em;
}
.frame-space-after-large {
    margin-bottom: 4em;
}
.frame-space-after-extra-large {
    margin-bottom: 5em;
}

/* Layout grid */
.contentWrapper {
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    min-height: auto;
    margin: 0 auto;
}
#pageHeader {
    padding: 2em 3em 0 3em;
    background: var(--content-background);
}
#logo {
    float: left;
    width: 250px;
    margin: 2.75em calc(100% - 870px) 4em 0;
}
#logo img {
    width: 100%;
    height: auto;
    margin: 0;
}
#metanavi {
    float: right;
    margin-left: 100px;
    overflow: hidden;
}
#mainnavi {
    float: left;
    margin: 5.5em 0 0 0;
    overflow: hidden;
}
#pageContent {
    min-height: calc(100vh - 320px);
    padding: 0 3em 3em 3em;
    background: var(--content-background);
}
#left {
    float: left;
    width: calc(100% - 620px);
    min-height: 20px;
    padding-top: .5em;
    overflow: hidden;
}
#main {
    float: left;
    width: 500px;
    max-width: 500px;
    min-height: 20px;
    overflow: hidden;
}
#pageFooter {
    width: 100%;
    padding: 0;
    text-align: center;
}
#pageFooter .contentWrapper {
    padding: 1em;
}

/* Navigation */
#menuicon {
    display: none;
    position: absolute;
    right: 1em;
    top: calc(2em - 8px);
    width: 48px;
    height: 48px;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="tan" d="M96 160C96 142.3 110.3 128 128 128L512 128C529.7 128 544 142.3 544 160C544 177.7 529.7 192 512 192L128 192C110.3 192 96 177.7 96 160zM96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320zM544 480C544 497.7 529.7 512 512 512L128 512C110.3 512 96 497.7 96 480C96 462.3 110.3 448 128 448L512 448C529.7 448 544 462.3 544 480z"/></svg>');
    background-position: center;
    background-repeat: repeat;
    color: var(--text-color);
    cursor: pointer;
}
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav a {
     color: var(--link-color);
     text-decoration: none;
}
#metanavi > ul {
    display: flex;
    justify-content: flex-end;
}
#metanavi > ul > li {
    margin-left: 1em;
    font-size: .875em;
}
#metanavi > ul > li.active > a,
#page-home li.link-home > a,
#page-einzeltherapie li.link-einzeltherapie > a,
#page-einzeltherapie-arbeitsweise li.link-einzeltherapie-arbeitsweise > a,
#page-einzeltherapie-ablauf-kosten li.link-einzeltherapie-ablauf-kosten > a,
#page-paartherapie li.link-paartherapie > a,
#page-paartherapie-arbeitsweise li.link-paartherapie-arbeitsweise > a,
#page-paartherapie-ablauf-kosten li.link-paartherapie-ablauf-kosten > a,
#page-beziehungstraining li.link-beziehungstraining > a,
#page-mediation li.link-mediation > a,
#page-persoenliches li.link-persoenliches > a,
#page-impressum li.link-impressum > a,
#page-datenschutz li.link-datenschutz > a,
#page-kontakt li.link-kontakt > a {
    font-weight: bold;
}

#mainnavi > ul {
    display: flex;
    justify-content: flex-start
}
#mainnavi > ul > li {
    font-size: 1.25em;
    margin-right: 2em;
}
#mainnavi > ul > li:last-child {
    margin-right: 0;
}
#mainnavi li.active > a {
    font-weight: bold;
}
#mainnavi ul li ul {
    position: absolute;
    max-height: 0;
    z-index: 99;
    margin: 0 0 0 .75em;
    overflow: hidden;
    background: white;
    transition: max-height 800ms;
}
.no-touchevents #mainnavi ul li:hover ul {
    max-height: 100px;
}
#mainnavi > ul > li > ul > li {
    margin: 0.25em 0.5em;
    font-size: .875em;
}


/* Styling */
body {
    width: 100%;
    padding: 0 1em;
    color: var(--text-color);
    background: var(--body-background);
    font-family: var(--font), sans-serif;
    font-size: var(--text-size);
    line-height: 1.5em;
}
h1, h2, h3, h4, h5 {
    font-size: 1.25em;
    margin: 0 0 1.5em 0;
}
h2 {
    font-size: 1em;
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}
h3 {
    font-size: 1em;
    line-height: 1.4;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
p {
    font-size: 1em;
    margin: 0 0 0.7em 0;
    line-height: 1.5em;
}
p.text-center {
    text-align: center;
}
p.text-right {
    text-align: right;
}
p.text-justify {
    text-align: justify;
}
p.quote {
    color: #808080;
    font-size: 120%;
    font-weight: bold;
    font-style: italic;
}
p.source {
    margin-bottom: 4em;
    font-size: .875em;
    font-style: italic;
}

#main ul li,
#main ol li {
    margin: 0 0 0.25em 0;
    padding: 0;
}
#main a {
    color: var(--link-color);
    text-decoration: underline;
    font-weight: bold;
}
#main ul {
    margin: 0 0 2em 1.4em;
    list-style-type: disc;
    list-style-position: outside;
}
#main ol {
    margin: 0 0 2em 2em;
    list-style-type: decimal;
    list-style-position: outside;
}
img {
    margin: 0 0 1.5em 0;
}

#pageFooter * {
    color: var(--footer-text-color);
}
#pageFooter p {
    font-size: 0.75em;
}
#pageFooter a {
    color: var(--footer-link-color);
    text-decoration: none;
}
.separator::after {
    content: "\a0\b7\a0"
}
.separator.d-hide::after {
    content: "";
    display: block;
}

/* LAPTOP */
@media only screen and (max-width: 1200px) {
    #logo {
        margin-right: 160px;
    }
    #left {
        width: 410px;
    }
    #main {
        width: calc(100% - 410px);
    }
    #mainnavi > ul > li {
        font-size: 1em;
        margin-right: 1em;
    }
    .separator.l-hide::after {
        content: "";
        display: block;
    }
}
/* MOBILE */
@media only screen and (max-width: 960px) {
    #pageHeader {
        width: calc(100% - 2em);
        height: auto !important;
        position: fixed;
        top: 0;
        left: 1em;
        margin: 0;
        padding: 1em;
        background-color: white;
        -webkit-box-shadow: 0 3px 8px 3px rgba(150,150,150,0.5);
        box-shadow: 0 3px 8px 3px rgba(150,150,150,0.5);
    }
    #logo {
        margin: 1em calc(100% - 220px - 1em) 1em 1em;
        max-width: 220px;
        overflow-x: hidden;
    }
    #logo img {
        max-width: 220px;
        height: auto;
    }
    #menuicon {
        display: block;
    }
    #metanavi {
        float: left;
        max-height: 0;
        margin-left: 1em;
        margin-bottom: 0;
        transition: max-height 800ms, margin 800ms;
    }
    #metanavi.open {
        max-height: 50px;
        margin-bottom: 1em;

    }
    #metanavi > ul > li {
        margin-left: 0;
        margin-right: 1em;
    }
    #mainnavi {
        position: static;
        margin: 0 0 0 1em;
        width: 100%;
        background-color: white;
        max-height: 0;
        transition: max-height 800ms, margin 800ms;
    }
    #mainnavi > ul {
        flex-direction: column;
    }
    #mainnavi > ul > li {
        margin-bottom: .5em;
    }
    #mainnavi.open {
        max-height: 300px;
        margin: 1em 0 1em 1em;
    }
    #mainnavi ul li ul {
        position: static;
        max-height: 100%;
    }

    #pageContent {
        padding: 1em;
    }
    #left,
    #main {
        float: none;
        width: 100%;
        max-width: 600px;
        margin: 0;
    }
    #left {
        margin-top: 12em;
    }
    #left img {
        max-width: 100%;
        height: auto;
    }
    iframe {
        max-width: 100%;
    }
    #pageFooter p {
        font-size: 1em;
    }
    .separator.m-hide::after {
        content: "";
        display: block;
    }
}
@media only screen and (max-width: 610px) {
    #metanavi {
        position: absolute;
        right: 0;
        top: 1em;
        width: 100%;
        max-width: 300px;
        padding-left: 1em;
        padding-right: 1em;
        float: none;
        margin-left: 0;
    }
    #metanavi ul {
        justify-content: space-between;
    }
    #metanavi > ul > li {
        margin-left: 0;
    }
}