/* Mobile- und Tablet-Styles für Bildschirme bis 768px Breite */
@media (max-width: 768px) {
  /* Grundlayout */
  body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Header */
  header {
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 1vh 0;
  }
  #logo {
    width: 40% !important;
    height: auto;
    margin: 0.5vh 0;
  }
  header h1 {
    font-size: 6vw !important;
    text-align: center;
    margin-bottom: 1vh;
  }
  nav {
    width: 100% !important;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1vh;
  }
  .nav-item {
    flex: 1 1 auto;
    max-width: 45%;
    margin: 0.5vh;
  }
  .nav-item a {
    font-size: 4vw !important;
  }

  /* Slideshow & Galerie */
  .slideshow-container {
    width: 100% !important;
    height: auto !important;
    padding-top: 12vh;
  }
  .wrapper,
  .wrapper-holder {
    width: 100% !important;
  }
  .slider,
  #slider-section {
    width: 100% !important;
    height: auto !important;
  }

  /* Beschreibungstext */
  .desc-section {
    flex-direction: column;
    padding: 2vh 0;
  }
  .desc {
    position: relative;
    width: 90% !important;
    left: 5% !important;
    padding: 2vh 0;
  }
  .desc h2 {
    font-size: 6vw !important;
  }
  .desc p {
    font-size: 4vw !important;
    line-height: 1.4;
  }

  /* Booking-Section */
  .booking-section {
    flex-direction: column !important;
    gap: 4vh !important;
    padding: 2vh 5%;
  }
  #calendar {
    width: 100% !important;
    height: 50vh !important;
  }
  #calendar-days-div {
    grid-template-columns: repeat(7, 1fr) !important;
    grid-template-rows: repeat(5, 1fr) !important;
    font-size: 2.5vw !important;
  }
  #booking-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 2vh !important;
    padding-bottom: 5vh;
  }
  #booking-form input,
  #booking-form textarea {
    width: 100% !important;
    font-size: 4vw !important;
    padding: 1vh;
  }
  #booking-form-button {
    width: 80% !important;
    font-size: 5vw !important;
    margin: 2vh auto !important;
    height: auto !important;
    padding: 2vh 0;
  }

  /* Footer */
  footer {
    flex-direction: column !important;
    gap: 2vh !important;
    padding: 3vh 0 !important;
  }
  footer div {
    width: 100% !important;
    text-align: center;
  }
  footer a,
  footer p {
    font-size: 4vw !important;
  }
}