*{box-sizing:border-box;}

body{ 
    font-family: calibri;
    margin:0;
    
}
a{
    text-decoration: none;
    color:black;
}

p{
    margin:0;
}

#hintergrund{
    background: url("img/start.JPG");
    background-size: cover;
    margin-top: -100px;
    z-index: -1;
}

#logo{
    text-align: center;
}

#logo img{
    margin-top: 160px;
    margin-bottom: 60px;
}

#inhalt{
    position: absolute;
    z-index: 1;
    margin-top:80px;
    display: block;
    width:100%;
}



.ueberschrift1{
    font-family: maiandra gd;
    font-size:18pt;
    margin-bottom: 20px;
}

.maiandra{
    font-family: maiandra gd;
}

.mengentext{
    line-height: 150%;
    margin-bottom: 5px;
    font-size: 12pt;
}
.absatz{
    line-height: 100%;
}

.absatzklein{
    line-height: 50%;
}

.absatz3{
    line-height: 200%;
}

.bold{
    font-weight: bold;
}

.center{
    text-align: center;
}


#lockdown{
    width:100%;
    height:45px;
    background-color: rgba(204,168,119);
    top:0;
    display:none;
    position: absolute;
    z-index: 5;
}

#lockdown p{
    text-align: center;
    margin-top:7px;
    z-index: 5;
}

#lockdown a{
    font-family: maiandra gd;
    color:white;
    text-decoration: underline;
    font-size: 18pt;
    position: relative;
    z-index: 5;
}


/***********************************************************************************************
                            AUSBLENDEN RESPONSIVE SACHEN 
*************************************************************************************************/


#headermobil{
    display:none;
}

#navmobile{
    display:none;
}


#bannermobil{
    display:none;
}


#aktivitaetenakkordeon{
    display: none;
}

#zimmermobil{
     display: none;
}

 #anreisemobil{
     display: none;
}

#programmemobil{
        display:none;
    }



/***********************************************************************************************
                            SPRACHEN 
*************************************************************************************************/





#sprachenauswahl{
    display: flex;
    margin: auto;
    justify-content: center;
}
#sprachenauswahl a{
    margin-right: 20px;
    margin-left: 20px;
}
.sprache{
    padding: 10px;
    margin-left:5px;
    margin-right:5px;

}
.sprache img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom: 10px;
}
.sprache p{
    margin:auto;
    display:block;
    color:black;
    font-size:15pt; 
}




/*********************************************************************************************** 
                            ANGEBOTE 
*************************************************************************************************/





#angebotauswahl {
    
    display:flex;
    justify-content: center;
}

#angebotauswahl a:hover{
    text-shadow: 2px 3px 5px #2a2a29;
}

#angebotauswahl a{
    width:500px;
}

#linkshoeher{
    margin-top: -14px;
}


#links p{
    text-decoration: none;
    color:midnightblue;
    font-size:20pt;
    margin-top:15px;
    letter-spacing: 0.05em;
    font-family: maiandra gd;
    text-align: center;
}

#linksspanisch p{
    text-decoration: none;
    color:midnightblue;
    font-size:20pt;
    letter-spacing: 0.05em;
    font-family: maiandra gd;
    text-align: center;
}

#rechtsspanisch p{
    margin:0;
    font-size:20pt;
    text-decoration: none;
    color:midnightblue;
    letter-spacing: 0.05em;
    font-family: maiandra gd;
    text-align: center;
}

#linksenglisch p{
    text-decoration: none;
    color:midnightblue;
    font-size:20pt;
    letter-spacing: 0.05em;
    font-family: maiandra gd;
    text-align: center;
}
#linksenglisch{
    margin-left: 70px;
    margin-right: 70px;}

#rechtsenglisch p{
    
    margin:0;
    font-size:20pt;
    text-decoration: none;
    color:midnightblue;
    letter-spacing: 0.05em;
    font-family: maiandra gd;
    text-align: center;
}
#rechtsenglisch{
    margin-left: 70px;
    margin-right: 70px;}

#rechtsspanisch{
    margin-left: 80px;
}








#rechts p{
    
    margin:0;
    font-size:19pt;
    text-decoration: none;
    color:midnightblue;
    letter-spacing: 0.05em;
    font-family: maiandra gd;
    text-align: center;
}


