@charset "UTF-8";

/* ----- ANFANG: START ----- */

#start-box {
    padding-top: 3em;
}

/* ----- ENDE: START ----- */

/* ----- ANFANG: E-MAIL-MARKETING ----- */

#e-mail-marketing {
    position: relative;
    z-index: 10;
    width: 98vw;
    min-height: 100vh;
    margin-top: 1vw;
    margin-left: 1vw;
    background-image: url("../img/emails_1.jpg");
    background-size: cover;
    background-position: left center;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

#e-mail-marketing-box {
    position: relative;
    z-index: 20;
    top: 0;
    right: 0;
    margin-right: 3.5vw;
    margin-bottom: 6vw;
    padding: 4em;
    background: #FFFFFF;
}

#e-mail-marketing-box .logo {
    display: block;
    height: 120px;
    width: 338px;
    margin-bottom: 2em;
}

#e-mail-marketing-box p {
    float: left;
    width: 15.5em;
    font-size: 1.4em;
    line-height: 1.3em;
}

#e-mail-marketing p:first-of-type {
    padding-right: 1em;
}

#e-mail-marketing-box p:last-of-type {
    padding-left: 1em;
}

@media (orientation: portrait) {

    #e-mail-marketing {
        justify-content: center;
        align-items: center;
    }

    #e-mail-marketing-box {
        right: auto;
        margin-right: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 1000px) {

    #e-mail-marketing-box {
        padding: 7vw;
    }

    #e-mail-marketing-box p {
        font-size: 1.05em;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 700px) {
    #start-box {
        padding-top: 1.5em;
    }
}

@media (orientation: portrait) and (max-width: 700px) {

    #e-mail-marketing {
        width: 100vw;
        min-height: 120vh;
        margin-left: 0;
        margin-top: calc(-45vh + 8em);
        justify-content: center;
        align-items: center;
    }

    #e-mail-marketing-box {
        right: auto;
        margin-left: 0;
        margin-top: 5vh;
        padding: 10vw;
    }

    #e-mail-marketing-box .logo {
        position: relative;
        left: 50%;
        margin-left: -103px;
        height: 73px;
        width: 206px;
    }

    #e-mail-marketing-box p {
        width: 13em;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    #e-mail-marketing p:first-of-type {
        padding-right: 0;
        margin-bottom: 2em;
    }

    #e-mail-marketing-box p:last-of-type {
        padding-left: 0;
    }
}

@media (orientation: landscape) and (max-height: 550px) {

    #e-mail-marketing {
        min-height: 155vh;
        margin-top: calc(1vw + 10em);
    }

    #e-mail-marketing-box .logo {
        height: 73px;
        width: 206px;
    }
}

@media (orientation: landscape) and (max-height: 550px) and (max-width: 700px) {

    #e-mail-marketing {
        justify-content: center;
        align-items: center;
        margin-top: calc(1vw + 8em);
    }

    #e-mail-marketing-box {
        right: auto;
        margin: 0;
        padding: 2em;
    }

    #e-mail-marketing-box .logo {
        position: relative;
        left: 50%;
        margin-left: -103px;
        height: 73px;
        width: 206px;
    }

    #e-mail-marketing-box p {
        width: 23em;
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    #e-mail-marketing p:first-of-type {
        padding-right: 0;
        margin-bottom: 2em;
    }

    #e-mail-marketing-box p:last-of-type {
        padding-left: 0;
    }
}

/* ----- ENDE: E-MAIL-MARKETING ----- */

/* ----- ANFANG: VORTEILE ----- */

.logo-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 7vh;
    margin-bottom: 0.5em;
}

#vorteile .logo {
    width: 243px;
    height: 160px;
}

#vorteile h2 {
    text-align: center;
    color: #17254B;
    padding-bottom: 1.5em;
}

#vorteile-details div {
    font-size: 1.5em;
    line-height: 1.4em;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 2em;
}

#vorteile-details div#rechtssicher {
    padding-right: 10vw;
}

#vorteile-details {
    width: 98vw;
    margin-left: 1vw;
    display: grid;
    grid-template-columns: 23.75vw 23.75vw 23.75vw 23.75vw;
    grid-gap: 1vw;
}

