:root {
    --grau: #d1d2d4;
    --grauDunkel: #6d6e70;
    --gold: #b28c69;
    --blau: #005e86;
}


/* Standards */
html,
body {
    font-family: 'Cambo', serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    color: var(--blau);
    scroll-behavior: smooth;

}

.zentriert {
    position: relative;
    width: 890px;
    margin-left: auto;
    margin-right: auto;
}

h1,
h2,
h3 {
    position: relative;
    color: var(--blau);
    font-weight: normal;
}

.makeTransit {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

a:hover {
    color: #000;
}

.grau {
    background-color: var(--grau);
}

.dunkelgrau {
    background-color: var(--grauDunkel);
    color: #fff;
}

input[type="text"],
textarea {
    font-family: 'Cambo', serif;
    font-size: 16px;
    padding: 5px;
}

#btnAbsenden {
    margin-left: 0px;
    margin-bottom: 5px;
    width: 315px;
    padding: 5px;
    position: relative;
    font-size: 20px;
    font-family: 'Cambo', serif;
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background-color: var(--gold);
    color: #fff;
    cursor: pointer;
}

/* NACH OBEN */
#nachOben {
    position: fixed;
    display: block;
    background: var(--grauDunkel);
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    bottom: 50px;
    right: 50px;
    z-index: 100;
    font-size: 35px;
    color: #d1d2d4;
    text-align: center;
    border: 2px solid var(--grau);
    cursor: pointer;
    /* 
    background-image: url(bilder/pfeil_weiss.png);
    background-size: 80% 80%;
    background-position: center center;
    background-repeat: no-repeat;
    */

    transition: all 300ms ease-in-out;
}

#nachOben:hover {
    width: 60px;
    height: 60px;
    bottom: 45px;
    right: 45px;
    font-size: 40px;
}


/* HEADER */
#orga #orgaHeader {
    position: absolute;
    font-size: 1.5em;
    color: var(--blau);
    width: 100%;
    text-align: center;
    opacity: 0;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

#orga #orgaHeader .untertext {
    font-size: .5em;
    color: var(--grauDunkel);
    float: none;
}

#orgaHeader img {
    width: 300px;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

header {
    position: relative;
    background-color: var(--grau);
    margin-bottom: 50px;
    margin-top: 30px;
}

#orga #orgaHeader a,
header a {
    text-decoration: none;
    color: var(--blau);
}

header #title img {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: block;
    top: 62px;
}

#orga {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
    background-color: var(--grau);
    margin: 0;
    z-index: 100;
    height: 65px;
    padding-top: 5px
}

#orga div {
    position: relative;
    float: right;
}

#orga div .kontakt {
    position: absolute;
    right: 0;
    top: 20px;
}

#orga div a.ebene1:not(:last-of-type) {
    border-right: 1px solid var(--grauDunkel);
    margin-right: 10px;
    padding-right: 10px;
}

#orga div.zentriert {
    float: none;
}

#orga .btnKontakt,
.btn,
input[type="submit"] {
    position: relative;
    font-size: 20px;
    font-family: 'Cambo', serif;
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background-color: var(--gold);
    color: #fff;
    cursor: pointer;
}

#orga .btnKontakt:hover,
.btn:hover,
input[type="submit"]:hover {
    color: #000;
}

.btn {
    margin-top: 10px;
    display: block;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

#orga .legal {
    position: relative;
    color: var(--grauDunkel);
}

#orga .legal a {
    position: relative;
    font-size: .75em;
    color: var(--grauDunkel);
    text-decoration: none;
}

#orga .legal a:hover {
    color: #000;
}

#kontakt {
    min-height: 250px;
}

header h1,
header h2,
header h3 {
    top: 30px;
    font-size: 1.5em;
    text-align: center;
}

header h1 {
    top: 55px;
    font-size: 3.5em;
    margin-top: 20px;
}

header h2 {
    color: #000;
}

header h3 {
    color: #000;
    font-size: 1.2em;
    margin-top: 20p;
}

/* INHALTE */
main {
    position: relative;
    margin-top: 100px;
}

article {
    position: relative;
    border-top: 2px var(--blau) dotted;
    overflow: hidden;
    margin-top: 30px;
}

article h2 {
    font-size: 2em;
    margin: 10px 0 10px 0;
}

article .aufklapper {
    position: relative;
    float: left;
    width: 420px;
    margin-right: 50px;
    cursor: pointer;
}

article .aufklapper:hover {
    background-color: var(--grau);
}

article .aufklapper:hover .inhalte h3 {
    padding-left: 20px;
}

article .aufklapper.rechts {
    margin-right: 0px;
}

