.booking-calendar {margin-top:1.2em; margin-bottom:1.1em;}
.calendar-table {border-collapse:collapse;width:100%;max-width:330px;}
.calendar-table th, .calendar-table td {border:1px solid #e0e2e7;width:14%;height:37px;text-align:center;cursor:pointer;font-size:1em;}
.calendar-table th {background:#f8fafd;}
.calendar-table .belegt {background:#f4dddd;color:#bbb;pointer-events:none;}
.calendar-table .frei:hover {background:#58b55d;}
.calendar-table .selected {background:#389D3E;color:#fff;}
.calendar-table .zwischen {background:#58b55d;color:#fff;}
.calendar-table .preview {background:#58b55d;}
.calendar-table .weekend {background:#f6f7f9;/*color:#c0c6cf;*/cursor:default;}
.calendar-table .weekend:hover {background:#f6f7f9;}

/* Wochenende darf in der Auswahl trotzdem sichtbar markiert werden */
.calendar-table td.weekend.selected {background:#1976d2;color:#fff;}
.calendar-table td.weekend.zwischen {background:#58b55d;color:#fff;}
.calendar-table td.weekend.preview {background:#58b55d;color:#fff;}
.calendar-nav {display:flex;gap:22px;margin-bottom:8px;align-items:center;justify-content: flex-start;}
.calendar-nav button {
  background: #f8fafd;
  padding: 6px 15px;
  border: 1px solid #e0e2e7;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.3em;
  color: #389D3E;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s;
  min-width: 36px;
  min-height: 36px;
  box-sizing: border-box;
  user-select: none;
}
.calendar-nav button:hover {
  background: #e6eefb;
}
.calendar-nav span {
  font-weight: bold;
  font-size: 1.13em;
  min-width: 110px;
  text-align: center;
  letter-spacing: 0.5px;
}
@media (max-width:500px){
   .calendar-table th, .calendar-table td {
      font-size:.94em;
      height:30px;
   }
   .calendar-table {
      max-width:100%;
   }
}


/* --- Halbtage: AM/PM diagonal darstellen --- */
.calendar-table td { position: relative; overflow: hidden; }
.calendar-table td .daynum{ position: relative; z-index: 2; display: inline-block; }

/* Layer: ::before = rot (Belegung), ::after = grün (Auswahl) */
.calendar-table td.halb-belegt-am::before,
.calendar-table td.halb-belegt-pm::before,
.calendar-table td.sel-start-pm::after,
.calendar-table td.sel-end-am::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Rot: belegt AM (linke obere Hälfte) */
.calendar-table td.halb-belegt-am::before{
  background: linear-gradient(135deg, #f4dddd 0 50%, transparent 50% 100%);
}

/* Rot: belegt PM (rechte untere Hälfte) */
.calendar-table td.halb-belegt-pm::before{
  background: linear-gradient(135deg, transparent 0 50%, #f4dddd 50% 100%);
}

/* Grün: Starttag (PM) */
.calendar-table td.sel-start-pm::after{
  background: linear-gradient(135deg, transparent 0 50%, #58b55d 50% 100%);
}

/* Grün: Endtag (AM) */
.calendar-table td.sel-end-am::after{
  background: linear-gradient(135deg, #58b55d 0 50%, transparent 50% 100%);
}

/* Zwischen-Tage bleiben voll grün */

/* Vergangene Tage (nicht buchbar) */
.kalender td.past{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  background:#f6f7f9;
}