@charset "UTF-8";

/* ----- ANFANG: ALLGEMEINE STYLES ----- */

h1 {
    font-weight: normal;
    margin-left: 17vw;
    padding-top: 0.7em;
    font-size: 2em;
    line-height: 1.2em;
}

h2 {
    position: relative;
    font-weight: normal;
    font-size: 2em;
    line-height: 1em;
}

p {
    font-family: "Raleway Light", "SansSerif", sans-serif;
    font-size: 1.6em;
}

@media (min-width: 350px) {

    h1 {
        font-size: 2.3em;
    }
}

@media (min-width: 450px) {

    h1 {
        font-size: 2.6em;
    }
}

@media (min-width: 600px) {

    h1 {
        font-size: 2.8em;
    }
}

@media (min-width: 700px) {

    h1 {
        font-size: 3em;
    }
}

@media (min-width: 800px) {

    h1 {
        font-size: 3.3em;
    }
}

@media (min-width: 1000px) {

    h1 {
        font-size: 3.8em;
    }

    h2 {
        font-size: 3.3em;
    }
}

@media (min-width: 1200px) {

    h1 {
        font-size: 4.4em;
    }
}

@media (min-width: 1400px) {

    h1 {
        font-size: 4.8em;
    }
}

/* ----- ENDE: ALLGEMEINE STYLES ----- */

/* ----- ANFANG: REFERENZEN ALLGEMEIN ----- */

#referenzen {
    margin-top: 2.5vh;
}

.referenz {
    aspect-ratio: 1200 / 800;
}

/* ----- ENDE: REFERENZEN ALLGEMEIN ----- */

/* ----- ANFANG: REFERENZ 1 ----- */

#referenz-1 {
    padding-top: 7vh;
}

#referenz-1 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-1 h2 {
    margin-right: 8vw;
    margin-top: -4vh;
    margin-bottom: 1.2rem;
    text-align: right;
}

#referenz-1 p {
    font-size: 1.2em;
    margin-right: 8vw;
    margin-top: 1.5vh;
    text-align: right;
}

@media (orientation: portrait) {

    #referenz-1  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-1  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-1  {
        margin-top: 10vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-1  {
        margin-top: 5vh;
    }
}

@media (min-width: 1000px) {

    #referenz-1 .referenz {
        margin-left: 30vw;
        width: 65vw;
    }

    #referenz-1 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 1 ----- */

/* ----- ANFANG: REFERENZ 2 ----- */

#referenz-2 {
    padding-top: 7vh;
}

#referenz-2 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-2 h2 {
    margin-left: 7.5vw;
    margin-top: -4.1vh;
    margin-bottom: 1.2rem;
}

#referenz-2 p {
    font-size: 1.2em;
    margin-left: 7.5vw;
    margin-top: 1.5vh;
}

@media (orientation: portrait) {

    #referenz-2  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-2  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-2  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-2  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-2 .referenz {
        margin-left: 5vw;
        width: 65vw;
    }

    #referenz-2 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 2 ----- */

/* ----- ANFANG: REFERENZ 3 ----- */

#referenz-3 {
    padding-top: 7vh;
}

#referenz-3 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-3 h2 {
    margin-right: 8vw;
    margin-top: -4vh;
    margin-bottom: 1.2rem;
    text-align: right;
}

#referenz-3 p {
    font-size: 1.2em;
    margin-right: 8vw;
    margin-top: 1.5vh;
    text-align: right;
}

@media (orientation: portrait) {

    #referenz-3  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-3  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-3  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-3  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-3 {
        padding-top: 7.5vh;
    }

    #referenz-3 .referenz {
        margin-left: 30vw;
        width: 65vw;
    }

    #referenz-3 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 3 ----- */

/* ----- ANFANG: REFERENZ 4 ----- */

#referenz-4 {
    padding-top: 7vh;
}

#referenz-4 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-4 h2 {
    margin-left: 7.5vw;
    margin-top: -4.1vh;
    margin-bottom: 1.2rem;
}

#referenz-4 p {
    font-size: 1.2em;
    margin-left: 7.5vw;
    margin-top: 1.5vh;
}

