/*
Style für Apartment Seite 
(Buchungskalender, Wetter)
*/

/*********************************************************
/* Startseite Adresse ganz oben
/********************************************************
	-webkit-transition: opacity 300ms ease-in-out,height 300ms ease-in-out;
  transition: opacity 300ms ease-in-out,height 300ms ease-in-out;
*/
#top_adress{
	position: fixed;
  z-index: 1000;
  top: 0px;
  width: 100%;
	height: 34px;
	opacity:1;
	background-color: var(--color_bg);
	background-color: var(--rot_dunkel);
	color: #fff;
	font-size: 0.8em;
	-webkit-transition: all 300ms ease-in-out 0.5s;
  transition: all 300ms ease-in-out 0.5s;
}
@media screen and (min-width: 960px){
	#top_adress{
		font-size: 1.0em;
	}
}
.fixed_nav #top_adress{
   transform: translate(0,-34px);
}
#top_adress .adresse{
	display:flex;
	justify-content: flex-end;
	align-items: center;
  height: 100%;
}
#top_adress .adresse span:last-child  {
	margin-right: 0;
}
#top_adress .adresse span {
	margin-right: 34px;
}
/* Navigation nur auf der Startseite um 34px nach unten verschieben */
.index_page .navigation{
	margin-top: 34px;
}
.index_page.fixed_nav .navigation{
	margin-top: 0;
}
/*********************************************************
/* Startseite
/*********************************************************/
#app_hero{
    display: flow-root;
    box-sizing: content-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
		position: relative;
}
.hero_kalender_container{
		position: relative;
		background-color: var(--color_bg);
    padding: 30px 30px 30px 30px;
		text-align: center;
		width: 370px;
    margin-left: auto;
    margin-right: auto;
}
.zimmer_suchen_hero{
	/*margin-top: 30px;*/
}
@media screen and (min-width: 960px){
	.hero_kalender_container{
		position: absolute;
    right: 10%;
    top: 10%;
		/*padding: 0px 30px 30px 30px;*/
	}
}




/*.zimmer_liste h1, .zimmer_liste h2 {
  margin-top: 0px;
}*/
.zimmer_liste .zimmerbeschreibung.uk-card-body {
    padding: 10px 40px 40px 40px;
}
/*.qodef-room-list .qodef-e-media-image img*/
.zimmer_liste .media-image {
  overflow: hidden;
	cursor: pointer;
	position: relative;
}
.zimmer_liste .media-image img {
    will-change: transform;
    -webkit-transform: translateX(-4px) translateZ(0) scale(1.02);
    transform: translateX(-4px) translateZ(0) scale(1.02);
    -webkit-transition: .29s cubic-bezier(.4,.12,.4,.85);
    -o-transition: .29s cubic-bezier(.4,.12,.4,.85);
    transition: .29s cubic-bezier(.4,.12,.4,.85);
}
.zimmer_liste .media-image:hover img {
  -webkit-transform: translateX(4px) translateZ(0) scale(1.02);
          transform: translateX(4px) translateZ(0) scale(1.02);
  -webkit-transition: 0.35s cubic-bezier(0.4, 0.12, 0.4, 0.85);
  -o-transition: 0.35s cubic-bezier(0.4, 0.12, 0.4, 0.85);
  transition: 0.35s cubic-bezier(0.4, 0.12, 0.4, 0.85);
  /*transform: translateX($move * 1%) translateZ(0) scale(1 + 2 * $move * .01);*/
}

.zimmer_liste .preis {
  position: absolute;
  left: -18px;
  top: 18px;
  white-space: nowrap;
  padding: 14px 20px;
  z-index: 1;
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.zimmer_liste .preis:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #faf9f5;
  content: '';
  z-index: -1;
  -webkit-transition: 0.35s cubic-bezier(0.25, 0.04, 0, 0.93);
  -o-transition: 0.35s cubic-bezier(0.25, 0.04, 0, 0.93);
  transition: 0.35s cubic-bezier(0.25, 0.04, 0, 0.93);
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
}

