/* ===== 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; }

}


/* ===== Times: symmetrisch + responsive ===== */

/* Wrapper (dein Container heißt nl-slot-group) */
.nl-slot-group{
  display: grid;
  gap: 10px;
}

/* Die Buttons selbst bilden das Grid */
.nl-slot-group{
  /* Titel + Subtext bleiben normal, nur die time-pill werden ins Grid gelegt */
}

/* Grid nur für die Pills: wir nutzen auto-placement */
.nl-slot-group{
  /* nichts */
}

/* Wir machen die Pills zu Grid-Items in einem eigenen Grid:
   Trick: wir setzen auf den Container und lassen Titel/Sub normal,
   aber "nur Buttons" sollen ins Grid -> simplest: wir machen
   den Container zum Grid und geben den Titeln volle Breite. */
.nl-slot-group{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* Desktop symmetrisch */
  gap: 12px;
}

/* Titel/Sub sollen über alle Spalten */
.nl-slot-section-title,
.nl-slot-section-sub{
  grid-column: 1 / -1;
}

/* Inputs (hidden) aus dem Flow nehmen, damit sie keine Grid-Löcher erzeugen */
.nl-slot-group > input[type="hidden"]{
  display: none !important;
}

/* Pills: volle Breite im Grid, gleiche Höhe */
.time-pill{
  width: 100%;
  max-width: none;
  margin: 0;
  display:flex;
  align-items:center;
  justify-content:center;

  height: 56px;                 /* etwas kompakter */
  padding: 0 12px;
  font-size: 0.98rem;
  font-weight: 700;

  background:#fff;
  border:1px solid #E8EFFB;
  border-radius:10px;
  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;
}

/* Tablet */
@media (max-width: 900px){
  .nl-slot-group{
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* symmetrisch */
    gap: 10px;
  }
  .time-pill{
    height: 50px;
    font-size: 0.92rem;
  }
}

/* Mobile: IMMER 3 Zeiten nebeneinander */
@media (max-width: 700px){
  .nl-slot-group{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .time-pill{
    height: 46px;
    font-size: 0.86rem;
    padding: 0 8px;
  }
}

/* sehr kleine Phones: optional 2 Spalten statt 3 (wenn du willst, sonst löschen) */
@media (max-width: 360px){
  .nl-slot-group{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}