@font-face {
    font-family: 'Afacad-Medium';
    src: url(Afacad-Medium.ttf);
}
@font-face { 
    font-family: 'Afacad-Regular'; 
    src: url(Afacad-Regular.ttf);
}
@font-face { 
    font-family: 'Afacad-Bold'; 
    src: url(Afacad-Bold.ttf);
}
@font-face { 
    font-family: 'Afacad-Italic'; 
    src: url(Afacad-Italic.ttf);
}
body {
    background-color: #FFFAF4;
    width: 100%;
}
#illu {
    display: block;
    position: static;
    justify-content: center;
    margin: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    max-width: 500px;
    max-height: 500px;
}
h1 {
    display: block;
    position: relative;
    margin: auto;
    justify-self: center;
    font-size: 60px;
    letter-spacing: 3px;
    font-family: "Afacad-Medium";
    text-align: center;
    color: #757575;
    margin-top: -3%;
}
nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 2;
    margin: auto;
    margin-top: -1%;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: center;
    font-family: "Afacad-Medium";
    color: #757575;
    background-color: #FFFAF4;
}
#navigation li {
    display: inline-flex;
    list-style-type: none;
    margin: 10px;
}
nav>div>a {
    color: #757575;
}
nav>div>a:hover {
    color: #757575;
    opacity: 0.6;
}
nav a {
    display: block;
    text-align: left;
    color: #757575;
    text-decoration: none;
}

