/* Buttons for Panorama Resort © admotion */



#booking { float: left; margin: 0px 50px 0px 0px; width: 25px; height: 28px; background: url(../images/booking.png) no-repeat scroll 0 3px; background-size: 25px 25px; }
#gutschein { float: left; margin: 0px 28px 0px 0px; width: 35px; height: 35px; background: url(../images/gutscheine.png) no-repeat scroll 8px 6px; background-size: 19px 22px; border-radius: 50%; border: 1px solid #ebeae1; }
#email { float: left; margin: 0px 15px 0px 0px; width: 35px; height: 35px; background: url(../images/email.png) no-repeat scroll 6px 8px; background-size: 20px 20px; border-radius: 50%; border: 1px solid #ebeae1; }
#telephone { cursor: pointer; margin: 0px 15px 0px 0px; float: left; width: 35px; height: 35px; background: url(../images/telephone.png) no-repeat scroll 8px 7px; background-size: 20px 21px; border-radius: 50%; border: 1px solid #ebeae1; }

#gutscheine-mobile { margin: 0px 0px 15px 0px; padding: 0px 0px 0px 40px; background: url(../images/gutscheine-black.png) no-repeat scroll 0 0; background-size: 25px 27px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078; font-size: 17px; font-weight: 400; }
#email-mobile { margin: 0px 0px 15px 0px; padding: 0px 0px 0px 40px; background: url(../images/email-black.png) no-repeat scroll 0 2px; background-size: 25px 22px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078; font-size: 17px; font-weight: 400; }
#telephone-mobile { padding: 0px 0px 0px 40px; background: url(../images/telephone-black.png) no-repeat scroll 0 0; background-size: 25px 27px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078; font-size: 17px; font-weight: 400; }


