/* WEBFONTS */

@font-face {
    font-family: 'Merriweather Bold';
    src: url('fonts/Merriweather-Bold.eot');
    src: url('fonts/Merriweather-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Merriweather-Bold.woff2') format('woff2'),
        url('fonts/Merriweather-Bold.woff') format('woff'),
        url('fonts/Merriweather-Bold.ttf') format('truetype'),
        url('fonts/Merriweather-Bold.svg#Merriweather-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Merriweather';
    src: url('fonts/Merriweather-Light.eot');
    src: url('fonts/Merriweather-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Merriweather-Light.woff2') format('woff2'),
        url('fonts/Merriweather-Light.woff') format('woff'),
        url('fonts/Merriweather-Light.ttf') format('truetype'),
        url('fonts/Merriweather-Light.svg#Merriweather-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}





/* VARIABLEN ################################# */

:root {

--fett: 'Merriweather Bold';
--normal: 'Merriweather';

--font28: 28px;
--font24: 24px;
--font22: 22px;
--font20: 20px;
--font18: 18px;
--font15: 15px;
--font12: 12px;

/* COLOR */

--weiss: #fff;
--braun: #621E1B;
--dunkelbraun: #3E1410;
--gelb: #F7AF73;
--kalender: #F9F9F9;


/* SCHATTEN */

--bildschatten: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

}

/* END VARIABLEN ############################# */



/* GLOBAL ################################# */

body {
    font-family: var(--normal);
    /*background-image: url(images/pattern.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-y;*/
    background-color: var(--braun);
    color: var(--gelb);
    font-size: var(--font18);
}

#sp-main-body {
    border-top: 12px solid var(--braun);
    border-bottom: 12px solid var(--braun);
}

p.sppb-title-subheading {
    color: var(--weiss);
}

b, strong {
    font-family: var(--fett);
    letter-spacing: 1px;
}

a {
    color: var(--gelb);
    text-decoration: underline;
}

a:hover {
    color: var(--gelb);
    text-decoration: none;
}

a.sppb-btn-custom {
    text-decoration: none;
}

#your-choice img.sppb-img-responsive {
    box-shadow: var(--bildschatten);
    transition: .8s;
}

#your-choice img.sppb-img-responsive:hover {
    scale: 1.05;
    transition: .2s;
}

#sp-footer .container-inner {
    border-top: 0;
}


h1.sppb-title-heading,
h2.sppb-title-heading {
    line-height: 160%;
    color: var(--gelb);
}

h2 {
    font-size: var(--font28);
    margin: 30px 0 20px 0;
    font-family: var(--fett);
}

h3 {
    font-size: var(--font24);
    margin: 30px 0 20px 0;
    font-family: var(--fett);
}

h4 {
    margin: 15px 0 10px 0;
    font-size: var(--font18);
    font-family: var(--fett);
}

.sppb-carousel-extended-item img {
    border-radius: 10px;
}

.sppb-carousel-extended-nav-control .nav-control {
    border-radius: 5px!important;
}

.fps__sonstigePreise {
    font-size: var(--font15);
}

.sp-slider-content-align-center {
    padding: 0!important;
}

/* END GLOBAL ############################# */

/* LOGO ################################### */

#sp-header.header-sticky {
    min-height: 135px;
}

#sp-header .logo img {
    height: 90px;
    width: auto;
}

/*
.sp-module.logo img {
    max-width: 200px;
}

#sp-header.header-sticky .sp-module.logo img {
    max-width: 150px;
}
*/

/* END LOGO ############################### */

/* VERTICALMENU ########################### */

.off-menu_116 dl dt.hover a, .off-menu_116 dl dt:hover a, .off-menu_116 dl.level1 dt.hover a, .off-menu_116 dl.level1 dt:hover a {
    font-family: var(--normal);
}

/* END VERTICALMENU ####################### */

/* OSGALLERY ############################## */

ul.osgalery-cat-tabs {
    display: none;
}

/* END OSGALLERY ########################## */

/* HEADER ################################# */