.zimmer_liste .preis .preis-label,
.zimmer_liste .preis .preis-value {
  -webkit-transform: translateX(0px) translateZ(0px);
          transform: translateX(0px) translateZ(0px);
  -webkit-transition: 0.35s cubic-bezier(0.25, 0.04, 0, 0.93);
  -o-transition: 0.35s cubic-bezier(0.25, 0.04, 0, 0.93);
  transition: 0.35s cubic-bezier(0.25, 0.04, 0, 0.93);
}

.zimmer_liste .preis:hover:after {
  -webkit-transform: scaleX(1.05);
      -ms-transform: scaleX(1.05);
          transform: scaleX(1.05);
}

.zimmer_liste .preis:hover .preis-label,
.zimmer_liste .preis:hover .preis-value {
  -webkit-transform: translateX(5px) translateZ(0px);
          transform: translateX(5px) translateZ(0px);
}

.zimmer_liste .preis-label {
  color: #b56953;
	margin-right: 8px;
}

.zimmer_liste .preis-value {
  position: relative;
  top: -3px;
  font-family: "Cormorant", serif;
  font-size: 25px;
	color: #000;
}



/*********************************************************
/* Apartment Auswahlseite
/*********************************************************/
.kalender_container{
		background-color: var(--color_bg);
    padding: 40px;
		/*padding: 10px 40px 40px 40px;*/
    text-align: center;
}
.hero_kalender {
		margin-bottom: 2em;
}



/*********************************************************
/* Apartment Seite Sliderhöhe
/*********************************************************/
#app_zimmer_hero .uk-grid>* {
	padding-left: 4px;
		height: 300px;
		width: auto;
}
#app_zimmer_hero img {
		max-height: 100%;
}
@media screen and (min-width: 650px){
	#app_zimmer_hero .uk-grid>* {
			padding-left: 4px;
			height: 350px;
	}
}
@media screen and (min-width: 960px){
	#app_zimmer_hero .uk-grid>* {
			height: 400px;
	}
}
@media screen and (min-width: 1200px){
	#app_zimmer_hero .uk-grid>* {
			height: 450px;
	}
}


/*
class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l"
1 Bild bis 650px Breite
1,5 Bilder bis 960px Breite
3 Bilder bis 1200px Breite
3,5 Bilder ab 1200px Breite
* 100% viewWidth / 2 Bilder x Bildformat 3/4 
@media screen and (min-width: 650px){
	#app_zimmer_hero .olox_app_slider{
			/
			height: calc( 100vw / 2 * 3 / 4);
	}
}
@media screen and (min-width: 960px){
	#app_zimmer_hero .olox_app_slider{
			height: calc( 100vw / 3 * 3 / 4);
	}
}
@media screen and (min-width: 1200px){
	#app_zimmer_hero .olox_app_slider{
			height: calc( 100vw / 4 * 3 / 4);
	}
}
#app_zimmer_hero .uk-grid>* {
    padding-left: 4px;
}*/

/*
class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-3@l"
1 Bild bis 650px Breite
1,5 Bilder bis 960px Breite
3 Bilder bis 1200px Breite
3,5 Bilder ab 1200px Breite


@media screen and (min-width: 960px){
	#app_zimmer_hero .olox_app_slider{
			height: calc( 100vw / 2 * 3 / 4);
	}
}
@media screen and (min-width: 1200px){
	#app_zimmer_hero .olox_app_slider{
			height: calc( 100vw / 3 * 3 / 4);
	}
}

#app_zimmer_hero .uk-grid>* {
    padding-left: 4px;
}
/*
class="uk-slider-items uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@l"
1 Bild bis 650px Breite
1,5 Bilder bis 1200px Breite
3 Bilder ab 1200px Breite
*/
/*
@media screen and (min-width: 650px){
	#app_zimmer_hero .olox_app_slider{
			height: calc( 100vw / 2 * 3 / 4);
	}
}
@media screen and (min-width: 1200px){
	#app_zimmer_hero .olox_app_slider{
			height: calc( 100vw / 3 * 3 / 4);
	}
}

#app_zimmer_hero .uk-grid>* {
    padding-left: 4px;
}

/*********************************************************
/* Apartment Seite 
/*********************************************************/
.app_container {
    display: block;
		padding-top: 2em;
		padding-bottom: 2em;
}
/* Apartment Text div-Breite */
.app_detail_div {
    flex-grow: 1;
}
@media screen and (min-width: 960px){
	.app_container {
    display: flex;
		padding-top: 3em;
		padding-bottom: 5em;
	}
	.app_detail_div {
			padding-right: 30px;
	}
}
hr {
    background-color: #e5e5e5;
    height: 1px;
		max-width: inherit;
}

