/* Booking-Seite — nutzt Buttons, Pills, Formularfelder und Tokens aus style.css */

.booking-flow { padding: var(--space-5) 0 120px; }

.booking-step { max-width: 640px; margin-bottom: 56px; }
.booking-step-title {
  font-size: var(--fs-h3); display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5);
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--beige);
  font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink); flex-shrink: 0;
}

/* Kalender */
.calendar {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: var(--space-5); max-width: 420px; box-shadow: var(--shadow-sm);
}
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.calendar-month-label { font-family: var(--serif); font-size: 17px; }
.calendar-nav {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink-soft);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.calendar-nav:hover { border-color: var(--ink); color: var(--ink); transform: var(--lift); }
.calendar-nav:active { transform: var(--press); }
.calendar-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); margin-bottom: 6px;
  font-size: var(--fs-2xs); color: var(--ink-soft); text-align: center;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.cal-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: var(--fs-xs); border-radius: 50%; border: none; background: none;
  color: var(--ink-soft); cursor: default;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cal-cell--blank { visibility: hidden; }
.cal-cell--available { color: var(--ink); cursor: pointer; background: var(--paper-alt); }
.cal-cell--available:hover { background: var(--beige); transform: scale(1.06); }
.cal-cell--selected { background: var(--ink) !important; color: var(--on-ink) !important; }
.cal-cell--disabled { color: var(--ink-mute); opacity: 0.55; }

/* Slot-Liste (Button-Stil kommt aus style.css) */
.slot-list { margin-top: var(--space-5); max-width: 640px; }
.slot-list-label { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--space-3); }
.slot-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Auswahl-Zusammenfassung */
.selection-summary {
  font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4);
  background: var(--paper-alt); border-radius: var(--radius-sm); display: inline-block;
}

/* Formular */
.booking-form { max-width: 640px; display: flex; flex-direction: column; gap: var(--space-5); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-row { display: flex; flex-direction: column; gap: var(--space-2); }
.form-row label { font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--ink-soft); }

.form-row input,
.form-row select,
.form-row textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover { border-color: var(--line-strong); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--beige-deep);
  box-shadow: var(--ring);
}

.booking-note { font-size: var(--fs-xs); color: var(--ink-soft); }

.booking-form .btn-primary { align-self: flex-start; margin-top: var(--space-1); }

.form-status { font-size: var(--fs-sm); min-height: 20px; }
.form-status.success { color: var(--ok); }
.form-status.error { color: var(--danger); }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}