article .aufklappElementDoppelt .inhalt p {
    position: relative;
    font-size: 1.2em;
    line-height: 1.4em;
}

article .aufklapper .illu {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

article .aufklapper .inhalte {
    position: relative;
}

article .aufklapper .inhalte h3 {
    font-size: 1em;
    margin: 10px 0 10px 0;
    overflow: hidden;
}

article .aufklapper.offen .inhalte h3 {
    height: 0;
    padding: 0;
}

article .aufklapper .inhalte .aufklappIndikator {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 2em;
    font-weight: bold;
    color: var(--gold);

    background-image: url(bilder/pfeil.png);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

    -moz-transform: rotate(0deg) translateY(-15px) translateX(0px);
    -webkit-transform: rotate(0deg) translateY(-15px) translateX(0px);
    -o-transform: rotate(0deg) translateY(-15px) translateX(0px);
    -ms-transform: rotate(0deg) translateY(-15px) translateX(0px);
    transform: rotate(0deg) translateY(-15px) translateX(0px);
    display: none;
}

article .aufklapper.offen .inhalte .aufklappIndikator {
    -moz-transform: rotate(90deg) translateY(0px) translateX(-15px);
    -webkit-transform: rotate(90deg) translateY(0px) translateX(-15px);
    -o-transform: rotate(90deg) translateY(0px) translateX(-15px);
    -ms-transform: rotate(90deg) translateY(0px) translateX(-15px);
    transform: rotate(90deg) translateY(0px) translateX(-15px);
}

/* Aufklappende Inhaltselemente */
article .aufklapper .aufklappElement,
article .aufklappElementDoppelt {
    color: var(--blau);
}

article .aufklapper .aufklappElement {
    display: none;
}

article .aufklappElementDoppelt {
    position: relative;
    clear: left;
    height: 0px;
}

article .aufklappElementDoppelt .inner {
    position: relative;
    overflow: hidden;
}

article .aufklappElementDoppelt .inhalt {
    position: relative;
    width: 415px;
    margin-bottom: 20px;
    margin-right: 50px;
}

article .aufklappElementDoppelt.rechts .inhalt {
    margin-left: 475px;
    width: auto;
    margin-right: 0;
}

article .aufklappElementDoppelt .inhalt:nth-child(2n) {
    margin-right: 0px;
}

article .aufklapper .aufklappElement h3,
article .aufklappElementDoppelt h3 {
    font-size: 2em;
    margin-top: 0;
}

/* TEAM */
article .team {
    position: relative;
    overflow: hidden;
}

.teammember {
    position: relative;
    float: left;
    width: 240px;
    padding: 20px;
    overflow: hidden;
    margin-right: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--grauDunkel);
}

.teammember:nth-of-type(3n) {
    margin-right: 0px;
}

.teammember .foto {
    position: relative;
    width: 100%;
    height: auto;
}

.teammember .info {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

.teammember .name {
    font-size: 20px;
}

.teammember .job,
.teammember .tel,
.teammember .mail,
.teammember .standort,
.teammember .bereiche {
    font-size: 0.9em;
}

.teammember .job {
    color: var(--gold);
}

.teammember .job .jobs span:not(:last-child)::after {
    content: ', ';
}

.teammember .job .jobs .hasLink .inner {
    cursor: pointer;
    text-decoration: underline;
}

.teammember .job .jobs .hasLink .inner:hover {
    color: #000;
}


/* AUFTEILUNG */

.grau .links {
    position: relative;
    float: left;
    width: 250px;
}

.grau .links h2 {
    font-size: 2em;
    margin-top: 0px;
}

.grau .rechts {
    position: relative;
    margin-left: 270px;
}

/****************** Powermail ************************/
div.fieldsets,
.tx_powermail-pi1_form {
    clear: none !important;
}

.tx-powermail-pi1 {
    margin-left: 0px;
}

.tx-powermail fieldset {
    border: none;
    margin-bottom: 1em;
}

.tx-powermail legend {
    visibility: hidden;
    position: absolute;
}

legend.powermail_check_legend {
    visibility: visible;
}

.tx-powermail label {
    display: none;
}

.tx-powermail input,
.tx-powermail textarea {
    margin-left: 0px;
    margin-bottom: 5px;
    width: 300px;
    padding: 5px;
}

.tx-powermail input[type="submit"] {
    width: 312px;
}

.tx-powermail select {
    margin-left: 120px;
    width: 300px;
    margin-bottom: 20px;
    padding: 5px;
}

input.powermail_checkbox {
    width: 30px;
    margin-right: 10px;
}

.rechts .powermail_form h3 {
    display: none;
}

/* FOOTER */
footer {}

footer>div {
    position: relative;
    padding: 20px;
}

footer>div:last-child {
    padding-bottom: 100px;
}

/* Grauer Footer */
#glossar article {
    border: none;
}