#footerfixed{
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    background-color: #292929;
    width:100%;
    padding:5px;
    
}

#rechtliches a{
    margin-right: 100px;
    color: #f6ebd7;
    
}
#sprachenfooter a{
    margin-right: 20px;
    
}





/*********************************************************************************************** 
                    AUFBAU ALLGEMEIN 
*************************************************************************************************/

.headerhw{
    height:250px;
    background-image: url("img/banner_1.jpg");
    background-size: cover;
}
.header2{
    height:250px;
    background-image: url("img/banner_2.jpg");
    background-size: cover;
}
.header3{
    height:250px;
    background-image: url("img/banner_3_.jpg");
    background-size: cover;
    margin-top: 0;
}
.header4{
    height:250px;
    background-image: url("img/banner_4.JPG");
    background-size: cover;
}
.header5{
    height:250px;
    background-image: url("img/banner_5.JPG");
    background-size: cover;
}

#logobanner{
    text-align: center;
}
#logobanner img{
    margin-top: 30px;
}

.weiss{
    background-color: #ffffff;
}

#body{
    width:1100px;
    min-height: 100vh;
    background-color: #fffadc;
    margin-left:auto;
    margin-right:auto;
    -webkit-box-shadow: -10px 0px 11px -7px rgba(41,41,41,0.32), 10px 0px 11px -7px rgba(41,41,41,0.32);
    -moz-box-shadow: -10px 0px 11px -7px rgba(41,41,41,0.32), 10px 0px 11px -7px rgba(41,41,41,0.32);
    box-shadow: -10px 0px 11px -7px rgba(41,41,41,0.32), 10px 0px 11px -7px rgba(41,41,41,0.32);
    position: relative;
}

.content{
    padding-top:75px;
}

.spaltelinks{
    width:650px;
    margin-left:150px;
}


.spaltecenter{
    width:700px;
    margin-left:200px;
}

.spaltecenter2{
    width:800px;
    margin-left:150px;
}

.spaltecenterklein{
    width:700px;
    margin-left:200px;
}

.abstandfooter{
    height:150px;
}

#footer{
    display: flex;
    justify-content: flex-end;
    background-color: #f2e6cc;
    padding-left:150px;
    padding-right:150px;
    margin:auto;
    position: absolute;
    bottom:0px;
    width:1100px;
    padding-bottom:5px;
}

#impressum a{
    position: absolute;
    left:150px;
    color: #292929;  
}
#datenschutz a{
    position: absolute;
    left:45%;
    color: #292929;  
}
#sprachenfooter2{
    right:0px;
}
#sprachenfooter2 img{
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
}


.contentrechtliches{
    padding:40px;
}



/*********************************************************************************************** 
                    KONTAKT 
*************************************************************************************************/

#kontaktobenhw{
    display:flex;
   
}

#kontaktoben{
    display:flex;
/*    margin-top:75px;*/
}

/*
#kontaktobenlinks{
    flex:2;
    height:210px;
}
*/

#kontaktobenmobil{
        display:none;
    }

#kontaktobenlinks{
    flex:1;
    padding:10px;
    text-align: right;
}
#kontaktobenrechts{
    flex:1;
    padding:10px;
    align-self: center;
}

#kontaktobenrechts a{
    text-decoration: underline;
}

#kontaktunten{
    
}

.felder{
    align-content: space-between;
    height:70px;
}

.feld{
    width:100%;
    height: 30px;
    background-color: #f4e6c0;
    
    border-width: 2px;
    
    border-style: solid;

    border-top-color: #f4e6c0;
    border-right-color: #f4e6c0;
    border-bottom-color:#decaa2;
    border-left-color: #f4e6c0;
    
    border-image: initial;
    
}

.felder2hw{
    height:70px;
}

.felder2{
    height:100px;
}

.feldmitteilunghw{
    max-width:100%;
    width:100%;
    height: 30px;
    background-color: #f4e6c0;
    
    border-width: 2px;
    
    border-style: solid;

    border-top-color: #f4e6c0;
    border-right-color: #f4e6c0;
    border-bottom-color: #decaa2;
    border-left-color: #f4e6c0;
    
    border-image: initial;
}