.readmore { border: 1px solid #838078; padding: 9px 20px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078; font-size: 17px; font-weight: 400; margin: 0px 0px 20px 0px !important; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; font-family: 'Lato', sans-serif; line-height: 160%; background: none; }

.buttons { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 20px; }
.buttons p { margin: 0px;}
#buttons { position: fixed; bottom: 90px; right: 10px; z-index: 9999; }
#buttons p { margin: 0; }

#button-wellness { background-color: #838078; background-image: url(../images/wellness.png); background-repeat: no-repeat; background-position: center; width: 60px; height: 60px; background-size: 40px 26px; border-radius: 35px; cursor: pointer; margin: 0px; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; margin: 10px 0px 0px 0px;  position: relative; animation: slide2 4s ease-out;}

#button-tischreservation { background-color: #838078; background-image: url(../images/tischreservation.png); background-repeat: no-repeat; background-position: center; width: 60px; height: 60px; background-size: 30px 29px; border-radius: 35px; cursor: pointer; margin: 0px; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; margin: 10px 0px 0px 0px;  position: relative; animation: slide2 4s ease-out;}

#button-seminar { background-color: #838078; background-image: url(../images/seminaranfrage.png); background-repeat: no-repeat; background-position: center; width: 60px; height: 60px; background-size: 30px 28px; border-radius: 35px; cursor: pointer; margin: 0px; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; margin: 10px 0px 0px 0px; position: relative; animation: slide2 4s ease-out; }


#button-buchen { background-color: #838078; background-image: url(../images/booking.png); background-repeat: no-repeat; background-position: center; width: 60px; height: 60px; background-size: 25px 25px; border-radius: 35px; cursor: pointer; margin: 0px; -webkit-transition: background-color .5s ease-out; -moz-transition: background-color .5s ease-out; -o-transition: background-color .5s ease-out; transition: background-color .5s ease-out; margin: 10px 0px 0px 0px; position: relative; animation: slide2 4s ease-out; }

#button-livechat:hover { background-color: #b9b89a; }
#button-wellness:hover { background-color: #b9b89a; }
#button-tischreservation:hover { background-color: #b9b89a; }
#button-seminar:hover { background-color: #b9b89a; }
#button-buchen:hover { background-color: #b9b89a; }




@keyframes slide1 {
    0% { opacity: 0; right: -100px; }
    50% { opacity: 0; right: -100px; }
    80% {opacity: 1; right: 0;}
    100% {opacity: 1; right: 0;}
}

@keyframes slide2 {
    0% { opacity: 0; right: -100px; }
    70% { opacity: 0; right: -100px; }
    100% {opacity: 1; right: 0;}
}




.multiple-buttons { display: flex; flex-wrap: wrap;  margin: 20px 0px 0px 0px; column-gap: 20px; row-gap: 10px;}
.multiple-buttons .button { margin: 0px;}
.button { border: 1px solid #838078; padding: 7px 15px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078; font-size: 15px; font-weight: 400; margin: 20px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; font-family: 'Lato', sans-serif; line-height: 160%; background: none; }
.button:hover { background-color: #838078; color: #ffffff !important; }


.button-restaurant { border: 1px solid #838078; padding: 5px 15px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078; font-size: 17px; font-weight: 400; margin: 10px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; font-family: 'Lato', sans-serif; line-height: 160%; background: none; }
.button-restaurant:hover { background-color: #838078; color: #ffffff !important; }




.buchen { background-color: #838078; background-image: url(../images/booking.png); background-repeat: no-repeat; background-position: 15px 10px; background-size: 28px 28px; padding: 10px 15px 10px 55px; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff !important; font-size: 17px; font-weight: 400; margin: 20px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }
.gutschein { background-color: #838078; background-image: url(../images/gutscheine.png); background-repeat: no-repeat; background-position: 15px 10px; background-size: 28px 28px; padding: 10px 15px 10px 55px; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff !important; font-size: 17px; font-weight: 400; margin: 20px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }
.tisch { background-color: #838078; background-image: url(../images/tisch.png); background-repeat: no-repeat; background-position: 15px 10px; background-size: 28px 28px; padding: 10px 15px 10px 55px; text-transform: uppercase; letter-spacing: 0.04em; color: #ffffff !important; font-size: 17px; font-weight: 400; margin: 20px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }

.buchen-negativ { background-color: #f9f9f5; background-image: url(../images/booking-violett.png); background-repeat: no-repeat; background-position: 15px 10px; background-size: 28px 28px; padding: 10px 15px 10px 55px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078 !important; font-size: 17px; font-weight: 400; margin: 20px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }
.buchen-negativ:hover { background-color: #838078; color: #ffffff !important; background-image: url(../images/booking.png); background-position: 15px 10px; background-repeat: no-repeat; background-size: 28px 28px; }
.buchen-negativ:hover a { color: #838078 !important; }


.buchen-neutral { background-color: #f9f9f5; padding: 9px 15px 7px 15px; text-transform: uppercase; letter-spacing: 0.04em; color: #838078 !important; font-size: 17px; font-weight: 400; margin: 20px 0px 0px 0px; display: inline-block; -webkit-transition: background-color 500ms ease-out; -moz-transition: background-color 500ms ease-out; -o-transition: background-color 500ms ease-out; transition: background-color 500ms ease-out; }
.buchen-neutral:hover { background-color: #838078; color: #ffffff !important; }
.buchen-neutral:hover a { color: #838078 !important; }


.buchen a { color: #ffffff !important; }


.buchen:hover { background-color: #f9f9f5; color: #838078 !important; background-image: url(../images/booking-violett.png); background-position: 15px 10px; background-repeat: no-repeat; background-size: 28px 28px; }
.buchen:hover a { color: #838078 !important; }

.gutschein:hover { background-color: #f9f9f5; color: #838078 !important; background-image: url(../images/gutscheine-violett.png); background-position: 15px 10px; background-repeat: no-repeat; background-size: 28px 28px; }
.tisch:hover { background-color: #f9f9f5; color: #838078 !important; background-image: url(../images/tisch-violett.png); background-position: 15px 10px; background-repeat: no-repeat; background-size: 28px 28px; }



@media(min-width:550px)
{
    #booking { margin: 0px 50px 0px 0px; }

    #buttons { right: 22px; }
}


@media(min-width:750px)
{
    .button { font-size: 17px; padding: 9px 20px; }
}


@media(min-width:950px)
{
    #gutschein { display: block; }
    
    #booking { margin: 0px 35px 0px 0px; }

}

/* ==========================================
   Angebot-Detail Unterseiten
   ========================================== */

.angebot-leistungen {
    background: #f3f1ee;
    padding: 30px 40px 20px 40px;
    margin: 30px 0 0 0;
    border-left: 3px solid #b7b09c;
}

.angebot-leistungen h4 {
    padding: 0;
    margin: 0 0 15px 0;
}

.angebot-preisblock {
    display: flex;
    margin: 100px 0;
    min-height: 200px;
}

.angebot-preisblock-bild {
    flex: 0 0 40%;
    max-width: 40%;
}

.angebot-preisblock-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.angebot-preisblock-inhalt {
    flex: 1;
    background: #f3f1ee;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.angebot-preis-label {
    font-family: 'quiche-sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #b7b09c;
    margin: 0 0 3px 0;
    font-weight: 400;
}

.angebot-preis-wert {
    font-family: 'quiche-sans', sans-serif;
    font-size: 35px;
    font-weight: 400;
    color: #969080;
    letter-spacing: 0.03em;
    line-height: 110%;
    margin: 0 0 20px 0;
    text-transform: uppercase;
}

.angebot-konditionen {
    border-top: 1px solid #C3BDAC;
    padding-top: 25px;
    margin-top: 40px;
}

.angebot-konditionen h4 {
    padding: 0;
    margin: 0 0 10px 0;
}

@media (max-width: 749px) {
    .angebot-preisblock {
        flex-direction: column;
    }

    .angebot-preisblock-bild {
        flex: none;
        max-width: 100%;
        height: 200px;
    }

    .angebot-preisblock-inhalt {
        padding: 25px 30px;
    }

    .angebot-leistungen {
        padding: 25px 30px 15px 30px;
    }

    .angebot-preis-wert {
        font-size: 28px;
    }
}