/* Extra small screen / smartphone / 280px to 479px  (759px tablet+big smartphone)*/
@media (max-width: 519px) {

    html {
        font-size: 3.5vw;
        scroll-behavior: smooth;
    }


    body {
        font-family: DINNextLTPro-Light, serif;
        overflow-x: hidden;
    }

    #all {
        overflow-x: hidden;
    }

    .container-fluid {
        padding: 0;
    }

    .language {
        position: fixed;
        right: 5em;
        z-index: 20;
        font-size: 1em;
        text-decoration: none;
        color: white;
        top: 0.5em;
        cursor: pointer;
    }

    #de {
        position: fixed;
        right: 1em;
        z-index: 20;
        font-size: 1em;
        text-decoration: none;
        color: white;
        top: 0.5em;
        cursor: pointer;
    }


    /* --------------------Side Nav--------------------- */
    .sidenav {
        height: 100%; /* Full-height: remove this if you want "auto" height */
        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 20; /* Stay on top */
        top: 10em; /* Stay at the top */
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 4em;

    }

    .dropdown {
        overflow: hidden;
        position: relative;
        padding-top: 0.07em;

    }


    .dropdown-content {
        position: relative;
        margin-left: 0;
        opacity: 0;
        visibility: hidden;
        float: left;
        font-size: 0;
        width: 0;
        height: 2em;
        background-color: white;
        transition: visibility 0.5s, width 0.6s, margin-left 0.5s, opacity 0.5s, background-color;
        overflow: hidden;
    }


    .dropdown-content.a, .dropdown-content:hover a {
        color: white;
        text-decoration: none;
        padding-top: 1.7em;
        line-height: 1.6em;

    }

    .dropbtn {
        position: relative;
        background-color: #1E1E1E;
        width: 2.5em;
        height: 2.5em;
        float: left;
        margin: 0.01em;
        box-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.20);

    }

    .navi1 {
        height: 1.3em;
        margin-right: 0.4em;
        margin-left: 0.5em;
    }

    .navi2 {
        height: 1.3em;
        margin-right: 0.4em;
        margin-left: 0.5em;
    }

    .navi3 {
        height: 1.3em;
        margin-right: 0.4em;
        margin-left: 0.5em;
    }

    .navi4 {
        height: 1.1em;
        margin-right: 0.4em;
        margin-left: 0.5em;
    }

    .navi5 {
        height: 1.1em;
        margin-right: 0.4em;
        margin-left: 0.5em;
    }

    .dropbtn img {
        position: relative;
        width: 2em;
        left: 0.3em;
        top:0.3em;
    }

    .kundenerfnav img {
        width: 2.3em;
        margin-left: -0.2em;
    }

    .dropdown:hover .drop1 {
        display: block;
        color: white;
        background-color: #176FC0;
        width: auto;
        font-size: 1.2em;
        overflow: hidden;
        visibility: visible;
        opacity: 1;
        padding: 0.3em;
        text-decoration: none;
        margin-left: -0.2em;

    }

    .we {
        margin-left: 0.5em;
        margin-right: 0.5em;
        float: left;
    }

    .drop1 a {
        margin-left: 1em;
    }

    .dropdown:hover .drop2 {
        display: block;
        color: white;
        background-color: #176FC0;
        width: auto;
        font-size: 1.2em;
        margin-left: -0.2em;
        visibility: visible;
        opacity: 1;
        padding: 0.3em;
        text-decoration: none;
    }

    .drop2 a {
        margin-left: 1em;
    }

    .dropdown:hover .drop3 {
        display: block;
        background-color: #176FC0;
        width: auto;
        font-size: 1.2em;
        margin-left: -0.2em;
        visibility: visible;
        opacity: 1;
        padding: 0.3em;
        color: white;
        text-decoration: none;
    }

    .drop3 a {
        margin-left: 1em;
    }

    .dropdown:hover .drop4 {
        display: block;
        background-color: #176FC0;
        width: auto;
        font-size: 1.2em;
        margin-left: -0.2em;
        visibility: visible;
        opacity: 1;
        padding: 0.3em;
        color: white;
        text-decoration: none;
    }

    .drop4 a {
        margin-left: 1em;
    }

    .dropdown:hover .drop5 {
        display: block;
        background-color: #176FC0;
        width: auto;
        font-size: 1.2em;
        margin-left: -0.2em;
        visibility: visible;
        opacity: 1;
        padding: 0.3em;
        color: white;
        text-decoration: none;
    }

    .drop5 a {
        margin-left: 1em;
    }

    .dropdown:hover .dropbtn {
        visibility: hidden;
    }

    /* ---GOOGLE ANALYTICS----- */
    .analytics {
        position: fixed;
        top: 10em;
        left: 2em;
        z-index: 100;
        width: 25em;
        height: 32em;
        background: #053157;

    }

    .analyticsafter {
        display: none;
    }


    .antext {
        position: absolute;
        font-size: 1.3em;
        color: white;
        margin-left: 2.5em;
        padding-top: 3em;
        width: 15em;

    }

    .allowbtn {
        position: absolute;
        left: 1.7em;
        top: 9.5em;
        font-size: 1.8em;
        background: white;
        border: white;
        color: #053157;
        height: 2.2em;
        width: 11em;
        font-family: DINNextLTPro-Regular, serif;
    }

    .deaktibtn {
        position: absolute;
        left: 1.7em;
        top: 13em;
        font-size: 1.8em;
        background: #053157;
        border: #053157;
        color: white;
        height: 2.2em;
        width: 11em;
        font-family: DINNextLTPro-Regular, serif;
    }

    /*BLOCKS*/
    /*BLOCK1*/
    .block1 {
        position: relative;
        width: 100%;
    }

    .etklogo {
        position: absolute;
        z-index: 20;
        width:8em;
        right: 0.1em;
        bottom: 0.5em;
    }

    .titlepicverlauf{
        position: absolute;
        z-index: 19;
        height: 100%;
    }
    .titlepic {
        object-fit: cover;
        object-position: right 50em bottom 0;
        height: 45em;
    }

    .titletext{
        position: relative;
        z-index: 20;
    }

    .titletext1 {
        position: absolute;
        color: white;
        font-size: 2.5em;
        text-align: center;
        padding-top: 0.45em;
        left: 1.6em;
        top: 8em;
        font-family: DINNextLTPro-Regular, serif;
    }

    .titletext2 {
        font-family: DINNextLTPro-Light, serif;
        position: absolute;
        color: white;
        width: 10em;
        padding-top: 0.45em;
        left: 2em;
        top: 12em;
    }

    .block2 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: 5em;
        padding-bottom: 10em;
    }

    .waskanntitle {
        position: relative;
        font-family: DINNextLTPro-Light, serif;
        color: #1E1E1E;
        width: 70%;
        font-size: 2.2em;
    }

    .waskanntext {
        position: relative;
        color: #1E1E1E;
        font-family: DINNextLTPro-Light, serif;
        top:1em;
        width: 70%;
        display: block;
        font-size: 1.1em;
        float: left;
    }

    .waskannpic {
        position: relative;
        width: 16em;
        top:6em;
    }

    .btnETK {
        position: relative;
        background-color: #1E1E1E;
        color: white;
        border: none;
        cursor: pointer;
        font-family: DINNextLTPro-Light, serif;
        padding: 0.3em;
        width: 8em;
        top: 4em;
        left: -14em;
        font-size: 0.8em;
        margin: 0.5em;
    }

    .block3{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 5em 0;
    }

    .sparentitle {
        position: relative;
        font-family: DINNextLTPro-Light, serif;
        color: #1E1E1E;
        width: 9em;
        left: 1.5em;
        font-size: 2.5em;
    }


    .sparentext {
        position: relative;
        color: #1E1E1E;
        font-family: DINNextLTPro-Light, serif;
        top:1em;
        left: 3.5em;
        width: 70%;
        display: block;
        font-size: 1.1em;

    }

    .sparenpic {
        position: relative;
        width: 20em;
    }

    #btnDownload {
        position: relative;
        margin: 5em;
        margin-bottom: 0;
        width: 12em;
    }

    .block4 {
        position: relative;
        color: white;
        padding-top: 2em;
        padding-bottom: 2em;
        height: 50em;
        background-color: #1E1E1E;
    }


    .alletext{
        position: absolute;
        background-color: #176FC0;
        color: white;
        width: 7em;
        text-align: center;
        left: 1em;
        font-size: 3.6em;
        font-family: DINNextLTPro-Regular, serif;
        z-index: 2;
    }

    #lorange{
        position: relative;
        width: 26em;
        top: 15em;
        left: 2em;
    }
    .user {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:1em;
    }

    .user > img {
        width: 7em;
    }

    .fuerKunden{
        top:8em;
        left: 4em;
    }

    .fuerInstandshalter {
        top:8em;
        right: 4em;
    }

    .fuerErsatzteilAnbieter {
        bottom:8em;
        left: 3em;
    }

    .fuerServicetechniker {
        bottom:8em;
        right: 3em;
    }


    .mood {
        position: relative;
    }
    .moodContainer {
        position: absolute;
        z-index: 20;
        top:20em;
        left: 4em;
        display: flex;
        flex-direction: column;
        width: 18em;
    }

    .titlepicverlaufMood{
            position: absolute;
            object-fit: contain;
            height: 74.2em;
            width: 100%;
    }

    .moodPic {
        object-fit: cover;
        object-position: right 25em bottom 0;
        height: 45em;
    }

    .moodtext1{
        color: white;
        font-size: 2.2em;
        font-family: DINNextLTPro-Regular, serif;
    }

    .btnMood {
        background-color: #176FC0;
        color: white;
        border: none;
        cursor: pointer;
        font-family: DINNextLTPro-Light, serif;
        padding: 0.3em;
        width: 8em;
        font-size: 1em;
    }

    .block5 {
        position: relative;
        padding-top: 3em;
        padding-bottom: 2em;
        color: #1E1E1E;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    h1.weitvor {
        margin-bottom: 1.6em;
        font-family: DINNextLTPro-Light, serif;
        width: 8em;
        font-size:2.4em;
    }

    .vorteile {

    }

    .vorteile > div {
        padding-bottom: 3em;
display: flex;
    flex-direction: column;
    align-items: center;
        gap: 2em;
    }


    .vorpic {
        height: 6em;
    }


    ul.wy {
        list-style-type: disc;
        font-size: 1.1em;
        font-family: DINNextLTPro-Light, serif;
        line-height: 1.4em;
        position: relative;


    }

    .vorli {
        margin-bottom: 1.6em;
    }

    .block6 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        font-family: DINNextLTPro-Light, serif;
    }

    .bubble {
        position: relative;
        width: 12em;
    }

    .videodiv{
        position: relative;
        top: 4em;
        width: 100%;
    }

    #rectangle {
        position: relative;
        left: 1em;
        width: 25em;
    }

    #myvideo{
        position: absolute;
        left: 2em;
        top: 0.5em;
        border-radius: 0.5em;
        width: 23em;
    }

    .testimonialTitle {
        position: relative;
        margin-top:3em;
        left: 1em;
        color: #1E1E1E;
        font-size: 3.4em;
    }

    .testimonial {
        position: relative;
        color: #1E1E1E;
        width: 24em;
        height: 17em;
        margin-top: 1em;
        margin-left: 4em;
    }

    .testimonialtext{
        position: relative;
        display: block;
        width: 20em;
        font-size: 1.05em;
    }

    .testimonialUntr {
        position: relative;
        color: #a5a2a6;
        float: right;
        margin-top: 2em;
        margin-right: 4em;
        font-size: 0.8em;
        font-family: DINNextLTPro-Light, serif;
    }



    #kontakt-formular-footer {
        background: linear-gradient(rgba(25, 33, 41, 0.68), rgba(25, 33, 41, 0.68)),
        bottom no-repeat url('../items/Kontakt_background.jpg');
        height: auto;
    }

    #kontakt {
        margin-top: 5em;
        display: flex;
        color: white;
        padding: 3em;
        justify-content: space-evenly;
        align-content: center;
        gap: 2em;
        flex-direction: column;


        #ihrAnsprechpartner {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        img {
            width: 111px;
            border-radius: 50%;
        }

        h2 {
            font-size: 16px;
            font-weight: bold;
        }

        #ansprechpartnerKontakt {

            h4 {
                font-size: 16px;
                margin: 0;
                font-weight: bold;

                a {
                    color: white;
                    text-decoration: underline;
                }
            }

            div {
                margin-bottom: 0.5rem;

                img {
                    width: 2.5rem;
                }
            }
        }

        .contact-image-name {
            display: flex;
            align-items: center;
            gap: 2rem;
            margin: 2rem 0;
        }

        #ansprBild {
            width:  8em;
            height: 9em;
        }

        .name-title {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            h4 {
                font-weight: bold;
                font-family: DINNextLTPro-Regular, serif;
            }
        }

    }

    #formular {
        position: relative;
        background: white;
        color: #1E1E1E;
        font-size: 16px;
        padding: 2em;

        h1 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 2rem;
            font-family: DINNextLTPro-Regular, serif;

        }

        h4 {
            color: #1E1E1E;
            font-size: 12px;
            margin-left: 1.8em;
            padding-top: 1.5em;
            width: 17em;

        }

        #formu {
            position: relative;
            display: flex;
            flex-direction: column;

            label {
                font-size: 16px;
                font-family: DINNextLTPro-Regular, serif;
                font-weight: bold;
            }

            input {
                border: none;
                background-color: white;
                color: grey;
                border-bottom: 0.1em solid grey;
                margin-bottom: 2em;
            }

            textarea {
                border: none;
                border-bottom: 0.1em solid grey;
            }
        }

        button {
            position: relative;
            background-color: #1E1E1E;
            color: white;
            padding: 0.5em 0.7em;
            border: none;
            border-radius: 1rem;
            cursor: pointer;
            margin-top: 2.5em;


        }
    }

    #formularafter {
        position: relative;
        background: white;
        color: #1E1E1E;
        font-size: 16px;
        padding: 4em;
        text-align: center;

        h1 {
            font-size: 20px;
            font-weight: 400;
        }

        h2 {
            font-size: 16px;
            font-weight: 400;
        }

        #after-formular-img {
            width: 10em;
            border-radius: 0;
            padding: 2em;
        }
    }

    #impressum {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        padding-bottom: 1em;

        h2 {
            margin-bottom: 1em;
            width: 20%;
            color: white;
            margin-top: 9em;
            margin-left: 20em;
            font-size: 0.6em;
        }

        h4 {
            margin-left: 20em;
            font-size: 0.6em;
            color: white;
            width: 14em;
            line-height: 0.5em;
        }

        img {
            width: 10em;
        }

        #footer-links {
            a {
                color: white;
                text-decoration: underline;
                font-size: 14px;
                font-weight: 400;
            }
        }

    }


    #privacypolicyblock {
        padding: 5em 1em;
        width: auto;

        h1 {
            font-size: 2em;
        }

        h2 {
            font-size: 1.5em;
        }

        h3 {
            font-size: 1.2em;
        }
    }

    #privacypolicytext {
        font-size: 1.2em;
        line-height: 1.5
    }

}