/* ===== Step 5: Datum & Zeit ===== */
.dt-note{ margin: var(--space-1) 0 var(--space-2); color:#657497; font-size: var(--fs-h3); font-weight: 800; }

/* Kalender */
.cal{
  --cal-row-h: 36px;
  --cal-gap: 8px;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  box-shadow: 0 8px 24px rgba(2,8,23,.06);
  padding: var(--space-2);
}
.cal-header{
  display:grid; grid-template-columns: 32px 1fr 32px; align-items:center; gap:8px; margin-bottom:8px;
}
.cal-month{ grid-column:2; text-align:center; font-weight:800; font-size: var(--fs-h3); }
.cal-btn{
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; background:#fff; font-weight:800; font-size:16px; cursor:pointer;
  color:black;
}
.cal-btn:hover{ box-shadow: 0 6px 18px rgba(2,8,23,.08); transform: translateY(-1px); }
.cal-btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.cal-weekdays, .cal-grid{
  display:grid; grid-template-columns: repeat(7, minmax(36px,1fr)); gap: var(--cal-gap);
}
.cal-weekdays{ margin-bottom: var(--cal-gap); color:#6B7280; font-size:.92rem; text-align:center; user-select:none; }
.cal-day{
  height: var(--cal-row-h); display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #E8EFFB; border-radius:10px; background:#F8FBFF; color: var(--text);
  cursor:pointer; transition: box-shadow .12s ease, transform .12s ease, background .12s ease, border-color .12s ease;
  font-size: .95rem;
}
.cal-day:hover{ box-shadow: 0 6px 18px rgba(2,8,23,.08); transform: translateY(-1px); }
.cal-day.is-outside, .cal-day:disabled{ opacity:.45; cursor:not-allowed; filter: grayscale(.05); background:#f3f6fb; border-color:#EEF1F6; }
.cal-day.is-today{ border-color: color-mix(in oklab, var(--brand) 40%, #fff); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--brand) 20%, transparent); }
.cal-day.is-selected{ color:#fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,246,.25); }

.sep{ height:1px; background:#EDF2F7; border:0; margin: var(--space-3) 0; }

/* Times */
.time-head{ margin: var(--space-3) 0 var(--space-2); color:#6B7280; font-size: var(--fs-h3); font-weight: 800; }
.time-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.time-pill{
  display:inline-flex; align-items:center; justify-content:center;
  height: 64px; padding: 0 18px; font-size: 1.06rem; font-weight: 700;
  background:#fff; border:1px solid #E8EFFB; border-radius:8px; cursor:pointer;
  transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease, background .12s ease;
  color:black!important;-webkit-text-fill-color:#000!important;
}
.time-pill:hover{ box-shadow: 0 6px 18px rgba(2,8,23,.08); transform: translateY(-1px); }
.time-pill.is-selected{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,246,.25); background:#fff; }

@media (max-width: 900px){
  .cal{ --cal-gap: 6px; }
  .time-grid{ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); }
  .time-pill{ height:56px; font-size: 1.02rem;color:black!important;-webkit-text-fill-color:#000!important; max-width:50%;}
}