@media (orientation: portrait) {

    #referenz-4  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-4  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-4  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-4  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-4 .referenz {
        margin-left: 5vw;
        width: 65vw;
    }

    #referenz-4 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 4 ----- */

/* ----- ANFANG: REFERENZ 5 ----- */

#referenz-5 {
    padding-top: 7vh;
}

#referenz-5 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-5 h2 {
    margin-right: 8vw;
    margin-top: -4vh;
    margin-bottom: 1.2rem;
    text-align: right;
}

#referenz-5 p {
    font-size: 1.2em;
    margin-right: 8vw;
    margin-top: 1.5vh;
    text-align: right;
}

@media (orientation: portrait) {

    #referenz-5  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-5  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-5  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-5  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-5 {
        padding-top: 7.5vh;
    }

    #referenz-5 .referenz {
        margin-left: 30vw;
        width: 65vw;
    }

    #referenz-5 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 5 ----- */

/* ----- ANFANG: REFERENZ 6 ----- */

#referenz-6 {
    padding-top: 7vh;
}

#referenz-6 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-6 h2 {
    margin-left: 7.5vw;
    margin-top: -4.1vh;
    margin-bottom: 1.2rem;
}

#referenz-6 p {
    font-size: 1.2em;
    margin-left: 7.5vw;
    margin-top: 1.5vh;
}

#referenz-6 p.wordpress {
    margin-top: 0.2em;
}

@media (orientation: portrait) {

    #referenz-6  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-6  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-6  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-6  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-6 .referenz {
        margin-left: 5vw;
        width: 65vw;
    }

    #referenz-6 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 6 ----- */

/* ----- ANFANG: REFERENZ 7 ----- */

#referenz-7 {
    padding-top: 7vh;
}

#referenz-7 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-7 h2 {
    margin-right: 8vw;
    margin-top: -4vh;
    margin-bottom: 1.2rem;
    text-align: right;
}

#referenz-7 p {
    font-size: 1.2em;
    margin-right: 8vw;
    margin-top: 1.5vh;
    text-align: right;
}

@media (orientation: portrait) {

    #referenz-7  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-7  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-7  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-7  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-7 {
        padding-top: 7.5vh;
    }

    #referenz-7 .referenz {
        margin-left: 30vw;
        width: 65vw;
    }

    #referenz-7 p {
        font-size: 1.6em;
    }
}

/* ----- ENDE: REFERENZ 7 ----- */

/* ----- ANFANG: REFERENZ 8 ----- */

#referenz-8 {
    padding-top: 7vh;
}

#referenz-8 .referenz {
    margin-left: 2.5vw;
    width: 95vw;
}

#referenz-8 h2 {
    margin-left: 7.5vw;
    margin-top: -4.1vh;
    margin-bottom: 1.2rem;
}

#referenz-8 p {
    font-size: 1.2em;
    margin-left: 7.5vw;
    margin-top: 1.5vh;
}

@media (orientation: portrait) {

    #referenz-8  {
        margin-top: 5vh;
    }
}

@media (orientation: portrait) and (min-width: 1000px) {

    #referenz-8  {
        margin-top: 2.5vh;
    }
}

@media (orientation: landscape) {

    #referenz-8  {
        margin-top: 20vh;
    }
}

@media (orientation: landscape) and (min-width: 1000px) {

    #referenz-8  {
        margin-top: 10vh;
    }
}

@media (min-width: 1000px) {

    #referenz-8 .referenz {
        margin-left: 17.5vw;
        width: 65vw;
    }

    #referenz-8 h2 {
        margin-left: 20vw;
    }

    #referenz-8 p {
        font-size: 1.6em;
        margin-left: 20vw;
    }
}

/* ----- ENDE: REFERENZ 8 ----- */

/* ----- ANFANG: INFO ----- */

#continued-soon {
    margin-top: 15vh;
    margin-bottom: 15vh;
    font-size: 2em;
    text-align: center;
}

@media (min-width: 1000px) {

    #continued-soon {
        font-size: 3.3em;
    }
}

/* ----- ENDE: INFO ----- */


/* ----- ANFANG: FOOTER ----- */

.footer {
    margin-top: 5vh;
}

/* ----- ENDE: FOOTER ----- */