#sp-header {
    background: url(images/pattern.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: repeat-y;
 
}

#sp-header.header-sticky {
       border-bottom: 12px solid #621E1B;
}

#sp-menu > div > nav > ul > li > a {
    font-size: var(--font18);
    text-transform: uppercase;
}

/* END HEADER ############################# */

/* Buchungsformular ####################### */

label.cf-label {
    font-family: var(--fett);
}

#cf1 > div.cf-form-wrap.cf-col-16 > div.cf-fields > div:nth-child(17) > div.cf-control-input > div > div > label {
    font-family: var(--normal);
}

/* END Buchungsformular ################### */

/* FOOTER STARTSEITE ################################# */

footer#sp-footer {
    background-color: var(--dunkelbraun);
}

footer#sp-footer a {
    text-decoration: underline;
    font-size: var(--font12);
}

footer#sp-footer a:hover {
    text-decoration: none;
}

.fps__footerNavigation .sppb-column-addons {
    text-align: center;
}

.fps__footerNavigation ul.menu li:first-child {
    border-left: 0;
}
.fps__footerNavigation ul.menu li {
    border-left: 1px solid var(--gelb);
    margin: 0!important;
}

.fps__footerNavigation .sppb-column-addons a {
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 0 15px;
    margin: 0;
    font-size: var(--font15);
    color: var(--gelb)!important;
}

/* END FOTTER STARTSEITE ############################# */

/* BUCHUNGSBEREICH ################################# */

#fhp__contactSection a {
    font-size: 30px;
    text-decoration: none;
}

#fhp__contactSection a.sppb-btn {
    font-size: var(--font18);
    letter-spacing: 1px;
}

#fhp__contactSection .sppb-row-column {
    margin-bottom: 50px;
}

/* END BUCHUNGSBEREICH ############################# */

/* KALENDER ################################# */

.multiCalendarWidget {
    max-width: 1000px !important;
    width: 100% !important;
    display: inline-table !important;
    background: var(--gelb) !important;
    color: #616262 !important;
    font: 300 100%/1.5em 'Lato', sans-serif !important;
    margin: 0 !important;
    padding-top: 20px !important;
    border-radius: 10px;
}

.sppb-flipbox-front.flip-box {
    text-shadow: -1px 0px 7px rgba(0,0,0,0.6);
}

#smoobuApartment21023de > div > div > div > div > div > table > tbody > tr> td.arrival,
#smoobuApartment21024de > div > div > div > div > div > table > tbody > tr> td.arrival,
#smoobuApartment21025de > div > div > div > div > div > table > tbody > tr> td.arrival,
#smoobuApartment1967291de > div > div > div > div > div > table > tbody > tr> td.arrival,
#smoobuApartment1967288de > div > div > div > div > div > table > tbody > tr> td.arrival,
#smoobuApartment1967306de > div > div > div > div > div > table > tbody > tr> td.arrival {
    background: linear-gradient(to right bottom, var(--kalender) 50%, var(--gelb) 50%) !important;
}

#smoobuApartment21023de > div > div > div > div > div > table > tbody > tr> td.departure,
#smoobuApartment21024de > div > div > div > div > div > table > tbody > tr> td.departure,
#smoobuApartment21025de > div > div > div > div > div > table > tbody > tr> td.departure,
#smoobuApartment1967291de > div > div > div > div > div > table > tbody > tr> td.departure,
#smoobuApartment1967288de > div > div > div > div > div > table > tbody > tr> td.departure,
#smoobuApartment1967306de > div > div > div > div > div > table > tbody > tr> td.departure {
    background: linear-gradient(to right bottom, var(--gelb) 50%, var(--kalender) 50%) !important;
}

#smoobuApartment21023de > div > div > div > div > div > table > tbody > tr > td.normal,
#smoobuApartment21024de > div > div > div > div > div > table > tbody > tr > td.normal,
#smoobuApartment21025de > div > div > div > div > div > table > tbody > tr > td.normal,
#smoobuApartment1967291de > div > div > div > div > div > table > tbody > tr > td.normal,
#smoobuApartment1967288de > div > div > div > div > div > table > tbody > tr > td.normal,
#smoobuApartment1967306de > div > div > div > div > div > table > tbody > tr > td.normal {
    background-color: var(--gelb)!important;
}

