@charset "UTF-8";


/* ----- ANFANG: ALLGEMEINE STYLES FÜR PAKETE---- */

section {
    margin-left: 7.5vw;
    margin-right: 7.5vw;
}

article li {
    font-family: "Raleway Light", "SansSerif", sans-serif;
    font-size: 0.9em;
    line-height: 1.6em;
    list-style-type: "-";
    padding-left: 0.5rem;
    margin-left: 0.6rem;
}

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

.text {
    font-size: 2.2rem;
}

.hinweis {
    max-width: 40rem;
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.hinweis a {
    text-decoration: underline;
}

p.paketpreis {
    font-family: "Oswald ExtraLight", "SansSerif", sans-serif;
    font-size: 3.6rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.paketpreis span {
    position: absolute;
    font-family: "Raleway Light", "SansSerif", sans-serif;
    font-size: 0.9rem;
    margin-top: 1.2rem;
    margin-left: 0.5rem;
}

.paket-details-wrapper {
    max-width: 40rem;
}

.paket-details-wrapper div:nth-of-type(2) {
    margin-top: 1.5rem;
}

.paket-zubuchung-wrapper {
    margin-top: 2.5rem;
    margin-bottom: 3.6rem;
}

.zubuchbar-details {
    font-family: "Oswald ExtraLight", "SansSerif", sans-serif;
    font-size: 1.5rem;
}

p.zubuchbar-paketpreis {
    font-family: "Oswald ExtraLight", "SansSerif", sans-serif;
    font-size: 2.2rem;
}

.zubuchbar-paketpreis span {
    position: absolute;
    font-family: "Raleway Light", "SansSerif", sans-serif;
    font-size: 0.9rem;
    margin-top: 0.52rem;
    margin-left: 0.5rem;
}

@media (min-width: 450px) {

    article li, p {
        font-size: 1em;
        line-height: 1.7em;
    }

    .paketpreis span {
        font-size: 1rem;
        margin-top: 1.1rem;
    }

    .zubuchbar-paketpreis span {
        font-size: 1rem;
    }
}

@media (min-width: 600px) {

    article li, p {
        font-size: 1.2em;
        line-height: 1.8em;
    }

    .text {
        font-size: 2.5em;
    }

    .paketpreis span {
        font-size: 1.2rem;
    }

    .zubuchbar-paketpreis span {
        font-size: 1.2rem;
    }
}

@media (min-width: 800px) {

    .text {
        font-size: 2.8em;
    }

    p.paketpreis {
        font-size: 4rem;
    }
}

@media (min-width: 1000px) {

    .text {
        font-size: 3.2em;
    }
}

@media (min-width: 1100px) {

    .hinweis {
        width: 56rem;
        max-width: unset;
    }

    .paket-details-wrapper {
        width: 56rem;
        max-width: unset;
        display: grid;
        grid-template-columns: 24rem 28rem;
        grid-column-gap: 4rem;
    }

    .paket-details-wrapper div:nth-of-type(2) {
        margin-top: 0;
    }
}

@media (min-width: 1400px) {

    .text {
        font-size: 3.4rem;
    }
}

/* ----- ENDE: ALLGEMEINE STYLES FÜR PAKETE ----- */

/* ----- ANFANG: PAKETE ----- */

#einstieg-pakete {
    margin-left: 0;
    margin-top: 2.5vh;
}

#einstieg-pakete h1 {
    margin-left: 17.5vw;
    padding-top: 0.7em;
    font-size: 2.2em;
    line-height: 1.2em;
}

#einstieg-pakete-img {
    display: block;
    height: 105vw;
    width: 75vw;
    margin-left: 17.5vw;
    background-image: url("../img/pakete_einstieg_S.jpg");
    background-position: 30% top;
    background-size: cover;
    position: relative;
    margin-top: 10vh;
}

#einstieg-pakete-notiz {
    width: 18em;
    text-align: left;
    position: absolute;
    left: calc(8.75vw - 0.5em);
    transform: rotate(-90deg);
    transform-origin: left top;
}

@media (min-width: 350px) {

    #einstieg-pakete h1 {
        font-size: 2.5em;
    }
}

@media (min-width: 450px) {

    #einstieg-pakete h1 {
        font-size: 2.8em;
    }
}

@media (min-width: 600px) {

    #einstieg-pakete h1 {
        font-size: 3em;
    }

    #einstieg-pakete-img {
        background-image: url("../img/pakete_einstieg_L.jpg");
    }
}

@media (min-width: 700px) {

    #einstieg-pakete h1 {
        margin-left: 20vw;
        font-size: 3.2em;
    }

    #einstieg-pakete-img {
        height: 43vw;
        width: 70vw;
        margin-left: 20vw;
    }

    #einstieg-pakete-notiz {
        left: calc(94vw - 0.5em);
    }
}

@media (min-width: 800px) {

    #einstieg-pakete h1 {
        font-size: 3.5em;
    }
}

@media (min-width: 1000px) {

    #einstieg-pakete h1 {
        font-size: 4em;
    }
}

