/* ---------------------------------------------------------------------------
 * Online-Anmeldung (nb-anmeldung).
 *
 * Zero hex literals here - every colour is a var(--vsr-*) declared in
 * tokens.css. tests/FrontendTokensTest.php enforces that across every
 * .css/.php/.js file under site/templates.
 * ------------------------------------------------------------------------- */

.nb {
  padding: var(--vsr-section-top) var(--vsr-gutter) var(--vsr-section-bottom);
}

.nb-head {
  margin-bottom: 24px;
}
.nb-head__week {
  color: var(--vsr-muted);
  font-size: var(--vsr-fs-nav);
}

.nb-card {
  background: var(--vsr-surface);
  border: 1px solid var(--vsr-border);
  border-radius: var(--vsr-radius-lg);
  padding: 32px;
}
.nb-card__title {
  font-family: var(--vsr-font-heading);
  font-weight: var(--vsr-fw-semibold);
  font-size: var(--vsr-fs-h2-key);
  color: var(--vsr-ink);
  margin: 0 0 8px;
}
.nb-card__lede {
  color: var(--vsr-body);
  margin: 0 0 20px;
}

.nb-keyform {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nb-input {
  border: 1px solid var(--vsr-field-border);
  border-radius: var(--vsr-radius-sm);
  padding: 10px 14px;
  font-size: var(--vsr-fs-body);
  font-family: var(--vsr-font-body);
  color: var(--vsr-ink);
  background: var(--vsr-surface);
}
.nb-input--key {
  flex: 1 1 200px;
  text-transform: uppercase;
}
.nb-btn {
  border: none;
  border-radius: var(--vsr-radius-pill);
  padding: 10px 22px;
  font-size: var(--vsr-fs-btn);
  font-weight: var(--vsr-fw-semibold);
  cursor: pointer;
}
.nb-btn--dark { background: var(--vsr-ink); color: var(--vsr-on-dark); }
.nb-btn--dark:hover { background: var(--vsr-ink-hover); }
.nb-btn--accent { background: var(--vsr-accent); color: var(--vsr-ink); }
.nb-btn--accent:hover { background: var(--vsr-accent-hover); }
.nb-btn--ghost { background: var(--vsr-panel); color: var(--vsr-ink); }
.nb-btn:disabled { background: var(--vsr-disabled-ink); cursor: not-allowed; }

.nb-error {
  font-size: var(--vsr-fs-meta);
  color: var(--vsr-error-ink);
  margin-top: 10px;
}

.nb-family {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--vsr-panel);
  border-radius: var(--vsr-radius);
  padding: 14px 18px;
  margin-bottom: 26px;
}
.nb-family__initial {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--vsr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vsr-font-heading);
  font-weight: var(--vsr-fw-bold);
  color: var(--vsr-ink);
  flex-shrink: 0;
}
.nb-family__id { flex: 1; }
.nb-family__name {
  font-weight: var(--vsr-fw-semibold);
  color: var(--vsr-ink);
}
.nb-family__key {
  font-size: var(--vsr-fs-meta);
  color: var(--vsr-muted);
}
.nb-linkbtn {
  background: none;
  border: none;
  color: var(--vsr-link);
  cursor: pointer;
  font-size: var(--vsr-fs-nav);
}
.nb-linkbtn:hover { color: var(--vsr-link-hover); }

.nb-h2 {
  font-family: var(--vsr-font-heading);
  font-size: var(--vsr-fs-h2-form);
  font-weight: var(--vsr-fw-semibold);
  color: var(--vsr-ink);
  margin: 24px 0 4px;
}
.nb-hint {
  color: var(--vsr-muted);
  font-size: var(--vsr-fs-meta);
  margin: 0 0 14px;
}
.nb-optional {
  font-weight: var(--vsr-fw-normal);
  color: var(--vsr-muted);
  font-size: var(--vsr-fs-meta);
}

.nb-days {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nb-day {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 12px;
  align-items: center;
  background: var(--vsr-row-off-bg);
  border: 1px solid var(--vsr-row-off-border);
  border-radius: 10px;
  padding: 10px 16px;
}
.nb-day--on {
  background: var(--vsr-row-on-bg);
  border-color: var(--vsr-row-on-border);
}
.nb-day__label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: var(--vsr-fs-name);
  font-weight: var(--vsr-fw-semibold);
  color: var(--vsr-ink);
}
.nb-day input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--vsr-link);
}
.nb-input--time { width: 100%; }
.nb-input--time:disabled { color: var(--vsr-disabled-ink); }

.nb-ende {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nb-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--vsr-body);
  font-size: var(--vsr-fs-card);
}

.nb-textarea {
  width: 100%;
  border: 1px solid var(--vsr-field-border);
  border-radius: var(--vsr-radius-sm);
  padding: 10px 14px;
  font-family: var(--vsr-font-body);
  font-size: var(--vsr-fs-body);
  color: var(--vsr-ink);
  resize: vertical;
}

.nb-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.nb-done__check {
  font-size: var(--vsr-fs-done-check);
  color: var(--vsr-link);
}
.nb-done__lede { color: var(--vsr-body); }
.nb-done__phone { color: var(--vsr-muted); font-size: var(--vsr-fs-meta); }
.nb-done__actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.nb-closed {
  background: var(--vsr-warn-bg);
  border: 1px solid var(--vsr-warn-border);
  border-radius: var(--vsr-radius-card);
  padding: 28px;
  text-align: center;
}
.nb-closed__title {
  font-family: var(--vsr-font-heading);
  font-weight: var(--vsr-fw-semibold);
  font-size: var(--vsr-fs-h3);
  color: var(--vsr-warn-ink);
  margin-bottom: 6px;
}
.nb-closed__body {
  font-size: var(--vsr-fs-nav);
  color: var(--vsr-warn-body);
  margin: 0;
}

@media (max-width: 520px) {
  .nb-day {
    grid-template-columns: 1fr;
  }
  .nb-keyform {
    flex-wrap: wrap;
  }
  .nb-input--key {
    flex: 1 1 100%;
  }
}