/* Big/small screen / big tablet / from 760px */
@media (min-width: 810px) {

    /*!* --------------------BLOCKS--------------------- *!*/
    /*BLOCK 1*/
    .titelpicverlauf {
        position: absolute;
        width: 100%;
    }

    div.titleInkas {
        position: absolute;
        font-weight: bold;
        top: 3em;
        font-size: 2.5em;
        color: white;
        line-height: 1em;
        text-align: right;
        right: 1em;

        div {
            padding-bottom: 1rem;
        }
    }

    .carousel-item img {
        height: 75vh;
    }

    #secondTitleImage {
        position: relative;
        width: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }

    #thirdTitleImage {
        position: relative;
        width: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }

    #potentialeSlide {
        z-index: 3;
        position: absolute;
        color: white;
        top: 10em;
        font-size: 1.6em;
        line-height: 1em;
        font-weight: bold;
        left: 2.5em;
    }


    #btnpotentaile {
        position: absolute;
        top: 30em;
        left: 7em;
    }

    #komplettloesung {
        z-index: 3;
        position: absolute;
        color: white;
        top: 12em;
        font-size: 1.6em;
        line-height: 1em;
        font-weight: bold;
        left: 3em;
    }


    #btnkomplettloesung {
        position: absolute;
        top: 35.2em;
        left: 8.5em;
    }

    #fourthTitleImage {
        position: relative;
        width: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }

    #webinarSlide {
        z-index: 3;
        position: absolute;
        color: white;
        top: 9.8em;
        font-size: 1.8em;
        line-height: 1em;
        font-weight: bold;
        left: 2.5em;
    }

    #webinarTekst {
        z-index: 3;
        position: absolute;
        color: white;
        top: 15em;
        font-size: 1.3em;
        line-height: 1em;
        left: 3.5em;
        font-family: DINNextLTPro-Regular, serif, serif;
    }

    #btnwebinar {
        position: absolute;
        top: 35.3em;
        left: 7.7em;
    }


    #fifthTitleImage {
        position: relative;
        width: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }

    #optimierungSlide {
        z-index: 3;
        position: absolute;
        color: white;
        top: 7.8em;
        font-size: 1.8em;
        line-height: 1em;
        font-weight: bold;
        left: 2.5em;
    }

    #optimierungTekst {
        z-index: 3;
        position: absolute;
        color: white;
        top: 12.5em;
        font-size: 1.3em;
        line-height: 1em;
        left: 3.5em;
        font-family: DINNextLTPro-Regular, serif, serif;
    }


    #btnoptimierung {
        position: absolute;
        top: 30em;
        left: 7.7em;
    }

    /*!*BLOCK 2*!*/
    #blockTwo {
        padding-top: 0.5em;
    }

    .kundenbauen {
        display: block;
        text-align: center;
        font-weight: bold;
    }

    #kundenLogos {
        display: block;
        text-align: center;
        position: relative;
        margin: 1em 0;

        a {
            width: auto;
            display: contents;
        }
    }

    .clientLogo {
        margin: 0.7em 2em;
        height: 2em;
        transition: transform 0.3s ease;
        filter: grayscale(100%);


        &:hover {
            transform: scale(1.05);
            filter: grayscale(0%);

        }
    }

    #hermaLogo {
        height: 1.5em;
    }

    #individuell {
        background-color: #1E1E1E;
        color: white;
        padding: 6em;
        display: block;
    }

    #individuellTekst {
        width: 26em;
        display: block;
    }

    #btnindividuell {
        background-color: white;
        color: #0A2E4E;
        margin-top: 1.5em;
    }

    .videodiv {
        position: absolute;
        left: 30em;
        margin-top: 4em;
    }

    #myvideo {
        position: absolute;
        width: 21.5em;
        z-index: 3;
        left: 4.2em;
        top: 4.2em;
    }

    #laptop {
        position: absolute;
        width: 30em;
        top: 2em;

    }

    #effizientdiv {
        display: flex;
        padding: 4em 8em;
        position: relative;
    }

    #effizientLogos {
        flex: 1;
        width: 40em;
        position: relative;
        display: block;
    }

    .effizientLogo {
        width: 6em;
        display: block;
    }

    .effizientTekst {
        font-size: 0.7em;
        width: 10em;
        display: block;
        text-align: center;
    }

    #reichweite {
        position: relative;
        left: 9em;
        top: 1em;
    }

    #vetriebserfolg {
        position: relative;
        top: 1em;
    }

    #durchlaufzeit {
        position: relative;
        top: 2em;
        left: 10em;
    }

    #effizientTekst {
        width: 30em;
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    #btneffizient {
        margin-top: 1.5em;
    }


    .blockThree {
        display: flex;
        position: relative;
        z-index: 10;
    }

    #blockThreeMobile {
        display: none
    }

    .box {
        position: relative;
        width: 33.33%;
    }

    .imgBox {
        width: 100.5%
    }

    .imgHideBox {
        position: absolute;
        width: 100%;
    }

    .boxTekst {
        position: absolute;
        z-index: 4;
        font-size: 1.7em;
        color: white;
        font-weight: bold;
        left: 4.5em;
        top: 1em;
    }

    .boxIcon {
        position: absolute;
        z-index: 4;
        left: 40%;
        top: 4.8em;
        height: 4.5em;
    }


    .animated {
        animation-name: transform;
        animation-duration: 4s;
        animation-fill-mode: forwards;
        pointer-events: none;
    }

    @keyframes transform {
        from {
            right: 0;
        }
        to {
            right: 80em;
        }
    }

    .animatedClose {
        animation-name: transformClose;
        animation-duration: 4s;
        animation-fill-mode: forwards;
        pointer-events: none;
    }

    @keyframes transformClose {
        from {
            right: 80em;
        }
        to {
            right: 0;
        }
    }

    .pointerOn {
        pointer-events: auto;
    }

    #hideshow {
        position: relative;
    }

    .blockThreeOnShow {
        position: absolute;
        top: 0;
        display: flex;
    }

    .boxTekstBlock {
        width: 67%;
        background-color: #3B5870FF;
        color: white;
        padding: 4em;
    }

    .boxTekstBlock h6 {
        font-weight: bold;
    }

    .boxTekstBlock p {
        font-size: 0.7em;
        width: 30em;
    }

    #configutregif {
        width: 30em;
        margin-left: 5em;
        margin-top: 3em;
    }

    .closeBox {
        position: absolute;
        color: white;
        font-weight: bold;
        right: 1em;
        top: 0.6em;
        cursor: pointer;
    }

    .blockFour {
        display: flex;
        padding: 6em;
    }

    #system {
        flex: 1;
    }

    #systemTekst {
        display: block;
        width: 30em;
    }

    #btnsystem {
        margin-top: 2em;
    }

    .systemImage {
        width: 35em;
    }

    .picwebanwendung {
        position: relative;
        width: 100%;
    }


    .picwebanwendungverlauf {
        position: absolute;
        width: 100%;
    }

    .verlaufpic {
        position: absolute;
        display: block;
        width: 67%;
        height: 80%;
        margin-top: -18em;
        left: 5em;
    }

    .webtext {
        position: relative;
        width: 50%;
        top: -15em;
        left: -11em;
        padding: 4em;
    }

    h2.webtitle {
        color: white;
        font-size: 3.3em;
        line-height: 1.2em;
        font-family: DINNextLTPro-Regular, serif;
        text-shadow: 0.313rem 0.313rem 0.625rem rgba(0, 0, 0, 0.3);
        width: 6em;
    }

    h3.webtitle2 {
        color: white;
        font-size: 1.4em;
        line-height: 1.5;
        position: relative;
    }

    #btnwebanwendung {
        margin-top: 2em;
    }

    .blockSix {
        display: flex;
        position: relative;
        padding-left: 6em;
        padding-right: 6em;
        padding-bottom: 10em;
    }


    #einfachTekst {
        display: block;
        width: 30em;
    }

    #einfachLogo {
        position: absolute;
        left: 39em;
        width: 14em;
        top: 5em;

    }

    .circle {
        position: absolute;
        background-color: #1E1E1E;
        border-radius: 50%;
        height: 5em;
        text-align: center;
        width: 5em;
        margin-right: 1.5em;
        color: white;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .circle span {
        font-size: 0.7em;
        display: block;
        margin-top: 1.8em;
    }

    #circle1 span {
        margin: 2.8em;
    }

    #circle3 span {
        margin: 1.8em;
    }

    #circle4 span {
        margin: 1.8em;
    }

    #circle5 span {
        margin: 1.2em;
        margin-right: 1.4em;
    }

    #circle1 {
        top: 12em;
        left: 32em;
    }

    #circle2 {
        top: 4em;
        left: 32em;
    }

    #circle3 {
        top: -2em;
        left: 38em;
    }

    #circle4 {
        top: -6em;
        left: 45em;
    }

    #circle5 {
        top: -2em;
        left: 52em;
    }

    #circle6 {
        top: 4em;
        left: 56em;
    }

    #btneinfach {
        margin-top: 1.5em;
    }

    #faq {
        padding-bottom: 3em;

        article {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }


        i {
            padding: 0.5rem;
            color: #176FC0;
        }

        h1 {
            font-size: 40px;
            text-align: center;
        }


        div {
            display: flex;
            flex-direction: column;
        }

        h2 {
            cursor: pointer;
            padding: 1rem;
            margin: 0;
            width: auto;
            font-size: 0.8rem;
            font-weight: 600;
        }

        h3 {
            display: none;
            padding: 0 1rem 1rem 1rem;
            margin: 0;
            font-size: 0.65em;
        }

        .active h3 {
            display: block;
        }

        div article {
            box-shadow: 10px 20px 15px rgba(192, 192, 192, 0.59);
            border-radius: 0.5rem;
            width: 20rem;
            display: inline;
            margin: 1rem;
        }
    }

    #auszeichnung {
        background-color: #1E1E1E;
        color: white;
        padding: 2em 3em 2em 8em;
    }

    .auszeichnungLogo {
        padding-top: 1em;
        width: 7em;
        margin-right: 4em;
    }

    #bestenliste {
        width: 4em;
    }

    #blocThreeMobile {
        display: none;
    }
}