.feldmitteilung{
    max-width:100%;
    width:100%;
    height: 75px;
    background-color: #f4e6c0;
    
    border-width: 2px;
    
    border-style: solid;

    border-top-color: #f4e6c0;
    border-right-color: #f4e6c0;
    border-bottom-color: #decaa2;
    border-left-color: #f4e6c0;
    
    border-image: initial;
}

#buttondivhw{
    width:100%;
    text-align: right;
    margin-bottom:80px;
}

#buttondiv{
    margin-top: 20px;
    width:100%;
    text-align: right;
}

#button{
    background-color:#f4e6c0;
    text-align: center;
    padding:10px;
    width:150px;
    border-top-color: #f4e6c0;
    border-right-color: #f4e6c0;
    border-bottom-color:#decaa2;
    border-left-color: #f4e6c0;
}

#button:hover{
    background-color: #decaa2;
    cursor:pointer;
}



/***********************************************************************************************
            BUTTON ANGEBOTSAUSWAHL MASION 
*************************************************************************************************/

#mySidenav {
    right: -40px;
    width:120px;
    height:400px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #f4e6c0;
    position: fixed;
    border-radius: 60px 0px 0px 60px;
    transition: 0.3s;
    display: flex;
    -webkit-box-shadow: 0px 8px 30px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 8px 30px 3px rgba(0,0,0,0.3);
box-shadow: 0px 8px 30px 3px rgba(0,0,0,0.3);
}

#pfeil{
    margin-top:190px;
    margin-left:12px;
}

#text{
    margin-left: 15px;
    margin-top: 70px;
}

#texthoeher{
    margin-top: 30px;
    margin-left: 15px;
}

#texthoeher2{
    margin-top: 50px;
    margin-left: 15px;
}

#mySidenav2 .buttonschriftklein{
    writing-mode: vertical-rl;
    text-orientation:upright;
    text-decoration: none;
    font-size: 13pt;
    color: #2a2a29;
    font-family: maiandra gd;
    margin-left: 60px;
    margin-top: 25px;
}

#mySidenav2 .buttonschriftkleinde{
    writing-mode: vertical-rl;
    text-orientation:upright;
    text-decoration: none;
    font-size: 12pt;
    color: #2a2a29;
    font-family: maiandra gd;
    margin-left: 60px;
    margin-top: 20px;
}

#mySidenav:hover{
  right: 0px;
}

#mySidenav .buttonschriftkleinde{
    writing-mode: vertical-rl;
    text-orientation:upright;
    text-decoration: none;
    font-size: 12pt;
    color: #2a2a29;
    font-family: maiandra gd;
    margin-left: 20px;
    margin-top: 20px;
}



/*********************************************************************************************** 
            BUTTON ANGEBOTSAUSWAHL HEILRAUM
*************************************************************************************************/


#mySidenav2 {
    left: -40px;
    width:120px;
    height:400px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #f4e6c0;
    position: fixed;
    border-radius: 0px 60px 60px 0px;
    transition: 0.3s;
    display: flex;
    -webkit-box-shadow: 0px 8px 30px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 8px 30px 3px rgba(0,0,0,0.3);
box-shadow: 0px 8px 30px 3px rgba(0,0,0,0.3);
}

#pfeil2{
    margin-top:190px;
    margin-left: 12px;
}
#text2 {
    margin-top: 50px;
    margin-left: 60px;
}

#mySidenav2:hover{
  left: 0px;
}


/*********************************************************************************************** 
                                            NAVI
*************************************************************************************************/



#nav{
    
    background-color: #f4e6c0;
    -webkit-box-shadow: 0px 7px 21px -2px rgba(41,41,41,0.32);
    -moz-box-shadow: 0px 7px 21px -2px rgba(41,41,41,0.32);
    box-shadow: 0px 7px 21px -2px rgba(41,41,41,0.32);
    
    overflow: hidden;
}

#nav ul{
    display:flex;
    justify-content:center;
    padding-inline-start: 0px;
    margin:0;
}

#nav li{
    list-style-type: none;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 2px;
    padding-left: 30px;
    padding-right: 30px;
}

#nav a{
    color: #292929;
    font-family: maiandra gd;
    font-size: 16pt;
    
}

#nav li:hover{
    background-color: #decaa2;
}

.aktiv{
    border-bottom: 3px solid #660000;
}

.sticky {
    position: fixed;
    top: 0;
    width: 1100px;
}