/*********************************************************
/* Apartment Ausstattungs SVG
/********************************************************
.qodef-ei-svg {
    width: 30px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 13px;
    color: #b56953;
}
.qodef-ei-svg svg {
    display: block;
    max-width: 100%;
}
.qodef-ei-svg-icon {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    fill: none;
}*/
.ausstattung-svg {
    width: 30px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-right: 13px;
    color: #b56953;
}
.ausstattung-svg svg {
    display: block;
    max-width: 100%;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    fill: none;
}
.ausstattung-svg svg * {
    fill: none;
    stroke: currentColor;
}
.ausstattung-svg svg.fill {
    fill: currentColor;
}
.ausstattung-svg svg.fill * {
    fill: currentColor;
}

/*********************************************************
/* Verfügungs kalender
/*********************************************************/
/* Lücke zwischen tr Reihen schließen: funktioniert nicht in FireFox */
/*tbody, td, tfoot, th, thead, tr, tt, u, ul, var {
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    background: 0 0;
    border: 0;
    outline: 0;
}*/
.availability-calendar .date-picker-wrapper .month-wrapper {
    /*display: flex;*/
    display: block;
		width: auto;
}

.qodef-room .qodef-e-availability {
    position: relative;
    display: inline-block;
    width: auto;
    vertical-align: top;
    margin-top: 56px;
    padding-top: 37px;
    border-top: 1px solid rgba(189,140,126,.22);
		margin-bottom: 56px;
}
.qodef-room .qodef-e-availability-legend .qodef-ei-legend-item {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    margin: 10px 0;
}
.qodef-room .qodef-e-availability-legend .qodef-ei-legend-item.qodef--selected .qodef-ei-box {
    background-color: #b56953;
    background-color: var(--rot_dunkel);
}
.qodef-room .qodef-e-availability-legend .qodef-ei-legend-item.qodef--available .qodef-ei-box {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.18);
}
.qodef-room .qodef-e-availability-legend .qodef-ei-box {
    width: 31px;
    height: 31px;
    margin-right: 10px;
}
.qodef-room .qodef-e-availability-legend .qodef-ei-label {
    font-family: Raleway,sans-serif;
    font-size: 12px;
    color: #000;
    letter-spacing: .03em;
}

/*********************************************************
/* Buchungskalender
/*********************************************************/
/* Kalender div-Breite */
.buchungskalender {
    max-width: 351px;
    width: 100%;
		flex-shrink: 0;
}
.apartments .buchungskalender {
		max-width: 380px;
}
@media only screen and (min-width: 450px) {
	.buchungskalender {
    width: 351px;
	}	
	.apartments .buchungskalender{
    width: 380px;
	}
}

/* Kalender div- Breite */
#qodef-room-reservation {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    padding: 40px 0px;
    background-color: #faf9f5;
    background-color: var(--color_bg);
}
@media only screen and (min-width: 280px) {
	#qodef-room-reservation {
			/*padding: 26px 40px 40px;*/
			padding: 40px 26px;
	}
}
select {
    font-weight: 300;
}
/* banner ganz oben */
#qodef-top-area .qodef-top-area-inner {
    height: 100%;
}

/* Anzahl Gäste Select Breite */
.select_anzahl_gaeste {
    width: 100%;
}

