<style>  
    .datepicker {
      position: relative;
      max-width: 100%;
    }

    .calendar {
      /*position: absolute;*/
      /*top: 110%;*/
      left: -1px;
      background: #fff;
      /*border-left: 1px solid #dedede;
	  border-right: 1px solid #dedede;
	  border-bottom: 1px solid #dedede;*/
      padding: 10px;
      display: none;
      z-index: 1;
      /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
      flex-direction: column;
	  width: calc(100% - 18px);
	  min-width: 300px;
	  border: 1px;
	  border-radius: 5px;
	  position: absolute;  
font-size: 90%;
    color: #484848;
	  }
     .month {
      width: 300px;
    }
    .calendar-nav {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5em;
      align-items: center;
    }
    .calendar-nav button {
      background: none;
      border: none;
      font-size: 1.2em;
      cursor: pointer;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      width: 14.28%;
      text-align: center;
      padding: 0.6em;
      cursor: pointer;
      border-radius: 6px;
    }
    td:hover {
      background: #f0f0f0;
    }
    .selected {
      background: #007bff;
      color: white;
      font-weight: bold;
      border-radius: 50%;
    }
    .in-range {
      background: #d0e8ff;
      color: #003366;
      border-radius: 0;
    }
    .range-start {
      background: #7ebcff;
      color: white;
      font-weight: bold;
      border-radius: 50% 0 0 50%;
    }
    .range-end {
      background: #7ebcff;
      color: white;
      font-weight: bold;
      border-radius: 0 50% 50% 0;
    }
    .guest-selector {
      margin-top: 1em;
      display: flex;
      align-items: center;
      gap: 1em;
    }
    .guest-selector button {
      padding: 0.5em 1em;
      font-size: 1em;
      border: 1px solid #ccc;
      background: #f9f9f9;
      cursor: pointer;
      border-radius: 4px;
    }
    .guest-selector span {
      min-width: 2em;
      text-align: center;
      font-weight: bold;
    }
    .calendar-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 1em;
    }
    .calendar-footer button {
      padding: 0.5em 1em;
      border-radius: 4px;
      border: none;
      background: #7ebcff;
      color: white;
      cursor: pointer;
    }
    /* Visuelle Anpassung: kein Range aktiv */
    .datepicker[data-range="false"] .in-range,
    .datepicker[data-range="false"] .range-start,
    .datepicker[data-range="false"] .range-end {
      background: transparent;
      color: inherit;
      font-weight: normal;
      border-radius: 6px;
    }	

.calendar td.disabled {
  opacity: 0.3;
  pointer-events: none;
  cursor: not-allowed;
}
	
    @media (max-width: 768px) {
      .month {
        width: 100%;
      }
    }
</style>