.sticky + .content {
    padding-top: 75px;
}




.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    text-align: center;
    z-index: 1;
    background-color: #f4e6c0;
    right: 137px;
    top: 287px;
}

.dropdown-content a {
    color: black;
    padding: 6px 33px;
    text-decoration: none;
    display: block;
}


/*********************************************************************************************** 
                        HW ALLGEMEIN
*************************************************************************************************/
.contenthw{
    padding-top:75px;
}
.zitat{
    font-style: italic;
}



.center{
    text-align: center;
}

.zusatz{
    font-size: 10pt;
    text-align: center;
    margin-bottom: 50px;
    margin-left:200px;
    font-style: normal;
}

.spaltecenter3{
    width:500px;
    margin: auto;
}


.spaltecenter4{
    width:450px;
    margin: auto;
    margin-left: 380px;
}

.abstand2{
    height:25px;
}


.titelhw{
    font-family: maiandra gd;
    font-size: 18pt;
    margin-bottom: 50px;
}

.untertitelhw{
    font-family: maiandra gd;
    font-size: 15pt;
    margin-bottom: 20px;
}

.zusatz2{
    font-size: 10pt;
    text-align: center;
    margin-left:200px;
    font-style: normal;
}

.buttonpdf{
    display:flex;
    justify-content: space-around;
    background-color: #f4e6c0;
    width:250px;
    padding:10px;
    -webkit-box-shadow: 0px 5px 12px -2px rgba(41,41,41,0.32);
    -moz-box-shadow: 0px 5px 12px -2px rgba(41,41,41,0.32);
    box-shadow: 0px 5px 12px -2px rgba(41,41,41,0.32);
}

.buttonpdf:hover{
    background-color: #decaa2;
}


#paruoben{
    display: flex;
}

#paruoben img{
    margin:10px;
    margin-left: 100px;
}

.spaltecenterprogramm{
    width:600px;
    margin:auto;
}

.spaltecenterprogramm2{
    width:500px;
    margin:auto;
}
.abstandprogramm{
    height:100px;
}

.programm{
    font-size: 14pt;
}

.programminhalt{
    display: flex;
}

.programminhalt_links{
    width:180px;
}

.abstandprogramm2{
    height:60px;
}

#programmbilder{
    display:flex;
    justify-content: space-between;
}

/*********************************************************************************************** 
                        LIGHTBOX
*************************************************************************************************/



.programmbild:hover{
    cursor: pointer;
}

.close:hover, .next:hover, .prev:hover{
    cursor:pointer;    
} 

.prev, .cursor{
    cursor: pointer;
}
.row {
    display: flex;
    justify-content: space-between;
    margin:auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color:#000000;

}

/* Modal Content */
.modal-content {
  position: relative;
  padding: 0;
  text-align: center;
    height:50vh;
}



/* The Close Button */
.close {
  position: absolute;
  top: 25px;
  right: 25px;
}


.mySlides {
  display: none;
}

.mySlides img{
  height:30vw;
    margin-bottom:10vh;
}

.mySlidesallg img, .mySlidestouriya img, .mySlidesamani img, .mySlidesalwa img, .mySlidesaiman img, .mySlideslaila img, .mySlidesshakti .mySlidesalama img{
    height:30vw;
    margin-bottom:10vh;
    margin-left:40vw;
    text-align: center;
}



.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;

}

img {
  margin-bottom: -4px;
}

.prev{
    position: absolute;
    top:50%;
     margin-left: 25px;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next{
    margin-right: 0px;
}


#vorschau{
    display:flex;
    justify-content: space-between;
}

/*********************************************************************************************** 
                        LIGHTBOX ZIMMER
*************************************************************************************************/


.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;

}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlideszimmer {
  display: none;
    text-align: center;
    margin-bottom: 50px;
}

.mySlideszimmer img{
    width:auto;
    height:40vh;

    }

.cursor {
  cursor: pointer;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}



