@media only screen and (max-width: 390px) {
    .modal-text1 {
        font-size: 18px;
    }  
}


@media only screen and (max-width: 430px) {
    
    /* massage/Preise */

    .ham-menu, .ham-menu2 {
        display: block;
    }

    .menu {
        display: none;
    }
    .menu ul {
        width: 100%;
    }
    .menu li {
        border-bottom: 1px solid black;
    }
    .ham-menu {
        padding: 10px 15px;
    }
    .menu-active {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .menu li a:hover {
        transition: 0.3s;
        color: red;
    }

    .menu2 {
        display: none;
    }
    .menu2 ul {
        width: 100%;
    }
    .menu2 li {
        border-bottom: 1px solid black;
    }
    .ham-menu2 {
        padding: 10px 15px;
    }
    .menu-active2 {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .menu li a:hover {
        transition: 0.3s;
        color: red;
    }

    .logo {
        height: 150px;
        width: 150px;
        margin: -35px;
    }
    #img1 {
        height: 400px;
    }
    .imgbox {
        flex-direction: column;
    }
    .imgbox2, .imgbox3 {
        width: 100%;
    }
    #img2 {
        width: 100%;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .massagebox , .massagebox2 {
        flex-direction: column-reverse;
    }
    #massageimg {
        width: 100%;
        height: 200px;
    }
    .preisbox {
        display: grid;
        grid-template:none;
    }
    .footer {
        flex-direction: column;
    }
    .foottext1, .foottext2 {
        text-align: center;
    }
    .box1 , .box2 {
        width: 95%;
        margin-left: auto;
        margin-right: auto; 
    }
    .box2 {
        margin-top: 10%;
    }
    .menubar {
        padding:0 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        
        /* width: fit-content; */
    }
    .menutab {
        display: contents;
        right: 10px;
    }
    .menutab2 {
        display: contents;
        right: 10px;
    }
    .menubar2 {
        padding:0 15px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    #baner {
        display: flex;
    }
    #baner2 {
        display: flex;
    }
    .modal-page {
        min-width: 90%;
        max-width: 95%;
        max-height: 500px;
        padding: 10px;
    }
    .modalimg {
        width: 170px;
        height: 170px;
    }
    #mdd-name {
        margin: 10px;
    }
    .btn {
        margin-top: 0;
    }
    .modaldes-detail {
        margin: 1% 2%;
    }
    .textx2 {
        font-size: 35px;
    }
    .textx3 {
        font-size: 20px;
    }

    /* kontakt */

    .konimg {
        width: 100%;
        height: 300px;
    }
    .konbild {
        width: 90%;
        height: 300px;
    }

    /* startseite */
    
    .textxphoto {
        flex-direction: column-reverse;
    }
    #xphoto, .photox {
        width: 95%;
        height: 350px;
        margin-top: 5%;
    }
    .textx {
        width: 100%;
    }

    /* datenschutz */
    .kontext1 {
        font-size: 26px;
        margin: 0 2%;
        text-align: center;
    }
    .textxtext {
        font-size: 15px;
        margin: 0 2%;
        text-align: center;
    }
    .textxtext li {
        width: fit-content;
    }
    .foottext3 {
        margin-left: auto;
        margin-right: auto;
    }
    .textbox {
        font-size: 35px;
    }
    .textbox2 {
        font-size: 20px;
    }
}

@media only screen and (min-width: 431px) {
    .ham-menu, .ham-menu2 {
        display: none;
    }
    #massageimg {
        width: 100%;
        height: 450px;
    }
    /* body {
        margin: 0;
        padding: 0;
        background-color: #f1e8b8e0 !important;
        color: black !important;
    } */
}

@media only screen and (max-width: 950px) {
    
    /* Startseite */
    .textxphoto {
        flex-direction: column-reverse;
    }
    .photox {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .textx {
        width: auto;
    }
    .textx2, .textx3 {
        display: flex;
        justify-content: center;
    }



    /* Massage/Preise */
    .imgbox {
        flex-direction: column;
    }
    .imgbox2, .imgbox3 {
        width: 100%;
    }
    #img2 {
        width: 100%;
        /* height: 800px; */
    }
    /* #img3 {
        height: 400px;
    } */
    .massagebox , .massagebox2 {
        flex-direction: column-reverse;
        align-items: center;
    }
    /* #massageimg {
        width: 100%;
        height: 450px;
    } */
    .box1 , .box2 {
        width: 95%;
    }
    .box2 {
        margin-top: 10%;
    }
    .preisbox {
        display: grid;
        grid-template:none;
    }
    #mdd-name {
        margin: 10px;
    }
}