#volumen {
    grid-column: 1;
    grid-row:    1;
    background: #17254B;
    color: #FFFFFF;
    height: 23.75vw;
}

#vorteile-img-1 {
    grid-column: 2;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 100%;
    height: 48.5vw;
    object-fit: cover;
}

#partnernetzwerk {
    grid-column: 3;
    grid-row:    1;
    background: #CC7422;
    color: #FFFFFF;
    height: 23.75vw;
}

#vorteile-img-2 {
    grid-column: 4;
    grid-row: 1;
    width: 100%;
    height: 23.75vw;
    object-fit: cover;
}

#flexibel {
    grid-column: 1;
    grid-row: 2;
    background: #4E8DD8;
    color: #FFFFFF;
    height: 23.75vw;
}

#rechtssicher {
    grid-column: 3 / span 2;
    grid-row: 2;
    background: #7B2937;
    color: #FFFFFF;
    height: 23.75vw;
}

#vorteile-img-3 {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    height: 23.75vw;
    object-fit: cover;
}

#streuverluste {
    grid-column: 2;
    grid-row: 3;
    background: #17254B;
    color: #FFFFFF;
    height: 23.75vw;
}

#vorteile-img-4 {
    grid-column: 3;
    grid-row: 3;
    width: 100%;
    height: 23.75vw;
    object-fit: cover;
}

#professionell {
    grid-column: 4;
    grid-row: 3;
    background: #4E8DD8;
    color: #FFFFFF;
    height: 23.75vw;
}

#hochleistungssoftware {
    grid-column: 1;
    grid-row: 4;
    background: #7B2937;
    color: #FFFFFF;
    height: 23.75vw;
}

#vorteile-img-5 {
    grid-column: 2;
    grid-row: 4;
    width: 100%;
    height: 23.75vw;
    object-fit: cover;
}

#tests {
    grid-column: 3;
    grid-row: 4;
    background: #CC7422;
    color: #FFFFFF;
    height: 23.75vw;
}

#erfolgskontrolle {
    grid-column: 4;
    grid-row: 4;
    background: #362746;
    color: #FFFFFF;
    height: 23.75vw;
}


@media (max-width: 1000px) {

    #vorteile .logo {
        width: 152px;
        height: 100px;
    }
}

@media (max-width: 1280px) {

    #vorteile-details div {
        font-size: 1.2em;
        line-height: 1.4em;
        padding: 0.5em;
    }
}

@media (max-width: 950px) {

    #vorteile-details div {
        font-size: 1em;
        line-height: 1.2em;
    }
}

@media (max-width: 750px) {

    #vorteile-details div {
        font-size: 1.2em;
        line-height: 1.4em;
    }

    #vorteile-details {
        grid-template-columns: 48.5vw 48.5vw;
    }

    #volumen {
        grid-column: 1;
        grid-row:    1;
        height: 48.5vw;
    }

    #vorteile-img-1 {
        grid-column: 2;
        grid-row-start: 1;
        grid-row-end: 3;
        width: 100%;
        height: 98vw;
        object-fit: cover;
    }

    #partnernetzwerk {
        grid-column: 1;
        grid-row:    3;
        height: 48.5vw;
    }

    #vorteile-img-2 {
        grid-column: 2;
        grid-row: 3;
        width: 100%;
        height: 48.5vw;
        object-fit: cover;
    }

    #flexibel {
        grid-column: 1;
        grid-row: 2;
        height: 48.5vw;
    }

    #rechtssicher {
        grid-column: 1 / span 2;
        grid-row: 4;
        height: 48.5vw;
    }

    #vorteile-img-3 {
        grid-column: 1;
        grid-row: 5;
        width: 100%;
        height: 48.5vw;
        object-fit: cover;
    }

    #streuverluste {
        grid-column: 2;
        grid-row: 5;
        height: 48.5vw;
    }

    #vorteile-img-4 {
        grid-column: 1;
        grid-row: 7;
        width: 100%;
        height: 48.5vw;
        object-fit: cover;
    }

    #professionell {
        grid-column: 2;
        grid-row: 7;
        height: 48.5vw;
    }

    #hochleistungssoftware {
        grid-column: 1;
        grid-row: 6;
        height: 48.5vw;
    }

    #vorteile-img-5 {
        grid-column: 2;
        grid-row: 6;
        width: 100%;
        height: 48.5vw;
        object-fit: cover;
    }

    #tests {
        grid-column: 1;
        grid-row: 8;
        height: 48.5vw;
    }

    #erfolgskontrolle {
        grid-column: 2;
        grid-row: 8;
        height: 48.5vw;
    }
}