/* Number text (1/3 etc) */
.text {
  color: #f2f2f2;
  font-size: 22pt;
  padding: 8px 12px;
  position: absolute;
  top: 20px;
    left:48%;
font-family: maiandra gd;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demozimmer {
  opacity: 0.6;
    height:100px;
}

.active,
.demozimmer:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.logo img{
    height:50px;
    width:auto;
    padding: 8px 12px;
  position: absolute;
    left:48%;
    top:20px;
}







/*********************************************************************************************** 
                        LIGHTBOX WUESTE
*************************************************************************************************/







.mySlideswueste {
  display: none;
    text-align: center;
    margin-bottom: 50px;
}

.mySlideswueste img{
    width:auto;
    height:40vh;

    }

.demowueste {
  opacity: 0.6;
    height:100px;
}

.active,
.demowueste:hover {
  opacity: 1;
}

#vorschauwueste{
    display: flex;
    justify-content: space-between;
}



/*********************************************************************************************** 
                        LIGHTBOX MASSAGE
*************************************************************************************************/




.massage{
    text-align: center;
}


.mySlidesmassage {
  display: none;
    text-align: center;
    margin-bottom: 50px;
}

.mySlidesmassage img{
    width:auto;
    height:40vh;

    }

.demomassage {
  opacity: 0.6;
    height:100px;
}

.active,
.demomassage:hover {
  opacity: 1;
}

#vorschaumassage{
    display: flex;
    justify-content: space-between;
}



/*********************************************************************************************** 
                        LIGHTBOX ESSEN
*************************************************************************************************/







.mySlidesessen {
  display: none;
    text-align: center;
    margin-bottom: 50px;
}

.mySlidesessen img{
    width:auto;
    height:40vh;

    }

.demoessen {
  opacity: 0.6;
    height:100px;
}

.active,
.demoessen:hover {
  opacity: 1;
}

#vorschauessen{
    display: flex;
    justify-content: space-between;
}


/*********************************************************************************************** 
                        MAISON ALLGEMEIN
*************************************************************************************************/



.titel{
    font-family: maiandra gd;
    font-size: 20pt;
    text-align: center;
    letter-spacing: 0.3em;
}

.titel2{
    font-family: maiandra gd;
    font-size: 16pt;
    text-align: center;
    letter-spacing: 0.3em;
}

.abstandtitel{
    margin-bottom: 20px;
}

.titeloben{
    margin-top: 70px;
}

.extra{
    font-size: 11pt;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 10px;
    line-height: 150%;
}

.karte{
    margin-left:-50px;
}


.contentakt{
    padding-top: 90px;
}

#aktivitaeten{
    display:flex;
    justify-content: space-between;
    margin-top:120px;
    
}

.icons{
    display: flex;
    flex-flow: column;
    z-index: 1;
    position: relative;
    text-align: center;
    width:150px;
}

.icons img{
    margin:auto;
}

.icon:hover{
    -webkit-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.5);
    -moz-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.5);
    box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.5);
    border-radius: 75px;
}

.abstand{
    margin-top:10px;
    margin-bottom:10px;
}

/*********************************************************************************************** 
                        POP UP MENUE
*************************************************************************************************/


.popup{
    min-height:500px;
    background-color: #f4e6c0;
    z-index: 3;
    margin-top: -330px;
    display:none;
    position: relative;
    -webkit-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.2);
    -moz-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.2);
    box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.2);  
    padding-bottom:20px;
}

#popuphintergrund{
    height:100vh;
    max-width:100vw;
    background-color: #ffffff;
    opacity: 0.7;
    z-index: 2;
    display: none;
    position: relative;
}

.closepopup{
    position: absolute;
    right: 0px;
    margin-right: 20px;
    margin-top: 20px;
}
.rightpopup{
    position: absolute;
    right: 0px;
    margin-right: 20px;
    margin-top: 210px;
}
.leftpopup{
    position: absolute;
    left: 0px;
    margin-left: 20px;
    margin-top: 210px;
}

.popupinhalt{
    text-align:center;
    padding:20px;
   
}

.popuptext{
    width:550px;
    margin-left: auto;
    margin-right: auto;
}

.popupicon{
    -webkit-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.2);
    -moz-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.2);
    box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.2);
    border-radius: 75px;
}

.icons:hover, .closepopup:hover, .leftpopup:hover, .rightpopup:hover{
cursor: pointer;
}


.popupbilder{
    text-align: center;
    margin-top: 20px;
    
}
/*********************************************************************************************** 
                        MAISON ZIMMER
*************************************************************************************************/



#bilderdarparu{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.abstandzimmer{
    height:50px;
}