@media (min-width: 1200px) {

    #einstieg-pakete h1 {
        font-size: 4.6em;
    }
}

@media (min-width: 1400px) {

    #einstieg-pakete h1 {
        font-size: 5em;
    }
}

/* ----- ENDE: PAKETE ----- */

/* ----- ANFANG: DESIGN ----- */

#design h2 {
    margin-top: 6rem;
}

/* ----- ENDE: DESIGN ----- */

/* ----- ANFANG: ENTWICKLUNG ----- */

#entwicklung h2 {
    margin-top: 8rem;
}

#entwicklung .paket-zubuchung-wrapper p:nth-of-type(3) {
    margin-top: 2.2rem;
}

@media (min-width: 800px) {

    #entwicklung h2 {
        margin-top: 10rem;
    }

    #entwicklung .paket-zubuchung-wrapper {
        display: grid;
        grid-template-columns: max-content max-content;
        grid-column-gap: 6rem;
    }

    #entwicklung .paket-zubuchung-wrapper p:nth-of-type(3) {
        margin-top: 0;
    }

    #entwicklung .paket-zubuchung-wrapper .zubuchbar-details {
        grid-row: 1;
    }

    #entwicklung .paket-zubuchung-wrapper .zubuchbar-paketpreis {
        grid-row: 2;
    }
}

/* ----- ENDE: ENTWICKLUNG ----- */

/* ----- ANFANG: WORDPRESS ----- */

#referenzen-img {
    display: block;
    height: 158vw;
    width: 79vw;
    margin-left: 15vw;
    background-image: url("../img/pakete-referenzen-S.jpg");
    background-position: center center;
    background-size: cover;
    position: relative;
    margin-top: 20vh;
}

#referenzen-pakete-notiz {
    width: 20em;
    text-align: left;
    position: absolute;
    left: calc(8.75vw - 0.5em);
    transform: rotate(-90deg);
    transform-origin: left top;
}

#wordpress h2 {
    margin-top: 5rem;
}

#wordpress-details {
    max-width: 25rem;
    margin-bottom: 3.6rem;
}

#wordpress .button {
    position: relative;
    z-index: 20;
}

@media (min-width: 500px) {

    #referenzen-img {
        height: 63vw;
        width: 94vw;
        margin-left: 3vw;
        background-image: url("../img/pakete-referenzen-L.jpg");
        margin-top: 15vh;
    }

    #referenzen-pakete-notiz {
        left: 50vw;
        margin-top: 5vw;
        margin-left: -10em;
        margin-right: auto;
        transform: none;
    }

    #wordpress h2 {
        margin-top: 8rem;
    }
}

@media (min-width: 600px) {

    #referenzen-pakete-notiz {
        left: 0;
        margin-top: -7vw;
        margin-left: 7.5vw;
    }
}

@media (min-width: 1000px) {

    #referenzen-img {
        height: 54vw;
        width: 80vw;
        margin-left: 18vw;
    }

    #referenzen-pakete-notiz {
        margin-left: 21.5vw;
    }
}

/* ----- ENDE: WORDPRESS ----- */

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

#referenzen {
    position: relative;
    z-index: 10;
    text-align: right;
    margin-top: 6rem;
    margin-bottom: 4rem;
}

#referenzen h2 {
    font-size: 2.8rem;
    margin-bottom: 2.5rem;
}

#referenzen-details {
    padding-left: calc(85vw - 23rem);
    margin-bottom: 3.6rem;
}

#referenzen .button {
    position: relative;
    left: calc(85vw - 9rem);
}

@media (min-width: 500px) {

    #referenzen {
        margin-top: 5rem;
        margin-bottom: 3rem;
    }
}

@media (min-width: 600px) {

    #referenzen h2 {
        font-size: 3.1rem;
    }
}

@media (min-width: 800px) {

    #referenzen {
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    #referenzen h2 {
        font-size: 3.4rem;
    }
}

@media (min-width: 1000px) {

    #referenzen {
        margin-top: -2rem;
    }

    #referenzen h2 {
        font-size: 3.8rem;
    }
}

@media (min-width: 1400px) {

    #referenzen h2 {
        font-size: 4rem;
    }
}

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

/* ----- ANFANG: EINSTIEG KONTAKT ----- */

#pakete #kontakt-daten {
    padding-top: 2rem;
}

#pakete #kontakt-daten h2 {
    font-size: 2.8rem;
    text-align: left;
    margin-left: 0;
    margin-bottom: 2.5rem;
}

#pakete #kontakt-daten-details {
    margin-left: 0;
    margin-bottom: 3.6rem;
}

@media (min-width: 600px) {

    #pakete #kontakt-daten h2 {
        font-size: 3.1rem;
    }
}

@media (min-width: 800px) {

    #pakete #kontakt-daten h2 {
        font-size: 3.4rem;
    }
}

@media (min-width: 1000px) {

    #pakete #kontakt-daten h2 {
        font-size: 3.8rem;
    }
}

@media (min-width: 1400px) {

    #pakete #kontakt-daten h2 {
        font-size: 4rem;
    }
}

/* ----- ENDE: EINSTIEG KONTAKT ----- */