/* MOBILE*/

@media (max-width: 809px) {

    .carousel-item img {
        height: 50vh;
    }

    .titleInkas {
        position: absolute;
        font-weight: bold;
        top: 6em;
        font-size: 4em;
        color: white;
        line-height: 1.5em;
        text-align: right;
        right: 1em;
    }

    #secondTitleImage {
        width: 100%;
        object-fit: cover;
        filter: brightness(0.6);
    }

    #thirdTitleImage {
        width: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }

    #potentialeSlide {
        z-index: 3;
        position: absolute;
        color: white;
        top: 10em;
        font-size: 4em;
        line-height: 1em;
        font-weight: bold;
        left: 2em;
    }

    #btnpotentaile {
        position: absolute;
        top: 22.5em;
        left: 4.5em;
    }


    #komplettloesung {
        z-index: 3;
        position: absolute;
        color: white;
        font-size: 4em;
        line-height: 1em;
        font-weight: bold;
        left: 2.2em;
        top: 3.5em;
    }

    #btnkomplettloesung {
        position: absolute;
        top: 9.5em;
        left: 4.5em;
    }

    #fourthTitleImage {
        width: 100%;
        object-fit: cover;
        filter: brightness(0.7);
    }

    #webinarSlide {
        z-index: 3;
        position: absolute;
        color: white;
        top: 11em;
        font-size: 3em;
        line-height: 1em;
        font-weight: bold;
        left: 4em;
    }

    #webinarTekst {
        z-index: 3;
        position: absolute;
        color: white;
        top: 15em;
        font-size: 2.5em;
        line-height: 1em;
        left: 4.8em;
        font-family: DINNextLTPro-Regular, serif, serif;
    }

    #btnwebinar {
        position: absolute;
        top: 21em;
        left: 6em;
    }

    #fifthTitleImage {
        width: 100%;
        object-fit: cover;
        filter: brightness(0.6);
    }

    #optimierungSlide {
        z-index: 3;
        position: absolute;
        color: white;
        top: 12em;
        font-size: 3em;
        line-height: 1em;
        font-weight: bold;
        left: 4em;
    }

    #optimierungTekst {
        z-index: 3;
        position: absolute;
        color: white;
        top: 13.5em;
        font-size: 3em;
        line-height: 1em;
        left: 4em;
        font-weight: bold;
        font-family: DINNextLTPro-Regular, serif, serif;
    }

    #btnoptimierung {
        position: absolute;
        top: 22em;
        left: 6em;
    }

    /*!*BLOCK 2*!*/
    #blockTwo {
        padding-top: 6em;
    }

    .kundenbauen {
        display: block;
        text-align: center;
        font-weight: bold;
    }

    #kundenLogos {
        display: block;
        text-align: center;
        margin-bottom: 7em;
    }

    .clientLogo {
        margin: 2em;
        height: 5em;
        transition: transform 0.3s ease;
        filter: grayscale(100%);

        &:hover {
            transform: scale(1.05);
            filter: grayscale(0%);

        }
    }


    #hermaLogo {
        height: 2.5em;
    }

    #individuell {
        background-color: #1E1E1E;
        color: white;
        padding: 6em;
        padding-bottom: 14em;
        display: block;
    }

    #individuellTekst {
        display: block;
    }

    #btnindividuell {
        background-color: white;
        color: #1E1E1E;
        margin-top: 1.5em;
    }

    .videodiv {
        position: absolute;
        left: 24em;
        margin-top: 39em;
    }

    #myvideo {
        position: absolute;
        width: 28.8em;
        z-index: 3;
        left: 5.5em;
        top: 5em;
    }

    #laptop {
        position: absolute;
        width: 40em;
        top: 2em;

    }

    #effizientdiv {
        padding: 6em;
        padding-top: 10em;
        position: relative;
    }

    #effizientLogos {
        position: relative;
        display: flex;
    }

    .effizientLogo {
        width: 16em;
        display: block;
    }

    .effizientTekst {
        font-size: 1.8em;
        width: 10em;
        display: block;
        text-align: center;
    }

    #reichweite {
        position: relative;
        margin-right: 1em;
    }

    #vetriebserfolg {
        position: relative;
        margin-right: 2em;
    }

    #durchlaufzeit {
        position: relative;

    }

    #effizient {
        padding-top: 8em;
    }

    #effizientTekst {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    #btneffizient {
        margin-top: 1.5em;
    }

    .blockThree {
        display: none;
    }

    #blockThreeMobile {
        z-index: 10;
        display: block;
        position: relative;
    }

    .box {
        display: none;
    }

    .imgBox {
        display: none;
    }


    .boxTekst {
        position: absolute;
        z-index: 4;
        font-size: 2em;
        color: white;
        font-weight: bold;
        top: 0.5em;
    }

    .boxIcon {
        position: absolute;
        display: block;
        text-align: center;
        z-index: 4;
        top: 5em;
        height: 6em;
    }


    #hideshow {
        position: relative;
    }

    .blockThreeOnShow {
        position: absolute;
        top: 0;
        z-index: 12;
    }

    .boxTekstBlock {
        background-color: #3B5870FF;
        color: white;
        padding: 6em;
        height: 80vh;
    }

    .boxTekstBlock h6 {
        font-weight: bold;
        font-size: 3.3em;
    }

    .boxTekstBlock p {
        font-size: 2.2em;
        width: 20em;
    }

    #configutregif {
        width: 54em;
        margin-top: 6em;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .closeBox {
        position: absolute;
        color: white;
        font-weight: bold;
        right: 1em;
        top: 0.6em;
        cursor: pointer;
        font-size: 3em;
    }

    .blockFour {
        padding: 6em;
    }

    #system {
    }

    #systemTekst {
        display: block;
    }

    #btnsystem {
        margin-top: 4em;
    }

    .systemImage {
        width: 55em;
    }


    .blockFive {
        position: relative;
    }

    .picwebanwendung {
        position: relative;
        width: 100%;
        height: 35vh;
        object-fit: cover;
    }


    .picwebanwendungverlauf {
        position: absolute;
        width: 100%;
        height: 35vh;
        object-fit: cover;
        left: 0;
    }

    .verlaufpic {
        position: absolute;
        display: block;
        width: 80%;
        margin-top: -18em;
        left: 5em;
    }

    .webtext {
        position: relative;
        top: -17em;
        margin-left: 4em;
        padding: 4em;
        width: 30em;
    }

    h2.webtitle {
        color: white;
        font-size: 6em;
        line-height: 1.2em;
        font-family: DINNextLTPro-Regular, serif;
        text-shadow: 0.313rem 0.313rem 0.625rem rgba(0, 0, 0, 0.3);
        width: 6em;
    }

    h3.webtitle2 {
        color: white;
        font-size: 3.4em;
        line-height: 1.5;
        position: relative;
        width: 10em;
    }

    #btnwebanwendung {
        margin-top: 0.5em;
    }

    .blockSix {
        position: relative;
        padding-left: 6em;
        padding-right: 6em;
        padding-bottom: 10em;
    }


    #einfachTekst {
        display: block;
    }

    #einfachLogo {
        position: relative;
        left: 10em;
        width: 33em;
        margin-top: 20em;
    }

    .circle {
        position: absolute;
        background-color: #1E1E1E;
        border-radius: 50%;
        height: 10em;
        text-align: center;
        width: 10em;
        margin-right: 1.5em;
        color: white;
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    #mobilemensch {
        position: relative;
    }

    .circle span {
        font-size: 1.4em;
        display: block;
        margin-top: 1.8em;
    }

    #circle1 span {
        margin: 2.8em;
    }

    #circle3 span {
        margin: 1.8em;
    }

    #circle4 span {
        margin: 1.8em;
    }

    #circle5 span {
        margin: 1.2em;
        margin-right: 1.4em;
    }

    #circle1 {
        top: 38em;
    }

    #circle2 {
        top: 25em;
    }

    #circle3 {
        top: 12em;
        left: 7em;
    }

    #circle4 {
        top: 4em;
        left: 19em;
    }

    #circle5 {
        top: 7em;
        left: 33em;
    }

    #circle6 {
        top: 17em;
        left: 44em;
    }


    #btneinfach {
        margin-top: 1.5em;
    }

    #faq {
        padding: 3em;

        h1 {
            font-size: 24px;
            text-align: center;
        }

        article {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;


            div article {
                box-shadow: 10px 10px 30px rgba(192, 192, 192, 0.59);
                border-radius: 0.5rem;
                width: auto;
                display: inline;
                margin: 1rem;
                background-color: white;
                color: #0A2E4E;

            }

            .faq-frage-title {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }


        div {
            display: flex;
            flex-direction: column;
        }

        h2 {
            cursor: pointer;
            padding: 3rem;
            margin: 0;
            width: auto;
            font-size: 3em;
            font-weight: 500;
            font-family: DINNextLTPro-Regular, sans-serif;
        }


        h3 {
            display: none;
            padding: 0 3rem 3rem 3rem;
            margin: 0;
            font-size: 2.7em;
            text-align: left;
        }

        .active h3 {
            display: block;
        }


        div article {
            box-shadow: 10px 20px 15px rgba(192, 192, 192, 0.59);
            border-radius: 0.5rem;
            width: 20rem;
            display: inline;
            margin: 1rem;
        }
    }

    #auszeichnung {
        background-color: #1E1E1E;
        color: white;
        padding: 4em;
    }

    .auszeichnungLogo {
        padding-top: 1em;
        width: 8.1em;
        margin-right: 4em;
    }

    #bestenliste {
        width: 5em;
    }

    swiper-container {
        width: 100%;
        height: 100%;
        --swiper-theme-color: white;
    }

    swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    swiper-slide .imgBack {
        display: block;
        width: 100%;
        height: 80vh;
        object-fit: cover;
    }

}