.zimmerart{
    font-size:12pt;
}

.namepreis{
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.zimmername{
    font-family: maiandra gd;
    font-size:18pt;
}

.zimmerpreis{
    font-size:12pt;
    text-align: right;
}

.zimmerfotos{
    display: flex;
    justify-content:space-between;
}

.sonstigespreis{
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}

.sonstiges{
    font-size:12pt;
}

.preis{
    font-size:12pt;
}


/*********************************************************************************************** 
                        RESPONSIV ab1400PX 
*************************************************************************************************/



@media only screen and (max-width:1400px){
    

     
    #hintergrund{
        background-image: url("img/start.JPG");
        
        background-repeat: no-repeat;
    } 
   
      
    
#logo img{
    margin-top: 100px;
    margin-bottom: 50px;
}    
    
#sprachenauswahl a{
    margin-right: 10px;
    margin-left: 10px;
}
.sprache{
    padding: 10px;
    margin-left:5px;
    margin-right:5px;
    margin-bottom: 30px;

}
.sprache img{
    height:25px;
    width:25px;
}
.sprache p{
    font-size:12pt; 
}    
    
    
    
    
/** BUTTON ANGEBOTSAUSWAHL MASION **/

#mySidenav {
    right: -20px;
    width:80px;
    height:250px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #f4e6c0;
    position: fixed;
    border-radius: 45px 0px 0px 45px;
    transition: 0.3s;
    display: flex;
    -webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
}

#pfeil{
    margin-top:125px;
    margin-left:8px;
}

#text {
   height:200px;
    margin-top: 25px;
    margin-left: 10px;
        
}
    
    #texthoeher{
        height:240px;
    margin-top: 5px;
    margin-left: 15px;
}

#texthoeher2{
    height:200px;
    margin-top: 30px;
    margin-left: 15px;
}



#mySidenav:hover{
  right: 0px;
}


/**  BUTTON ANGEBOTSAUSWAHL HEILRAUM  **/


#mySidenav2 {
    left: -20px;
    width:80px;
    height:250px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #f4e6c0;
    position: fixed;
    border-radius: 0px 45px 45px 0px;
    transition: 0.3s;
    display: flex;
    -webkit-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
}

#pfeil2{
    margin-top:125px;
    margin-left: 12px;
}
#text2 {
   height:200px;
    margin-top: 30px;
    margin-left: 35px;
}

#mySidenav2:hover{
  left: 0px;
}


.contentakt{
    padding-top: 75px;
}
    
    
    
}

/*********************************************************************************************** 
                        RESPONSIV ab 1100PX 
*************************************************************************************************/
@media only screen and (max-width:1100px){
    
     #hintergrund{
        background-image: url("img/startmobil.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    } 
    
    .mobilenone{
        display: none;
    }
    
    #sprachenauswahl{
        display:block;
    }
    
    .sprache img{
    height:40px;
    width:40px;
}
    
    .sprache{
        text-align: center;
    }
    
    #body{
        width:100vw;
    }
    
    .spaltecenter{
        width:80vw;
        margin-left:10vw;
    }
    
    .spaltecenter2{
        width:80vw;
        margin-left:10vw;
    }
    .spaltecenter4{
        width:40vw;
        margin-left:30vw;
    }
    
    .spaltecenterklein{
        width:80vw;
        margin-left:10vw;
    }    
    
    .icons{
        width:50%;
        margin-left:5%;
    }
    
    .karte{
        width:80vw;
    }
    
    #footer{
        width:100vw;
    }
    
    .programminhalt{
    display: block;
}

.programminhalt_links{
    width:90vw;
}
}

/*********************************************************************************************** 
                        RESPONSIV ab 850PX 
*************************************************************************************************/



@media only screen and (max-width:850px){
    
    
    
    
    
    #angebotauswahl {
    
    display:block;
}
    
    
    #links{
    margin:auto;
    margin-bottom: 80px;
}
    #links p{
    text-align: center;
}


