.header-responsive-container {
  width: 100%;
  height: fit-content;
  display: flex;
  padding: var(--dl-space-space-unit);
  position: relative;
  align-items: flex-start;
  flex-direction: column;
  background-color: black;
}
.header-responsive-navbar-interactive {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-responsive-navlink {
  display: contents;
}
.header-responsive-image {
  width: 154px;
  height: 85px;
  object-fit: cover;
  text-decoration: none;
}
.header-responsive-desktop-menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.header-responsive-right-side {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.header-responsive-links-container {
  gap: var(--dl-space-space-doubleunit);
  display: flex;
  align-items: center;
  margin-right: 20px;
  flex-direction: row;
  justify-content: space-between;
}
.header-responsive-navlink01 {
  text-decoration: none;
}
.header-responsive-navlink02 {
  text-decoration: none;
}
.header-responsive-navlink03 {
  text-decoration: none;
}
.header-responsive-navlink04 {
  text-decoration: none;
}
.header-responsive-navlink05 {
  display: contents;
}
.header-responsive-component {
  text-decoration: none;
}
.header-responsive-burger-menu {
  display: none;
}
.header-responsive-icon {
  width: 32px;
  height: 32px;
}
.header-responsive-mobile-menu {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  padding: var(--dl-space-space-unit);
  z-index: 100;
  position: absolute;
  background: black;
  flex-direction: column;
  justify-content: space-between;
}
.header-responsive-nav {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
.header-responsive-top {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 48px;
  justify-content: space-between;
}
.header-responsive-logo {
  width: 154px;
  height: 85px;
  object-fit: cover;
}
.header-responsive-close-menu {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-responsive-icon02 {
  fill: white;
  width: 100%;
  height: 100%;
}
.header-responsive-links {
  flex: 0 0 auto;
  display: flex;
  align-self: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.header-responsive-links-container1 {
  gap: var(--dl-space-space-unit);
  display: flex;
  align-items: flex-start;
  margin-right: 20px;
  flex-direction: column;
  justify-content: space-between;
}
.header-responsive-navlink06 {
  text-decoration: none;
}
.header-responsive-navlink07 {
  text-decoration: none;
}
.header-responsive-navlink08 {
  text-decoration: none;
}
.header-responsive-navlink09 {
  text-decoration: none;
}
.header-responsive-navlink10 {
  display: contents;
}
.header-responsive-component1 {
  text-decoration: none;
}
.header-responsive-icon04 {
  width: 16px;
  height: 16px;
  margin-right: 32px;
}
.header-responsive-icon06 {
  width: 16px;
  height: 16px;
  margin-right: 32px;
}
.header-responsive-icon08 {
  width: 16px;
  height: 16px;
}



@media(max-width: 991px) {
  .header-responsive-desktop-menu {
    justify-content: flex-end;
  }
  .header-responsive-links-container {
    gap: var(--dl-space-space-unit);
  }
}
@media(max-width: 767px) {
  .header-responsive-desktop-menu {
    display: none;
  }
  .header-responsive-right-side {
    display: none;
  }
  .header-responsive-burger-menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header-responsive-icon {
    fill: #ffffff;
  }
}
@media(max-width: 479px) {
}

.top-container-no-text-top-container {
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
}
.top-container-no-text-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.footer-footer {
  width: 100%;
  border: 1px solid black;
  display: flex;
  position: relative;
  align-items: center;
  padding-top: 15px;
  padding-left: var(--dl-space-space-doubleunit);
  padding-right: var(--dl-space-space-doubleunit);
  flex-direction: row;
  padding-bottom: 15px;
  justify-content: center;
  background-color: var(--dl-color-gray-black);
}
.footer-menu {
  width: 100%;
  display: flex;
  padding: 0px;
  max-width: 1000px;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.footer-container {
  flex: 0 0 auto;
  width: 20%;
  height: 10%;
  display: flex;
  object-fit: cover;
  align-items: space-between;
  flex-direction: column;
}
.footer-navlink {
  display: contents;
}
.footer-image {
  width: 100%;
  height: 50%;
  align-self: center;
  max-height: 100px;
  object-fit: cover;
  text-decoration: none;
}
.footer-links-container {
  width: 60%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.footer-container1 {
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.footer-container2 {
  width: 33.3%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.footer-navlink1 {
  display: flex;
  
  flex-direction: row;
  text-decoration: none;
}
.footer-container3 {
  width: 33.3%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.footer-navlink2 {
  display: flex;
  
  flex-direction: row;
  text-decoration: none;
}
.footer-container4 {
  width: 33.3%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.footer-navlink3 {
  display: flex;
  
  flex-direction: row;
  text-decoration: none;
}
.footer-follow-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.footer-text {
  display: none;
  padding-bottom: var(--dl-space-space-halfunit);
}
.footer-icons-container {
  width: 66px;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
}
.footer-link {
  display: contents;
}
.footer-icon {
  fill: var(--dl-color-gray-white);
  width: 24px;
  height: 24px;
}
.footer-link1 {
  display: contents;
}
.footer-icon2 {
  fill: var(--dl-color-gray-white);
  width: 24px;
  height: 24px;
}
.footer-link2 {
  display: contents;
}
.footer-icon4 {
  fill: var(--dl-color-gray-white);
  width: 24px;
  height: 24px;
  display: none;
}

@media(max-width: 991px) {
  .footer-image {
    align-self: center;
  }
}
@media(max-width: 767px) {
  .footer-menu {
    flex-direction: column;
  }
  .footer-container {
    width: 30%;
  }
  .footer-image {
    width: 100%;
    align-self: center;
  }
  .footer-links-container {
    width: 100%;
  }
  .footer-container1 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .footer-navlink1 {
    
    justify-content: center;
  }
  .footer-navlink2 {
    
    justify-content: center;
  }
  .footer-navlink3 {
    
    justify-content: center;
  }
}
@media(max-width: 650px) {
  .gaestezimmer-container13 {
    flex-direction: column !important;
  }
  span.gaestezimmer-container14 {
    width: 80%;
  }
  span.gaestezimmer-container15 {
    align-items: center;
  }
  span.gaestezimmer-container16 {
    align-items: center;
  }
}
@media(max-width: 479px) {
  .footer-image {
    width: 100px;
    height: 50px;
  }
  .footer-follow-container {
    margin-left: 0px;
  }
  .footer-container1 {
    flex-direction: column;
    align-items: center;
  }
}

.gaestezimmer-container {
  width: 100%;
  height: auto;
  display: flex;
  min-height: 100vh;
  align-items: center;
  flex-direction: column;
}
.gaestezimmer-main {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  padding-top: var(--dl-space-space-quadruple);
  padding-left: var(--dl-space-space-doubleunit);
  padding-right: var(--dl-space-space-doubleunit);
  flex-direction: column;
  padding-bottom: var(--dl-space-space-quadruple);
  justify-content: flex-start;
}
.gaestezimmer-container01 {
  width: 85%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.gaestezimmer-container02 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: var(--dl-space-space-doubleunit);
}
.gaestezimmer-text {
  
  text-align: center;
}
.gaestezimmer-text01 {
  align-self: center;
  margin-top: var(--dl-space-space-halfunit);
  text-align: center;
  margin-bottom: 0px;
}
.gaestezimmer-container03 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.gaestezimmer-container13 {
  gap: 1%;
  width: 99%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  margin-bottom: var(--dl-space-space-unit);
}
.gaestezimmer-container14 {
  width: 45%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.gaestezimmer-container15 {
  width: 100%;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: flex-end;
}
.gaestezimmer-container16 {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}
.booking-error {
  color: rgb(255, 60, 60);
}
.calendar-error {
  color: rgb(255, 60, 60);
}
.booking-free {
  color: rgb(50, 160, 80);
}
.do-not-display {
  display: none;
}
.gaestezimmer-container04 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 0px;
  justify-content: flex-start;
}
.gaestezimmer-container05 {
  width: 100%;
  display: flex;
  padding: var(--dl-space-space-doubleunit);
  max-width: 900px;
  align-self: center;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-quadruple);
  flex-direction: column;
  background-color: #000000;
  border: 1px solid rgb(40, 40, 40);
}
.gaestezimmer-container06 {
  width: 100%;
  display: flex;
  max-width: 650px;
  align-self: center;
  align-items: flex-start;
  margin-bottom: var(--dl-space-space-unit);
  flex-direction: column;
  justify-content: center;
}
.gaestezimmer-text04 {
  align-self: center;
  margin-top: 0px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0px;
}
.gaestezimmer-text07 {
  align-self: center;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 0px;
}
.gaestezimmer-image {
  width: 100%;
  max-width: 650px;
  align-self: center;
  height: 400px;
  object-fit: cover;
}
.gaestezimmer-container07 {
  width: 100%;
  display: flex;
  padding: var(--dl-space-space-doubleunit);
  max-width: 900px;
  align-self: center;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 10px;
  margin-bottom: var(--dl-space-space-quadruple);
  flex-direction: column;
  background-color: #000000;
  border: 1px solid rgb(40, 40, 40);
}
.gaestezimmer-container08 {
  width: 100%;
  display: flex;
  max-width: 650px;
  align-self: center;
  align-items: flex-start;
  margin-bottom: var(--dl-space-space-unit);
  flex-direction: column;
  justify-content: center;
}
.gaestezimmer-text08 {
  align-self: center;
  margin-top: 0px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0px;
}
.gaestezimmer-text09 {
  align-self: center;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 0px;
}
.gaestezimmer-container09 {
  width: 100%;
  display: flex;
  padding: var(--dl-space-space-doubleunit);
  max-width: 900px;
  align-self: center;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 10px;
  margin-bottom: 0px;
  flex-direction: column;
  background-color: #000000;
  border: 1px solid rgb(40, 40, 40);
}
.gaestezimmer-container10 {
  width: 100%;
  display: flex;
  max-width: 650px;
  align-self: center;
  align-items: flex-start;
  margin-bottom: var(--dl-space-space-unit);
  flex-direction: column;
  justify-content: center;
}
.gaestezimmer-text10 {
  align-self: center;
  margin-top: 0px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 0px;
}
.gaestezimmer-text11 {
  align-self: center;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 0px;
}
.gaestezimmer-container11 {
  width: 100%;
  display: flex;
  margin-top: var(--dl-space-space-doubleunit);
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
}
.gaestezimmer-text13 {
  align-self: center;
  margin-top: var(--dl-space-space-halfunit);
  text-align: center;
  margin-bottom: 0px;
}
.gaestezimmer-container12 {
  width: 100%;
  height: 600px;
  display: flex;
  margin-top: var(--dl-space-space-doubleunit);
  align-items: center;
  margin-bottom: var(--dl-space-space-doubleunit);
  flex-direction: column;
  justify-content: flex-start;
}
.gaestezimmer-iframe {
  width: 1000000px;
  border: 0;
  height: 600px;
  max-width: 75%;
}
@media(max-width: 991px) {
  .gaestezimmer-container01 {
    width: 90%;
  }
  .gaestezimmer-iframe {
    max-width: 80%;
  }
}
@media(max-width: 767px) {
  .gaestezimmer-main {
    padding-left: var(--dl-space-space-unit);
    padding-right: var(--dl-space-space-unit);
  }
  .gaestezimmer-text {
    text-align: center;
  }
  .gaestezimmer-text01 {
    text-align: center;
  }
}
@media(max-width: 479px) {
  .gaestezimmer-container01 {
    width: 95%;
  }
  .gaestezimmer-text {
    text-align: center;
  }
  .gaestezimmer-text12 {
    text-align: center;
  }
}


.blurr-background {
  position: fixed;
  z-index: 6;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.form-container {
  height: fit-content;
  width: 80vw;
  padding: 10px;
  border-radius: 20px;
  padding-top: var(--dl-space-space-unit);
  padding-bottom: var(--dl-space-space-doubleunit);
  padding-left: var(--dl-space-space-quadruple);
  padding-right: var(--dl-space-space-quadruple);
  border: 3px solid #1f1f1f;
  overflow-y: auto;
}

.kontakt-form {
  height: fit-content;
  text-align: left;
}

.kontakt-container01 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--dl-space-space-unit);
}
.kontakt-container02 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
.kontakt-container03 {
  width: 30%;
  display: flex;
  align-items: center;
  margin-right: 1.1875%;
  flex-direction: row;
  justify-content: flex-start;
}
.kontakt-container04 {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: var(--dl-space-space-unit);
}
.kontakt-container05 {
  width: 100%;
  display: flex;
  align-items: start;
  flex-direction: row;
  justify-content: start;
}
.kontakt-text01 {
  
  font-weight: bold;
}
.kontakt-text02 {
  color: #ff0000;
  margin-left: 5px;
  font-weight: 400 !important;
}
.kontakt-text03 {
  color: #ff0000;
  margin-left: 5px;
  font-weight: 400 !important;
}
.kontakt-text04 {
  align-self: center;
  font-weight: bold;
  text-align: center;
}
.kontakt-textinput {
  width: 70%;
  
  display: flex;
  align-self: flex-end;
}
.kontakt-textarea {
  width: 100%;
  
}

@media(max-width: 767px) {
  .form-container {
    padding-top: 0;
    padding-bottom: var(--dl-space-space-unit);
    padding-left: var(--dl-space-space-doubleunit);
    padding-right: var(--dl-space-space-doubleunit);
  }
  .kontakt-container01 {
    flex-direction: row;
  }
  .kontakt-container02 {
    flex-direction: column;
  }
  .kontakt-container03 {
    width: 100%;
  }
  .kontakt-textinput {
    width: 100%;
  }
}
@media(max-width: 479px) {
  .kontakt-container02 {
    align-items: flex-start;
    flex-direction: column;
  }
  .form-container {
    padding-bottom: var(--dl-space-space-unit);
    padding-left: var(--dl-space-space-unit);
    padding-right: var(--dl-space-space-unit);
  }
}

.close {
  font-size: 25pt;
  height: 20pt;
  width: 20pt;
  display: flex; 
  justify-content: center;
  font-weight: 600;
}

@media(max-width: 767px) {
  .close {
    font-size: 26pt;
    height: 20pt;
    width: 20pt;
  }
}
@media(max-width: 479px) {
  .kontakt-container02 {
    align-items: flex-start;
    flex-direction: column;
  }
  .close {
    font-size: 20pt;
    height: 15pt;
    width: 15pt;
  }
}

.close:hover {
  cursor: pointer;
}

#checkin, #checkout, #checkin-wohnung, #checkout-wohnung {
  width: 100%;
}

label {
  text-align: left;
}

input[type=checkbox] {
  width: 25pt;
  height: 25pt;
  border: solid 1px #ccc;
  display: inline-block;
  content: '\2713';
  color: transparent;
  display: block;
  text-align: center;
}

@media(max-width: 991px) {
  input[type=checkbox] {
    width: 20pt;
    height: 20pt;
  }
}
@media(max-width: 767px) {
  input[type=checkbox] {
    width: 15pt;
    height: 15pt;
  }
}
@media(max-width: 350px) {
  input[type=checkbox] {
    width: 10pt;
    height: 10pt;
  }
}



.heading-container {
  max-width: 80%; 
  display: inline-block; 
}

@media(max-width: 767px) {
  .heading-container {
    padding-top: var(--dl-space-space-halfunit);
  }
}

.calendar {
  background-color: #000000;
}

.zimmerSlides, .wohnungSlides, .breakfastSlides {
  display: none;
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  width: fit-content;
  margin: auto;
}

/* Next & previous buttons */
.arrow-container {
}

.prev, .next {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  display: flex;
  justify-content: space-between;
  width: 42px;
  height: 42px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  cursor: pointer;
  background-color: rgba(0,0,0,0.3);
}

.next {
  margin-left: calc(100% - 42px);
  border-radius: 3px 0 0 3px;
}

.prev {
  margin-right: calc(100% - 42px);
  border-radius: 0 3px 3px 0;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: black;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}