.glossar,
.glossar h2,
.glossar h3 {
    color: var(--grau);
    margin: 0px;
    margin-bottom: 20px;
}

.glossar h3 {
    margin-bottom: 5px;
}

.glossar .eintrag {
    height: 25px;
    overflow: hidden;
    margin-bottom: 10px;

    cursor: pointer;
    width: 600px;
}

.glossar .eintrag.aktiv,
.glossar .eintrag.aktiv h3,
.glossar .eintrag.aktiv p {
    color: #fff;
}

.glossar .eintrag p {
    color: var(--grau);
    margin: 0px;
    opacity: 0;
    line-height: 1.3em;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.glossar .eintrag.aktiv p {
    opacity: 1;
}

.glossar .eintrag:hover h3 {
    color: var(--blau);
}

#farDownThere {
    display: none;
}

@media (max-width: 1000px) {
    .zentriert {
        width: 700px;
    }

    article .aufklapper {
        width: 340px;
        margin-right: 20px;
    }

    #orga .legal {
        position: absolute;
        padding-right: 0px;
        right: 0;
        top: 0px;
    }

    header #title img {
        width: 600px;
        top: 50px;
    }

    .teammember {
        width: 200px;
        padding: 11px;
        margin-right: 12px;
    }

    #orga {
        height: 60px;
    }

    article .aufklappElementDoppelt .inhalt {
        width: 342px;
    }

    article .aufklappElementDoppelt.rechts .inhalt {
        margin-left: 360px;
    }

    .aufklappElementDoppelt .inhalt iframe {
        width: 345px !important;
    }

    article .aufklappElementDoppelt .inhalt p {
        font-size: 1em;
    }
}



@media (max-width: 750px) {
    header {
        padding-bottom: 4vw;
    }

    header #title img {
        width: 70%;
        top: 10vw;
    }

    .zentriert {
        width: auto;
        margin-left: 5%;
        margin-right: 5%;
    }

    header h1 {
        top: 45px;
        font-size: 2em;
    }

    #orga.gescrollt #orgaHeader {
        top: 5px;
    }

    #orga.gescrollt {
        height: 75px;
        top: 0;
        padding-top: 2px;
        background-color: var(--grau);
    }

    #orga.gescrollt .legal {
        position: relative;
        top: 0px;
        text-align: right;
    }

    #orga.gescrollt .legal a {
        display: block;
        padding-bottom: 8px;
    }

    #orga.gescrollt .kontakt {
        position: relative;
        float: none;
        right: 0;
        top: 0;
        padding-top: 2px;
        text-align: right;
    }

    #orga.gescrollt .kontakt .btnKontakt {
        padding: 0;
        background-color: transparent;
        color: var(--grauDunkel);
        font-size: 12px;
        padding-bottom: 8px;
    }

    #orga.gescrollt div a.ebene1:not(:last-of-type) {
        border-right: none;
        margin-right: 0px;
        padding-right: 0px;

    }

    article .aufklapper {
        width: 49%;
        margin-right: 2%;
    }

    article .aufklappElementDoppelt.rechts .inhalt {
        margin-left: 0px;
    }

    article .aufklappElementDoppelt .inhalt {
        width: 100%;
    }

    .aufklappElementDoppelt .inhalt iframe {
        width: 100% !important;
    }

    .teammember {
        width: 49%;
        padding: 0;
        margin-right: 2%;
        border-width: 0;
        background-color: #eee;
    }

    .teammember:nth-child(3n+1) {
        margin-right: 2%;
    }

    .teammember:nth-of-type(2n) {
        margin-right: 0;
    }

    .grau .links {
        float: none;
        width: auto;
    }

    .grau .rechts {
        margin-left: 0px;
    }

    .tx-powermail fieldset {
        padding: 0;
        margin: 0;
    }

    .glossar .eintrag {
        width: auto;
    }
}

@media (max-width: 510px) {

    html,
    body {
        font-size: 14px;
    }

    .zentriert {
        margin-left: 10px;
        margin-right: 10px;
    }

    header {
        margin-top: 0px;
    }

    #orga,
    #orga #orgaHeader,
    #orga .kontakt {
        display: none;
    }

    #farDownThere {
        display: block;
        background-color: #000;
    }

    #farDownThere span {
        color: var(--grau);
        margin-right: 10px;
        text-decoration: underline;
        cursor: pointer;
    }

    #farDownThere span a {
        color: var(--grau);
    }
}