#rechts{
    margin:auto;
}
    
    
    .ueberschrift1{
        margin-bottom:0;
    }
    
    
    #hintergrund{
    background-repeat: no-repeat;
    margin-top: -100px;
    z-index: -1;
}
    
    .headerhw{
        display:none;
    }
    .header2{
        display:none;
    }
    .header3{
        display:none;
    }
    .header4{
        display:none;
    }
    .header5{
        display:none;
    }
    #nav{
        display: none;
    }
    .seitlicherbutton{
        display:none;
    }
    #body{
       width:100vw;
    position: absolute;
    }
    
    
    #bannermobil{
        margin-top: 50px;
        display:block;
        width:100vw;
    }
    #bannermobil img{
        width:100vw;
        height:auto;
    }
    .content{
        width:90vw;
        margin-top:0px;
        margin-left: 5vw;
        margin-right: 5vw;
         overflow:hidden;
        padding-top: 40px;
    }
    .spaltecenter{
        width:100%;
        margin:auto;
    }
    
    .spaltecenter3{
        width:100%;
        margin:auto;
    }
    #footer{
        display: none;
    }
        
    #aktivitaeten{
        display: none;
    }
    
    .abstandfooter{
        height:70px;
    }
    
    
    #paruoben{
        display: block;
    }
    
    #paruoben img{
        display: none;
    }
    
    /**NAVI MOBILE**/
    
    #headermobil{
        display: flex;
        justify-content: space-between;
        position: fixed;
        top:0;
        width:100vw;
        background-color: #f4e6c0;
        padding:10px;
        z-index: 4;
        height:50px;
    }
    
    .hamburger{
        display: block;
    }
    
    #logomobilheader{
        
    }
    
    .menuebutton, .hamburger{
        top: 0px;
        right: 0px;
        position:fixed;
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px
    }
    
    .closemobil{
        display:none;
    }
    
    #navmobile{
        display:none;
        width:100vw;
        height:100vh;
        background-color: #decaa2;
        position: relative;
        z-index: 3;
        font-family: maiandra gd;
        padding-top:50px;
       
    }
    
    #navmobileoben{
        display:flex; 
    }
    
    #navmobileoben p{
        padding-top:10px;
        padding-left:10px;
        font-family: maiandra gd;
        font-size:18pt;
    }
    
    #navmobileunten{
        position: absolute;
        bottom:0;
        width:100vw;
    }
    
    .ueberpunkt{
        background-color: #f4e6c0;
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 18pt;
    }
    
   
        
    
    .accordionmd, .accordionhw{
        background-color: #f4e6c0;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        text-align: left;
        padding-left:20px;
        border: none;
        outline: none;
        transition: 0.4s;
        font-family: maiandra gd;
        
    }
    
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active{
          background-color: #f4e6c0;
        }

        /* Style the accordion panel. Note: hidden by default */
        .panelmenue, .panelmenue2, .panelmenuesprache {
          
          background-color:#fffadc;
          display: none;
          overflow: hidden;
        }
        
    
    .panelmenue a, .panelmenue2 a{
        display:block;
    background-color:#fffadc; 
    padding:10px 10px 10px 40px;
        font-size: 15pt;
    }
    
    .panelmenue .activebutton, .panelmenue2 .activebutton{
        display:block;
    background-color:#600000; 
    padding:10px 10px 10px 40px;
        color:#fffadc;
    }
    
    .accordionsprache{
        background-color: #f4e6c0;
        cursor: pointer;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
        font-family: maiandra gd;
        
    }
    .accordionsprache p{
        font-size: 15pt;
        margin-left:-5px;
    }
    
    
    .ueberpunkt_padding{
        background-color: #f4e6c0;
        padding-left: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        
    }
    
    .ueberpunkt_padding a{
        font-size: 15pt;
    }
    
    .panelmenuesprache{
        padding:10px 40px 10px 40px;
        text-align: center;
    
    }
    .panelmenuesprache a{
        margin-right:25px;
        margin-left:25px;
    
    }
    
    
    
    
    
 /************************AKTIVITÄTEN*****************************/   
    
    
    
    
    
    #aktivitaetenakkordeon{
        display:block;
    }
    
    .iconmobil{
        -webkit-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.5);
    -moz-box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.5);
    box-shadow: 0px 0px 10px 4px rgba(42,42,41,0.5);
    border-radius: 75px;
    }
    
    .accordion {
        background-color: #fffadc;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
        }

        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active, .accordion:hover {
          background-color: #fffadc;
        }

        /* Style the accordion panel. Note: hidden by default */
        .panel {
          padding:10px 10px 10px 10px;
          background-color: #decaa2;
          display: none;
          overflow: hidden;
            margin:auto;
        }
    
    .paneltext{
        width:90%
            margin:auto;
    }
    
    
    
    
    
    
    
    /************************ANREISE*****************************/   
    
    
    
    #anreisedesktop{
        display: none;
    }
    #anreisemobil{
        display: block;
    }

    
    .accordionanreise {
        background-color: #fffadc;
        cursor: pointer;
        padding: 5px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
        
        position: relative;
        }
    
    .accordionanreise img{
        position: absolute;
        top:45%;
        left:0;
        margin-left:20px;
        }

        /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active, .accordionanreise:hover {
          background-color: #f4e6c0;
        }

        /* Style the accordion panel. Note: hidden by default */
        .panelanreise {
          padding:10px 10px 10px 10px;
          background-color: #decaa2;
          display: none;
          overflow: hidden;
            margin:auto;
        }
    
   
    
     /********************************************************************************/
    
    
    .karte{
        width: 90vw;
        margin:0;
    }
    
    