#fotointro {
    display: block;
    width: 50%;
    margin: auto;
    padding: 10px;
}
.h2orange {
    display: block;
    margin-top: -150px;
    text-align: center;
    color: #CF734D;
    font-size: 60px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.h3orange {
    display: block;
    text-align: left;
    margin-left: 100px;
    margin-right: 100px;
    color: #CF734D;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.text-uebermich {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.text-uebermich-liste {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#uebermich {
    display: inline-block;
    margin-top: 150px;
    background-color:rgba(207, 115, 77, 0.3);
    padding-bottom: 50px;
}
.h2blau {
    display: block;
    margin-top: -150px;
    text-align: center;
    color: #5585AA;
    font-size: 60px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.h3blau {
    display: block;
    text-align: left;
    margin-left: 100px;
    color: #5585AA;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.zitatblau {
    display: block;
    margin-top: -90px;
    text-align: center;
    color: #5585AA;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.bild-neben-text {
    display: inline-flex;
}
#fotosupervision {
   width: 50%;
   height: 50%;
   margin-top: 50px;
}
.text-supervision {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 0px;
    width: 600px;
}
.text-supervision-liste {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 250px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#supervision {
    display: inline-block;
    margin-top: 150px;
    background-color:rgba(85, 133, 170, 0.3);
    padding-bottom: 100px;
}
.h2tuerkis {
    display: block;
    margin-top: -150px;
    text-align: center;
    color: #83bfb5;
    font-size: 60px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.h3tuerkis {
    display: block;
    text-align: left;
    margin-left: 100px;
    color: #83bfb5;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.zitattuerkis {
    display: block;
    margin-top: -90px;
    text-align: center;
    color: #83bfb5;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.text-coaching {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.text-coaching-liste {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 150px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#fotocoaching {
    width: 60%;
    margin-left: 35%;
    margin-top: 50px;
    margin-bottom: 80px;
}
#coaching {
    display: inline-block;
    margin-top: 150px;
    background-color:rgba(131, 191, 181, 0.3);
    padding-bottom: 50px;
}
.zitatorange {
    display: block;
    margin-top: -90px;
    text-align: center;
    color:#CF734D;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.text-neben-bild {
    display: flex;
}
#fotomoderation {
    width: 30%;
    height: 30%;
    margin-top: 100px;
    margin-left: 150px;
}
.text-moderation {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 60px;
    padding-bottom: 50px;
    width: 700px;
}
.text-moderation-liste {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 150px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#moderation {
    display: inline-block;
    margin-top: 150px;
    background-color:rgba(207, 115, 77, 0.3);
    padding-bottom: 50px;
}
.text-orgaberatung {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 150px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.h3blaurechts {
    display: block;
    text-align: right;
    margin-right: 100px;
    color: #5585AA;
    font-size: 40px;
    letter-spacing: 2px;
    font-family: "Afacad-Medium";
}
.text-orgaberatung-liste {
    display: block;
    text-align: left;
    color: #757575;
    background-color:rgba(85, 133, 170, 0.3);
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    margin-top: -70px;
    margin-left: 300px;
    padding-left: 150px;
    padding-right: 100px;
    padding-top: 50px;
    padding-bottom: 50px;
}
#organisationsberatung {
    display: inline-block;
    margin-top: 150px;
    padding-bottom: 50px;
}
.text-kontakt {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: 100px;
    margin-right: 100px;
    width: 40%;
    background-color:rgba(131, 191, 181, 0.3);
}
#fotooutro {
    width: 30%;
    height: 30%;
}
#kontakt {
    display: inline-block;
    margin-top: 150px;
}
.text-impressum {
    display: block;
    text-align: left;
    color: #757575;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    font-family: "Afacad-Medium";
    padding-left: 150px;
    padding-right: 100px;
    padding-top: 0px;
    padding-bottom: 0px;
}
#impressum {
    display: block;
    margin-top: 200px;
    padding-bottom: 50px;
}
@media (max-width: 1100px) {
#fotosupervision {
   display: block;
   margin: auto;
   max-width: 55%;
   max-height:55%;
}
.text-supervision {
    padding-left: 100px;
    padding-top: 50px;
    width: 80%;
}
#fotomoderation {
 width: 50%;
}
.text-moderation {
    padding-left: 150px;
    padding-right: 50px;
    width: 600px;
}
.text-neben-bild {
    display: block;
}
.bild-neben-text {
    display: block;
}
.text-supervision-liste {
    padding-left: 150px;
}
.text-kontakt {
    margin:auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
#fotooutro {
    display: block;
    margin: auto;
    padding-top: 50px;
    width: 50%;
}
.h2orange {
    margin-top: -100px;
    font-size: 40px;
    letter-spacing: 1px;
}
.h2blau {
    margin-top: -100px;
    font-size: 40px;
    letter-spacing: 1px;
}
.h2tuerkis {
    margin-top: -100px;
    font-size: 40px;
    letter-spacing: 1px;
}
.h3orange {
    font-size: 30px;
    letter-spacing: 1px;
}
.h3blau {
    font-size: 30px;
    letter-spacing: 1px;
}
.h3blaurechts {
    margin-left: 100px;
    margin-right: 100px;

    font-size: 30px;
    letter-spacing: 1px;
}
.h3tuerkis {

    font-size: 30px;
    letter-spacing: 1px;
}
.zitatorange {
    margin-top: -50px;
    font-size: 30px;
    letter-spacing: 1px;
}
.zitatblau {
    margin-top: -50px;
    font-size: 30px;
    letter-spacing: 1px;
}
.zitattuerkis {
    margin-top: -50px;
    font-size: 30px;
    letter-spacing: 1px;
}
.text-orgaberatung-liste {
    margin-top: -60px;
    margin-left: 200px;
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}
}
@media (max-width: 950px) {
    .h2orange {
    margin-top: -100px;
    font-size: 25px;
}
.h2blau {
    margin-top: -100px;
    font-size: 25px;
}
.h2tuerkis {
    margin-top: -100px;
    font-size: 25px;
}
.h3orange {
        font-size: 20px;
}
.h3blau {
        font-size: 20px;
}
.h3blaurechts {
       font-size: 20px;
}
.h3tuerkis {
    font-size: 20px;
}
.zitatorange {
    margin-top: -20px;
    font-size: 20px;
}
.zitatblau {
    margin-top: -20px;
    font-size: 20px;
}
.zitattuerkis {
    margin-top: -20px;
    font-size: 20px;
}
}