@media (max-width: 600px) {

    #vorteile-details div {
        font-size: 1em;
    }
}

@media (max-width: 370px) {

    #vorteile-details div {
        font-size: 0.9em;
    }
}

/* ----- ENDE: VORTEILE ----- */

/* ----- ANFANG: VORTEILE DETAILS 2 ----- */

#vorteile-img-6 {
    display: block;
    position: relative;
    width: 100vw;
    z-index: -10;
    margin-top: -5vw;
    object-fit: cover;
}

#vorteile-details-2 {
    display: flex;
    justify-content: center;
    padding-top: 5em;
}

#vorteile-details-2 p {
    float: left;
    font-size: 1.4em;
    line-height: 1.3em;
    margin-bottom: 5em;
}

#vorteile-details-2 p:first-of-type {
    width: 14em;
    margin-right: 5vw;
}

#vorteile-details-2 p:nth-of-type(2) {
    width: 12em;
    margin-left: 5vw;
    margin-right: 5vw;
}

#vorteile-details-2 p:nth-of-type(3) {
    width: 13em;
    margin-left: 5vw;
}

@media (orientation: landscape) {

    #vorteile-img-6 {
        height: 65vh;
    }
}

@media (max-width: 1200px) {

    #vorteile-details-2 p:first-of-type {
        margin-right: 1.5vw;
    }

    #vorteile-details-2 p:nth-of-type(2) {
        margin-left: 1.5vw;
        margin-right: 1.5vw;
    }

    #vorteile-details-2 p:nth-of-type(3) {
        margin-left: 1.5vw;
    }
}

@media (max-width: 1000px) {

    #vorteile-details-2 p {
        font-size: 1.05em;
    }
}

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

    #vorteile-img-6 {
        height: 110vh;
        width: auto;
    }

    #vorteile-details-2 {
        margin-top: -95vh;
        padding-top: 0;
    }

    #vorteile-details-2 p {
        float: none;
        margin-top: 3em;
        margin-bottom: 1em;
    }

    #vorteile-details-2 p:first-of-type {
        width: 80vw;
        margin-right: 0;
    }

    #vorteile-details-2 p:nth-of-type(2) {
        width: 80vw;
        margin-left: 0;
        margin-right: 0;
    }

    #vorteile-details-2 p:nth-of-type(3) {
        width: 80vw;
        margin-left: 0;
    }
}

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

    #vorteile-img-6 {
        height: 170vh;
        width: auto;
    }

    #vorteile-details-2 {
        margin-top: -130vh;
        padding-top: 0;
    }

    #vorteile-details-2 p {
        width: 80vw;
        float: none;
        margin-top: 3em;
        margin-bottom: 1em;
    }

    #vorteile-details-2 p:first-of-type {
        width: 80vw;
        margin-right: 0;
    }

    #vorteile-details-2 p:nth-of-type(2) {
        width: 80vw;
        margin-left: 0;
        margin-right: 0;
    }

    #vorteile-details-2 p:nth-of-type(3) {
        width: 80vw;
        margin-left: 0;
    }
}

/* ----- ENDE: VORTEILE DETAILS 2 ----- */

/* ------ ANFANG: ÜBER UNS ----- */

#ueber-uns-img {
    position: relative;
    z-index: 10;
    width: 80vw;
    height: 75vh;
    margin-left: 20vw;
    margin-bottom: 40vh;
    object-fit: cover;
    object-position: center center;
}

#ueber-uns-details {
    position: relative;
    display: block;
    z-index: 30;
    padding: 7em 7em 5em 7em;
    background: #CC7422;
    color: #FFFFFF;
    margin-top: -60vh;
    width: 59em;
    height: 31em;
}

#ueber-uns-details p {
    width: 13em;
    padding-bottom: 2em;
    float: left;
    display: block;
}

