/* Buchungs-Widget Erstgespraech. Nutzt nur die Tokens aus styles.css. */

.nzb-wrap {
  background: var(--color-bg-white);
  border: 1px solid #e3e7ec;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-md);
}

.nzb-step + .nzb-step { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid #edf0f3; }

.nzb-h {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.15rem; margin: 0 0 var(--spacing-sm);
}
.nzb-h small { font-weight: 400; color: var(--color-text-light); font-size: 0.9rem; }
.nzb-num {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--color-primary); color: #fff; font-size: 0.95rem;
}

.nzb-days {
  display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.nzb-day {
  flex: none; scroll-snap-align: start;
  min-width: 4.6rem; padding: 0.6rem 0.5rem;
  border: 1px solid #cfd6de; border-radius: var(--radius-md);
  background: #fff; color: var(--color-text-main);
  font: inherit; line-height: 1.2; cursor: pointer; text-align: center;
}
.nzb-day span { display: block; font-size: 0.85rem; color: var(--color-text-light); }
.nzb-day strong { font-size: 1.05rem; }

.nzb-slots {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.5rem;
}
.nzb-slot {
  padding: 0.75rem 0.5rem; min-height: 48px;
  border: 1px solid #cfd6de; border-radius: var(--radius-md);
  background: #fff; color: var(--color-primary);
  font: inherit; font-weight: 600; cursor: pointer;
}

.nzb-day:hover, .nzb-slot:hover { border-color: var(--color-secondary); }
.nzb-day.is-on, .nzb-slot.is-on {
  background: var(--color-secondary); border-color: var(--color-secondary); color: #fff;
}
.nzb-day.is-on span { color: rgba(255, 255, 255, 0.85); }
.nzb-day:focus-visible, .nzb-slot:focus-visible, .nzb-radio input:focus-visible, .nzb-consent input:focus-visible {
  outline: 3px solid var(--color-accent); outline-offset: 2px;
}

.nzb-picked {
  margin: 0 0 var(--spacing-sm); padding: 0.75rem 1rem;
  background: #eef7f5; border-left: 4px solid var(--color-secondary); border-radius: var(--radius-sm);
}

.nzb-channels { border: 0; padding: 0; margin: 0 0 var(--spacing-sm); }
.nzb-channels legend { margin-bottom: 0.4rem; }
.nzb-radio {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 1.2rem 0.4rem 0; cursor: pointer; min-height: 44px;
}
.nzb-radio input, .nzb-consent input { width: 1.2rem; height: 1.2rem; accent-color: var(--color-secondary); }

.nzb-consent {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.95rem; color: var(--color-text-light); margin: var(--spacing-sm) 0;
}
.nzb-consent input { flex: none; margin-top: 0.2rem; }
.nzb-consent a { color: var(--color-secondary); text-decoration: underline; }
.nzb-form textarea { font: inherit; resize: vertical; }
/* Fester Header: beim Scrollen zum Formular nicht die Ueberschrift verdecken. */
.nzb-form { scroll-margin-top: calc(var(--header-height) + 16px); }

.nzb-form .is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.nzb-msg { color: var(--color-error); font-weight: 600; min-height: 1.4em; margin-bottom: 0.5rem; }
.nzb-submit { width: 100%; }
.nzb-submit[disabled] { opacity: 0.7; cursor: wait; }
.nzb-fine { font-size: 0.9rem; color: var(--color-text-light); margin: 0.6rem 0 0; text-align: center; }

.nzb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nzb-loading, .nzb-note { margin: 0; padding: 1rem; border-radius: var(--radius-md); background: var(--color-bg-light); }
.nzb-error { background: #fdecea; color: #8a1c1c; margin-bottom: var(--spacing-sm); }

.nzb-done { text-align: center; padding: var(--spacing-sm) 0; outline: none; }
.nzb-done h3 { color: var(--color-success); }

@media (max-width: 600px) {
  .nzb-wrap { padding: var(--spacing-sm); border-radius: var(--radius-md); }
  .nzb-slots { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .nzb-days { scroll-behavior: auto; }
}