/********************************************************************************/   
    
    
    .spaltecenterklein {
    width:100%;
        margin:auto;
}
    #bilderdarparu img{
        height:50px;
    }
    #zimmerdesktop{
        display:none;
    }
    .accordionzimmer{
        background-color: #f4e6c0;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        text-align: left;
        padding-left:20px;
        border: none;
        outline: none;
        transition: 0.4s;
        font-family: maiandra gd;
        font-size:15pt;
    }
    
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active, .accordionzimmer:hover{
          background-color: #f4e6c0;
        }

        /* Style the accordion panel. Note: hidden by default */
        .panelmenuezimmer {
          
          background-color:#fffadc;
          display: none;
          overflow: hidden;
            padding:5px;
        }
    
   
    .spaltecenter4 {
    width:100%;
        margin:auto;
}
    
    
    .contenthw{
        width:90vw;
        margin-top:0px;
        margin-left: 5vw;
        margin-right: 5vw;
    }
    
    
    
    #kontaktobenmobil{
        display:block;
        text-align: center;
    }
    
    #kontaktobenmobil a{
        text-decoration: underline;
    }

    #kontaktoben{
        display:none;
    }
    
    
    
    
    
    
    
    /***********************************PROGRAMM*********************************************/
    
    
    
    .spaltecenterprogramm{
        display:none;
    }
    
    #programmemobil{
        display:block;
    }
    
    
    
    .accordionprogramm{
        background-color: #f4e6c0;
        cursor: pointer;
        padding: 10px;
        width: 100%;
        text-align: left;
        padding-left:10px;
        padding-top:12px;
        border: none;
        outline: none;
        transition: 0.4s;
        font-family: maiandra gd;
        font-size:15pt;
        display:flex;
        position: relative;
    }
    
    .accordionprogramm img{
        position: absolute;
        top:42%;
    }
    .accordionprogramm p{
        padding-left:25px;
        font-size:11pt;
    }
    
    .abstandprogramm{
    height:15px;
}
    .abstandprogramm2{
    height:15px;
}
    
    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
        .active, .accordionprogramm:hover{
          background-color: #f4e6c0;
        }

        /* Style the accordion panel. Note: hidden by default */
        .panelprogramm {
          display: flex;
          background-color:#fffadc;
          display: none;
          overflow: hidden;
            padding:15px;
        }
    
    .programmbild{
        height:50px;
    }
    
    
    
    #zimmermobil{
     display: block;
}
    
    
    
}
    
  /*********************************************************************************************** 
                        RESPONSIV ab 600PX 
*************************************************************************************************/



@media only screen and (max-width:600px){  
    
    #hintergrund{
        background-image: url("img/starthandy.JPG");
        background-size: cover;
        background-repeat: no-repeat;
    } 
    
    #logo img{
        height:40px;
        width:auto;
        margin-top: 80px;
        margin-bottom: 40px;
    }
    
    .sprache{
        margin:0;
    }
    
    
    .sprache img{
        height:20px;
        width:20px;
    }
    
    #links p{
    font-size: 18pt;
}
    #rechts p{
    font-size: 18pt;
}
    
    #rechtliches a{
        margin-right:20px;
    }
    
    
       
}