#ueber-uns-details p:first-of-type {
    margin-right: 1.1em;
}

#ueber-uns-details p:last-of-type {
    margin-left: 1.1em;
}

#ueber-uns-details h2 {
    color: #FFFFFF;
    text-align: left;
}

#ueber-uns-details p {
    font-size: 1.5em;
    line-height: 1.4em;
}

@media (orientation: landscape) and (max-width: 1400px) {

    #ueber-uns-details {
        padding-left: 5em;
        padding-right: 5em;
        padding-top: 5em;
        padding-bottom: 4em;
        width: 55em;
        height: 28em;
    }
}

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

    #ueber-uns-img {
        display: block;
        width: 100vw;
        margin-top: 30vh;
        margin-left: 0;
        margin-bottom: 0;
    }

    #ueber-uns-details {
        position: relative;
        width: 80vw;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: -20vh;
        padding: 4em 4em 2em 4em;
    }

    #ueber-uns-details h2 {
        font-size: 1.3em;
    }

    #ueber-uns-details p {
        float: none;
        font-size: 1.1em;
        width: 60vw;
    }

    #ueber-uns-details p:first-of-type {
        margin-right: 0;
    }

    #ueber-uns-details p:last-of-type {
        margin-left: 0;
    }
}

@media (orientation: portrait) {

    #ueber-uns-img {
        width: 80vw;
        height: 40vh;
    }

    #ueber-uns-details {
        margin-top: -55vh;
    }
}

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

    #ueber-uns-img {
        display: block;
        width: 100vw;
        margin-top: 10vh;
        margin-left: 0;
        margin-bottom: 0;
    }

    #ueber-uns-details {
        position: relative;
        width: 70vw;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: -20vh;
        padding: 4em 4em 2em 4em;
    }

    #ueber-uns-details h2 {
        font-size: 1.3em;
    }

    #ueber-uns-details p {
        float: none;
        font-size: 1.1em;
        width: auto;
    }

    #ueber-uns-details p:first-of-type {
        margin-right: 0;
    }

    #ueber-uns-details p:last-of-type {
        margin-left: 0;
    }
}

@media (orientation: portrait) and (max-width: 550px) {

    #ueber-uns-details {
        padding-left: 2.5em;
        padding-right: 2.5em;
        padding-top: 2.5em;
        padding-bottom: 1em;
    }

   #ueber-uns-details p {
       width: auto;
    }
}

@media (orientation: portrait) and (max-width: 400px) {

    #ueber-uns-details {
        width: 85vw;
    }
}

/* ------ ENDE: ÜBER UNS ----- */

/* ------ ANFANG: MEHR ERREICHEN ----- */

#mehr-erreichen-details {
    position: relative;
    z-index: 20;
    margin-top: 10em;
    width: 50vw;
    margin-left: 50vw;
}

#mehr-erreichen-details h2 {
    color: #DA2125;
    text-align: left;
}

#mehr-erreichen-details p {
    font-size: 1.4em;
    line-height: 1.3em;
    margin-bottom: 2.5em;
    padding-right: 5vw;
}

#mehr-erreichen-details a:link,
#mehr-erreichen-details a:visited {
    color: #FFFFFF;
}

#mehr-erreichen-details a:focus,
#mehr-erreichen-details a:hover,
#mehr-erreichen-details a:active {
    color: #FFFFFF;
}

#mehr-erreichen-img {
    display: block;
    width: 100vw;
    height: 100vh;
    max-height: 650px;
    background: url("../img/papierboot.jpg");
    background-size: cover;
    background-position: left top;
}

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

    #mehr-erreichen-details {
        width: 80vw;
        margin-left: 10vw;
        margin-bottom: 2em;
    }

    #mehr-erreichen-details p {
        font-size: 1.05em;
        padding-right: 0;
    }
}

@media (orientation: portrait) {

    #mehr-erreichen-details {
        width: 80vw;
        margin-left: 10vw;
        margin-bottom: 2em;
    }

    #mehr-erreichen-details p {
        font-size: 1.05em;
        padding-right: 0;
    }
}

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

    #mehr-erreichen-img {
        width: 100vw;
        height: 50vh;
    }
}

/* ------ ENDE: MEHR ERREICHEN ----- */