
@media screen and (min-device-width: 700px) {

    @font-face {
        font-family: 'Abadi';
        src: url(../Font/AbadiMTStd-ExtraLight.otf);
    }

    * {
        font-family: Abadi;
    }


    a:link {
        text-decoration: none;
        color: #654f4f;
    }

    a:visited {
        color: #654f4f;
    }

    a:hover {
        color: saddlebrown;
    }

    #LogoBild {
        height: 90px;
        padding-left: 20%;
    }


    header.home {
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #f6f7e9;
        width: 100%;
        height: 100px;
        line-height: 34px;
        box-shadow: 0 5px 2px -2px rgba(0, 0, 0, 0.3);
        color: orange;

    }

    header.home1 {
        z-index: 10;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #f6f7e9;
        width: 100%;
        height: 100px;
        line-height: 34px;
        box-shadow: 0 5px 2px -2px rgba(0, 0, 0, 0.3);
        color: orange;
    }

    header.home1:visited {
        color: orange;
    }


    ul.home {
        padding-top: 17px;
        float: right;
        list-style: none;
        padding-right: 21%;

    }



    li.home {

        float: left;
        padding-left: 50px;
        font-size: 1.3vw;
        vertical-align: middle;
        cursor: pointer;
    }

    li.mieten {

    }


    /* ------------------------------------------------------------------------------- */
    body {
        background-color: #f6f7e9;


    }

    dialog::-webkit-scrollbar {
        display: none;
    }

    section.inhalt {
        padding-top: 90px;
    }

    section.links {
        position: fixed;
        width: 20vw;
        float: left;
        height: 100vh;
        background-image: url("../Bilder/Hintergrund.jpg");
        left: 0;
        top: 70px;
        padding-left: 0;
        margin-left: 0;
        z-index: 0;
        padding-right: 0;


    }

    section.rechts {
        position: fixed;
        width: 20vw;
        float: right;
        height: 100vh;
        background-image: url("../Bilder/Hintergrund.jpg");
        right: 0;
        top: 70px;
        z-index: 0;
    }

    section.mitte {
        position: absolute;
        left: 0;
        margin-left: 20vw;
        padding-left: 0;
        width: 60vw;
        box-shadow: -0.2vw 0.4vw 8px 2px rgba(0, 0, 0, 0.8), 0.3vw 0.2vw 8px 2px rgba(0, 0, 0, 0.8);
        z-index: 9;
        background: #f6f7e9;
    }

    .noFooter {
        background-color: #f6f7e9;

    }


    #Titel {
        padding-bottom: 0px;
        margin-bottom: 0;
    }

    #Titelbild {

        margin-left: 0;
        position: relative;
        width: 100%;
        padding-bottom: 0px;
        margin-bottom: 0px;

    }

    #Titeltext {
        color:white;

        letter-spacing:2px;
        font-weight:bold;
        /*font-weight: bold;*/
        position: absolute;
        padding-left: 2%;
        width: 25vw;
        font-size: 2vw;
        top: 60px;
        margin-bottom: -12px;


        /* Bessere Lesbarkeit unter hellen hintergrund */

        text-shadow:
                0.05em 0 black,
                0 0.05em black,
                -0.05em 0 black,
                0 -0.05em black,
                -0.05em -0.05em black,
                -0.05em 0.05em black,
                0.05em -0.05em black,
                0.05em 0.05em black;


        margin-left: 1em;
        padding-top: 0;
        padding-bottom: 0;



    }

    .Überschrift {
        font-size: 2.2vw;
    }

    .center {
        position: relative;
        text-align: center;
    }

    .zusammen {
        margin-bottom: 0px;
    }

    #Titel {

        background-color: #4B5165;
    }

    #impressionen {
        position: sticky;
        padding-top: 30px;
        padding-bottom: 30px;
        text-align: center;
        font-size: 35px;
        top: 100px;
        background-color: #4B5165;
        color: white;
        z-index: 10;
        box-shadow: 0 0.4vw 8px rgba(0, 0, 0, 0.8);
    }

    .trennlinie {
        width: 98%;

    }

    .oben {
        margin-top: 20px;
    }

    .gros {
        font-size: 40px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .infos {
        padding-top: 20px;
        margin-left: 0px;
        float: left;
        list-style-type: none;
        width: 22vw;
    }

    .infos li {
        float: left;
        padding-bottom: 20px;
        font-size: 1.2vw;
        margin-bottom: 20px;

    }

    .quadClass {
        float: right;
        width: 35vw;
        height: 33.9vw;


    }

    .quad {
        width: 15vw;
        float: right;
        margin-right: 30px;
        margin-top: 20px;
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8);
    }

    .textLinks{
        float: left;
    }

    .zweite {
        height: 50vh;
    }

    .kontaktieren {
        font-size: 30px;
    }


    .footer {
        background-color: #404040;

    }

    #favDialog {
        width: 80vw;
        height: 90vh;
    }

    #cancel {
        margin-top: 0px;
        margin-left: 100%;
        padding-right: 14px;
        float: right;
        font-size: 40px;
        cursor: pointer;
    }

    #BildModal {
        position: relative;
        width: 40vw;
        float: left;
        margin-bottom: 20px;
    }

    .BMKlein {
        height: 9.85vw;

    }

    #LinksG1 {
        position: relative;
        width: 20vw;
        float: left;

        left: 0;
        padding-left: 0;
        margin-left: 0;
        z-index: 0;
        padding-right: 0;

    }

    #RechtsG1 {
        position: relative;
        width: 20vw;
        float: left;

        left: 0;
        padding-left: 0;
        margin-left: 0;
        z-index: 0;
        padding-right: 0;

    }

    #BilderModalKleinDiv {
        width: 80vw;
        float: left;
    }


    .impressum {
        font-size: 20px;
        margin-left: 2vw;
        margin-right: 2vw;
    }
    #dontshow{
        display: none;
    }

}
    @media only screen and  (max-device-width: 700px) {
        @font-face {
            font-family: 'Abadi';
            src: url(../Font/AbadiMTStd-ExtraLight.otf);
        }

        * {
            font-family: Abadi;
        }


        a:link {
            text-decoration: none;
            color: #FD6000;
        }

        a:visited {
            color: #FD6000;
        }

        a:hover {
            color: orange;
        }

        #LogoBild {
            height:9vh;
            top: 0px;


        }

        #dontshowmobile{
            display: none;
        }


        header.home {
            z-index: 10;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #f6f7e9;
            width: 100%;
            height: 9vh;
            line-height: 34px;
            box-shadow: 0 5px 2px -2px rgba(0, 0, 0, 0.3);
            color: orange;

        }

        header.home1 {
            z-index: 10;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #f6f7e9;
            width: 100%;
            height: 100px;
            line-height: 34px;
            box-shadow: 0 5px 2px -2px rgba(0, 0, 0, 0.3);
            color: orange;
        }

        header.home1:visited {
            color: orange;
        }


        ul.home {
            padding-top: 17px;
            float: right;
            list-style: none;
            padding-right: 21%;
            display: none;
        }

        li.home {

            float: left;
            padding-left: 50px;
            font-size: 1.3vw;
            vertical-align: middle;
            cursor: pointer;
        }

        li.mieten {

        }



        html,
        body {
            height: 100%;
            margin: 0;
        }

        .dropdown {
            position: relative;
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        .dropbtn {
            float: right;
            color: black;
            padding: 10px;
            font-size: 50px;
            border: none;
            cursor: pointer;

            margin-top: 67px;
           margin-right: 40px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f6f7e9;
            width: 100%;
            height: 700px;
            margin-top: -14px;
            padding-top: 20px;
        }

        .dropdown-content a {


            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            font-size: 50px;
            line-height: 140px;
        }

        .dropdown.active .dropdown-content {
            display: block;
        }




        /* ------------------------------------------------------------------------------- */
        body {
            background-color: #f6f7e9;


        }

        section.inhalt {
            padding-top: 170px;
        }

        section.links {
            position: fixed;
            width: 20vw;
            float: left;
            height: 100vh;
            background-image: url("../Bilder/Hintergrund.jpg");
            left: 0;
            top: 70px;
            padding-left: 0;
            margin-left: 0;
            z-index: 0;
            padding-right: 0;
            display: none;


        }

        section.rechts {
            position: fixed;
            width: 20vw;
            float: right;
            height: 100vh;
            background-image: url("../Bilder/Hintergrund.jpg");
            right: 0;
            top: 70px;
            z-index: 0;
            display: none;
        }

        section.mitte {
            position: absolute;
            left: 0;
            box-shadow: -0.2vw 0.4vw 8px 2px rgba(0, 0, 0, 0.8), 0.3vw 0.2vw 8px 2px rgba(0, 0, 0, 0.8);
            z-index: 9;
            width: 100%;
        }

        .noFooter {
            background-color: #f6f7e9;

        }


        #Titel {
            padding-bottom: 0px;
            margin-bottom: 0;
        }

        #Titelbild {
            margin-left: 0;
            position: relative;
            width: 100%;
            padding-bottom: 0px;
            margin-bottom: 0px;
            margin-top: 10px;
            content: url("../Bilder/TitelBildHandy.jpg");
            filter: brightness(70%);


        }

        #Titeltext {
            position: absolute;
            padding-left: 2%;
            font-size: 80px;
            color: whitesmoke;
            top: 60px;
            margin-bottom: -12px;

        }


        .center {
            position: relative;
            text-align: center;
        }

        #Titel {
            background-color: #4B5165;
        }

        #impressionen {

            padding-top: 40px;
            padding-bottom: 40px;
            text-align: center;
            font-size: 50px;
            top: 100px;
            background-color: #4B5165;
            color: white;
            z-index: 10;
            box-shadow: 0 0.4vw 8px rgba(0, 0, 0, 0.8);
        }

        .trennlinie {
            width: 90%;

        }

        .oben {
            margin-top: 30px;
        }
        .oben2{
            margin-top: 40px;
        }

        .gros {
            font-size: 90px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .infos {
            padding-top: 20px;
            margin-left: 50px;
            float: left;
        }

        .infos li {
            list-style-type: disc;
            padding-bottom: 20px;
            font-size: 60px;
            margin-bottom: 20px;
        }

        .quadClass {
            align-content: center;
            float: left;
            width: 35vw;
            height: 33.9vw;
            margin-bottom: 10px;



        }

        .quad {
            width: 30vw;
            align-content: center;
            margin-right: 30px;
            margin-top: 0px;

            box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.8);
            display: none;
        }

        #BildGallery{
            display: block;
            margin-left: 35vw;
        }

        .zweite {
            height: 50vh;
        }

        .kontaktieren {
            font-size: 30px;
        }


        .footer {
            background-color: #404040;

        }

        #favDialog {
            width: 80vw;
            height: 90vh;
        }

        #cancel {
            margin-top: 0px;
            margin-left: 100%;
            padding-right: 14px;
            float: right;
            font-size: 40px;
            cursor: pointer;
        }

        #BildModal {
            position: relative;
            width: 40vw;
            float: left;
            margin-bottom: 20px;
        }



        #LinksG1 {
            position: relative;
            width: 20vw;
            float: left;

            left: 0;
            padding-left: 0;
            margin-left: 0;
            z-index: 0;
            padding-right: 0;

        }

        #RechtsG1 {
            position: relative;
            width: 20vw;
            float: left;

            left: 0;
            padding-left: 0;
            margin-left: 0;
            z-index: 0;
            padding-right: 0;

        }

        #BilderModalKleinDiv {
            width: 70vw;
        }


        .impressum {
            font-size: 20px;
            margin-left: 2vw;
            margin-right: 2vw;
        }
        #rest{
            font-size: 50px;
        }
        #p1 , #p2, #BildModal{
            display: none;
        }
        .BMKlein{
            height: 590px;
        }


    }