#smoobuApartment21023de > div > div > div > div > div > table > tbody > tr > td.current-day,
#smoobuApartment21024de > div > div > div > div > div > table > tbody > tr > td.current-day,
#smoobuApartment21025de > div > div > div > div > div > table > tbody > tr > td.current-day,
#smoobuApartment1967291de > div > div > div > div > div > table > tbody > tr > td.current-day,
#smoobuApartment1967288de > div > div > div > div > div > table > tbody > tr > td.current-day,
#smoobuApartment1967306de > div > div > div > div > div > table > tbody > tr > td.current-day {
    border: 2px solid var(--dunkelbraun) !important
}

#smoobuApartment21023de .logo.bigDevices a,
#smoobuApartment21024de .logo.bigDevices a,
#smoobuApartment21025de .logo.bigDevices a,
#smoobuApartment1967291de .logo.bigDevices a,
#smoobuApartment1967288de .logo.bigDevices a,
#smoobuApartment1967306de .logo.bigDevices a,
#smoobuApartment21023de .logo.smallDevices a,
#smoobuApartment21024de .logo.smallDevices a,
#smoobuApartment21025de .logo.smallDevices a,
#smoobuApartment1967291de .logo.smallDevices a,
#smoobuApartment1967288de .logo.smallDevices a,
#smoobuApartment1967306de .logo.smallDevices a {
    font-size: var(--font12);
}

/* END KALENDER ############################# */

/* AUSWAHL WOHNUNGEN ################################# */

#fps__auswahlWohnungen .sppb-addon-content {
    text-align: center;
}

#fps__auswahlWohnungen .menu {
    list-style: none;
    padding: 0;
}

#fps__auswahlWohnungen .menu li {
    display: inline-block;
    margin-right: 10px; /* Abstand zwischen den Links anpassen */
}


#fps__auswahlWohnungen .menu li a {
    text-decoration: none;
    background-color: var(--gelb);
    color: var(--braun);
    padding: 10px 20px;
    border-radius: 6px;
    font-size: var(--font18);
    }

#fps__auswahlWohnungen .menu li a:hover,
#fps__auswahlWohnungen .menu li.current.active a {
    background-color: var(--weiss);
    color: var(--braun);
}

@media screen and (max-width: 767px) {
    
    #fps__auswahlWohnungen .menu li {
        display: block;
        width: 90%;
        margin: auto;
        margin-bottom: 0; /* Zurücksetzen des Abstands für größere Bildschirme */
    }

    #fps__auswahlWohnungen .menu li a {
        display: block;
        margin-bottom: 10px; /* Zurücksetzen des Abstands für größere Bildschirme */
    }


}


/* END AUSWAHL WOHNUNGEN ############################# */

/* GLOBAL ################################# */

/* END GLOBAL ############################# */

/* GLOBAL ################################# */
 
/* END GLOBAL ############################# */



/* MEDIA QUERIES ########################## */


@media (768px <= width <= 991px )  {

 #sp-header {
        min-height: 80px;
    }

    #sp-header.header-sticky {
        min-height: 90px;
    } 


    #sp-header img,
    #sp-header.header-sticky img {
        max-height: 60px;
        margin-top: 20px;
    }

}




@media (601px <= width <= 767px )  {

 #sp-header {
        min-height: 80px;
    }

    #sp-header.header-sticky {
        min-height: 90px;
    } 


    #sp-header img,
    #sp-header.header-sticky img {
        max-height: 60px;
        margin-top: 20px;
    }

}



@media (300px <= width <= 600px )  {

    #sp-header {
        min-height: 80px;
    }

    #sp-header.header-sticky {
        min-height: 90px;
    } 

    #sp-header img,
    #sp-header.header-sticky img {
        max-height: 60px;
        margin-top: 20px;
    }

}