/* Kalender Check in / check out */
.datepick-popup .datepick-month td .datepick-disabled, .qodef-datepick-calendar .datepick-month td .datepick-disabled,
.qodef-room .qodef-e-availability-legend .qodef-ei-legend-item.qodef--no-available .qodef-ei-box {
	background: linear-gradient(to top left,rgb(80 78 69 / 0.2) 0,rgb(80 78 69 / 0.2) calc(50% - .8px),rgba(80,78,69,.4) 50%,rgb(80 78 69 / 0.2) calc(50% + .8px),rgb(80 78 69 / 0.2) 100%)!important;
}
/* Select Datum im Avialable Kalender */
.qodef-room .qodef-e-availability-calendar .datepick-month tr td .datepick-highlight:not(.datepick-disabled), .qodef-room .qodef-e-availability-calendar .datepick-month tr td .datepick-selected:not(.datepick-disabled) {
    color: inherit!important;
    background-color: #b56953!important;
}
/*.datepick-check_in {
   background: linear-gradient(to top left,rgb(80 78 69 / 0.1) 0,rgb(80 78 69 / 0.1) calc(50% - .8px),rgb(80 78 69 / 0%) 50%,rgba(80,78,69,0) calc(50% + 2px),rgb(80 78 69 / 0%) 100%)!important;
}

.datepick-check_out {
   background: linear-gradient(to top left,rgb(80 78 69 / 0) 0,rgb(80 78 69 / 0) calc(50% - 2px),rgb(80 78 69 / 0%) 50%,rgba(80,78,69,0.1) calc(50% + 2px),rgb(80 78 69 / 0.1) 100%)!important
}
*/

.datepick-popup .datepick-month td a.datepick-check_in,
.qodef-datepick-calendar .datepick-month td a.datepick-check_in {
		position: relative;
    width: 100%;
    overflow: hidden;
		background: 0 0;
		border-style: solid;
    border-color: rgb(0 0 0 / 30%);
    border-width: 0 1px 1px 0;
}
.datepick-popup .datepick-month td a.datepick-check_in:after,
.qodef-datepick-calendar .datepick-month td a.datepick-check_in:after {
		content: '';
    position: absolute;
    bottom: 0;
    right: 0;
		height: 100%;
    width: 100%;
		background: linear-gradient(to top left,rgb(80 78 69 / 0.2) 0,rgb(80 78 69 / 0.2) calc(50% - .8px),rgba(80,78,69,0) 50%,rgb(80 78 69 / 0) calc(50% + 2px),rgb(80 78 69 / 0))!important;
		/*background: linear-gradient(to top left,rgb(234 234 229 / 50%) 0,rgb(234 234 229 / 50%) calc(50% - .8px),rgb(80 78 69 / 0%) 50%,rgba(80,78,69,0) calc(50% + 2px),rgb(80 78 69 / 0%) 100%)!important;
    -webkit-transform: rotate(180deg);
    border-style: solid;
    border-width: 32px 32px 0 0;
    border-color: rgb(247 221 208 / 41%) transparent transparent transparent;*/
}
.datepick-popup .datepick-month td a.datepick-check_out,
.qodef-datepick-calendar .datepick-month td a.datepick-check_out {
    width: 100%;
    position: relative;
    overflow: hidden;
		background: 0 0;
}
.datepick-popup .datepick-month td a.datepick-check_out:before,
.qodef-datepick-calendar .datepick-month td a.datepick-check_out:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
		height: 100%;
    width: 100%;
		background: linear-gradient(to top left,rgb(80 78 69 / 0) 0,rgb(80 78 69 / 0) calc(50% - 2px),rgba(80,78,69,0) 50%,rgb(80 78 69 / 0.2) calc(50% + 2px),rgb(80 78 69 / 0.2))!important;
		/*background: linear-gradient(to top left,rgb(80 78 69 / 0) 0,rgb(80 78 69 / 0) calc(50% - 2px),rgb(80 78 69 / 0%) 50%,rgb(234 234 229 / 50%) calc(50% + 2px),rgb(234 234 229 / 50%) 100%)!important
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 32px 32px 0 0;
    border-color: rgb(247 221 208 / 41%) transparent transparent transparent;*/
}