/*
 * Nice Style – Buchungs-Assistent und Token-Seiten.
 *
 * Nutzt die Design-Tokens des Themes (`--c-*`, `--s-*`, `--r-*`, `--f-*`) und nennt zu jedem
 * Token einen Rückfallwert: die Seiten bleiben damit auch ohne das Nice-Style-Theme benutzbar.
 * Die Wurzelklasse `.ns-booking` bleibt der einzige Einstieg, damit das Theme in Plan 5 weiter
 * gestalten kann, ohne hier etwas zu überschreiben.
 *
 * Grundsätze: Tippziele mindestens 44 px, sichtbarer Fokusring auf allen bedienbaren Elementen,
 * Kontrast nach AA, und bei `prefers-reduced-motion: reduce` keine Übergänge.
 */

.ns-booking {
  --ns-bg: var(--c-bg, #0B0B0C);
  --ns-surface: var(--c-surface, #141416);
  --ns-surface-2: var(--c-surface-2, #1C1C1F);
  --ns-line: var(--c-line, rgba(243, 237, 226, .14));
  --ns-line-strong: var(--c-line-strong, rgba(243, 237, 226, .40));
  --ns-text: var(--c-text, #F3EDE2);
  --ns-muted: var(--c-text-muted, rgba(243, 237, 226, .70));
  --ns-gold: var(--c-gold, #C9A24D);
  --ns-gold-light: var(--c-gold-light, #E3C77A);
  --ns-gold-bg: var(--c-gold-bg, rgba(201, 162, 77, .12));
  --ns-ok: var(--c-success, #3FA97A);
  --ns-ok-bg: var(--c-success-bg, rgba(63, 169, 122, .12));
  --ns-warn: var(--c-warning, #D9A441);
  --ns-warn-bg: var(--c-warning-bg, rgba(217, 164, 65, .12));
  --ns-bad: var(--c-danger, #D95C4A);
  /* Kleiner Text auf getönter Fläche: --ns-bad erreicht dort nur 4,3:1 (gemessen). */
  --ns-bad-light: var(--c-danger-light, #E8836F);
  --ns-bad-bg: var(--c-danger-bg, rgba(217, 92, 74, .12));
  --ns-info: var(--c-info, #5B9BD5);
  --ns-info-bg: var(--c-info-bg, rgba(91, 155, 213, .12));
  --ns-tap: var(--tap-min, 44px);
  --ns-r-sm: var(--r-sm, 6px);
  --ns-r-md: var(--r-md, 12px);
  --ns-r-lg: var(--r-lg, 20px);
  --ns-gap-1: var(--s-1, 4px);
  --ns-gap-2: var(--s-2, 8px);
  --ns-gap-3: var(--s-3, 12px);
  --ns-gap-4: var(--s-4, 16px);
  --ns-gap-6: var(--s-6, 24px);
  --ns-gap-8: var(--s-8, 32px);
  --ns-ease: var(--ease, cubic-bezier(.22, 1, .36, 1));
  --ns-t: var(--t-base, 200ms);
  /* Höhe, die das Skelett bis zum ersten Rendern freihält – s. `.ns-booking__app`. */
  --ns-app-reserve: 53rem;

  color: var(--ns-text);
  font-family: var(--f-body, system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: var(--fs-base, 1.0625rem);
  line-height: var(--lh-body, 1.62);
  max-width: var(--container-narrow, 780px);
  margin-inline: auto;
}

.ns-booking *,
.ns-booking *::before,
.ns-booking *::after { box-sizing: border-box; }

/* Klassenregeln wie `.ns-note { display: block }` schlagen den UA-Standard für [hidden]. */
.ns-booking [hidden] { display: none; }

/* -------------------------------------------------------------- Ohne-Skript-Weiche -- */

.ns-booking__app { display: none; }
.ns-js .ns-booking__app { display: block; }

/*
 * Bis booking.js übernimmt, hält das Skelett die Höhe des ersten Schritts frei. Ohne diese
 * Reservierung rutscht der Fuß beim Austausch um gut 800 px nach unten – auf dem Handy allein
 * 0,38 Layout-Verschiebung (Lighthouse CLS). Sobald der Assistent steht, fällt die Reservierung
 * weg (`ist-bereit`), damit kurze Schritte keinen leeren Streifen hinterlassen.
 */
.ns-js .ns-booking__app { min-height: var(--ns-app-reserve); }
.ns-js .ns-booking__app.ist-bereit { min-height: 0; }

@media (min-width: 48rem) {
  .ns-booking { --ns-app-reserve: 34rem; }
}
.ns-js .ns-booking__fallback { display: none; }
.ns-js .ns-js-only { display: inline-flex; }
.ns-js-only { display: none; }

/* ------------------------------------------------------------------------ Grundformen -- */

.ns-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.ns-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ns-gap-3);
  margin-bottom: var(--ns-gap-6);
}

.ns-page-title,
.ns-card__title,
.ns-wizard__title {
  font-family: var(--f-display, Georgia, serif);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-heading, 1.18);
  margin: 0;
}

.ns-page-title { font-size: var(--fs-2xl, 1.9rem); }
.ns-wizard__title { font-size: var(--fs-xl, 1.5rem); margin-bottom: var(--ns-gap-4); }
.ns-card__title { font-size: var(--fs-lg, 1.2rem); margin-bottom: var(--ns-gap-2); }
.ns-card__subtitle { font-size: var(--fs-base, 1rem); margin: var(--ns-gap-4) 0 var(--ns-gap-2); }
.ns-page-intro, .ns-card__text { margin: 0 0 var(--ns-gap-3); color: var(--ns-muted); }
.ns-card__text--muted { font-size: var(--fs-sm, .94rem); }
.ns-wizard__title:focus-visible { outline: none; }
.ns-wizard__title:focus { outline: none; }

.ns-card {
  background: var(--ns-surface);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-r-md);
  padding: var(--ns-gap-6);
  margin-bottom: var(--ns-gap-4);
}

.ns-card--quiet { background: transparent; }
.ns-card--summary { background: var(--ns-surface-2); }
.ns-card--warn { border-color: var(--ns-warn); }
.ns-card--ok { border-color: var(--ns-ok); }
.ns-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-gap-3); margin: var(--ns-gap-4) 0 0; }

/* --------------------------------------------------------------------------- Knöpfe -- */

.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ns-gap-2);
  min-height: var(--ns-tap);
  min-width: var(--ns-tap);
  padding: var(--ns-gap-2) var(--ns-gap-6);
  border: 1px solid var(--ns-line-strong);
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--ns-text);
  font: inherit;
  font-weight: var(--fw-semibold, 600);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ns-t) var(--ns-ease), border-color var(--ns-t) var(--ns-ease), color var(--ns-t) var(--ns-ease);
}

.ns-btn:hover { border-color: var(--ns-gold); color: var(--ns-gold-light); }
.ns-btn:active { transform: translateY(1px); }
.ns-btn:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: var(--focus-offset, 3px); }
.ns-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ns-btn[disabled]:hover { border-color: var(--ns-line-strong); color: var(--ns-text); }

.ns-btn--gold { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-bg); }
.ns-btn--gold:hover { background: var(--ns-gold-light); border-color: var(--ns-gold-light); color: var(--ns-bg); }
.ns-btn--ghost { background: transparent; }
.ns-btn--danger { border-color: var(--ns-bad); color: var(--ns-bad); }
.ns-btn--danger:hover { background: var(--ns-bad-bg); border-color: var(--ns-bad); color: var(--ns-text); }

.ns-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ns-gold);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.ns-link:hover { color: var(--ns-gold-light); }
.ns-link:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: var(--focus-offset, 3px); }

.ns-contact { display: flex; flex-wrap: wrap; gap: var(--ns-gap-3); margin: var(--ns-gap-4) 0 0; }
.ns-contact__number { color: var(--ns-muted); font-weight: var(--fw-regular, 400); }

/* -------------------------------------------------------------------------- Hinweise -- */

.ns-note {
  display: block;
  border: 1px solid var(--ns-line);
  border-left-width: 3px;
  border-radius: var(--ns-r-sm);
  padding: var(--ns-gap-3) var(--ns-gap-4);
  margin: 0 0 var(--ns-gap-4);
  font-size: var(--fs-sm, .94rem);
}

.ns-note--info { background: var(--ns-info-bg); border-left-color: var(--ns-info); }
.ns-note--success { background: var(--ns-ok-bg); border-left-color: var(--ns-ok); }
.ns-note--warn { background: var(--ns-warn-bg); border-left-color: var(--ns-warn); }
.ns-note--error { background: var(--ns-bad-bg); border-left-color: var(--ns-bad); }
.ns-note .ns-btn { margin-left: var(--ns-gap-2); }
.ns-note__text { margin: var(--ns-gap-2) 0 0; }

.ns-badge {
  display: inline-block;
  padding: var(--ns-gap-1) var(--ns-gap-3);
  border-radius: var(--r-pill, 999px);
  font-size: var(--fs-xs, .81rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: var(--ls-label, .12em);
  text-transform: uppercase;
}

.ns-badge--wait { background: var(--ns-warn-bg); color: var(--ns-warn); }
.ns-badge--ok { background: var(--ns-ok-bg); color: var(--ns-ok); }
.ns-badge--bad { background: var(--ns-bad-bg); color: var(--ns-bad-light); }
.ns-badge--info { background: var(--ns-info-bg); color: var(--ns-info); }

.ns-tag {
  display: inline-block;
  margin-left: var(--ns-gap-2);
  padding: 0 var(--ns-gap-2);
  border-radius: var(--ns-r-sm);
  font-size: var(--fs-xs, .81rem);
}
.ns-tag--warn { background: var(--ns-warn-bg); color: var(--ns-warn); }

/* ------------------------------------------------------------------- Zusammenfassung -- */

.ns-summary { margin: 0; }
.ns-summary__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ns-gap-2) var(--ns-gap-4);
  padding: var(--ns-gap-2) 0;
  border-bottom: 1px solid var(--ns-line);
}
.ns-summary__row:last-child { border-bottom: 0; }
.ns-summary__key { flex: 0 0 8rem; margin: 0; color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }
.ns-summary__value { flex: 1 1 12rem; margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ns-gap-2); }

/* ----------------------------------------------------------------------- Assistent -- */

.ns-wizard__progress { margin: 0 0 var(--ns-gap-2); color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }
.ns-wizard__trail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ns-gap-2);
  list-style: none;
  margin: 0 0 var(--ns-gap-6);
  padding: 0;
}
.ns-wizard__trail-item {
  padding: var(--ns-gap-1) var(--ns-gap-3);
  border: 1px solid var(--ns-line);
  border-radius: var(--r-pill, 999px);
  color: var(--ns-muted);
  font-size: var(--fs-xs, .81rem);
}
.ns-wizard__trail-item.is-done { border-color: var(--ns-line-strong); color: var(--ns-text); }
.ns-wizard__trail-item.is-current { border-color: var(--ns-gold); background: var(--ns-gold-bg); color: var(--ns-gold-light); }
.ns-wizard__actions { display: flex; flex-wrap: wrap; gap: var(--ns-gap-3); margin: var(--ns-gap-6) 0 0; }

.ns-choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ns-gap-3);
}

.ns-choice {
  display: flex;
  flex-direction: column;
  gap: var(--ns-gap-1);
  min-height: var(--ns-tap);
  padding: var(--ns-gap-4);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-r-md);
  background: var(--ns-surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--ns-t) var(--ns-ease), background var(--ns-t) var(--ns-ease);
}
.ns-choice:hover { border-color: var(--ns-gold); background: var(--ns-surface-2); }
.ns-choice:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: var(--focus-offset, 3px); }
.ns-choice__name { font-weight: var(--fw-semibold, 600); }
.ns-choice__meta { color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }

/* ------------------------------------------------------------------------ Kalender -- */

.ns-cal { margin-bottom: var(--ns-gap-6); }
.ns-cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-gap-3); }
.ns-cal__month { margin: 0; font-weight: var(--fw-semibold, 600); }
.ns-cal__nav {
  min-width: var(--ns-tap);
  min-height: var(--ns-tap);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-r-sm);
  background: transparent;
  color: inherit;
  font-size: var(--fs-lg, 1.2rem);
  cursor: pointer;
}
.ns-cal__nav:hover { border-color: var(--ns-gold); color: var(--ns-gold-light); }
.ns-cal__nav:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: 2px; }

.ns-cal__week,
.ns-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--ns-gap-1); }
.ns-cal__week { margin: var(--ns-gap-3) 0 var(--ns-gap-1); }
.ns-cal__weekday { text-align: center; color: var(--ns-muted); font-size: var(--fs-xs, .81rem); }
.ns-cal__days.is-loading { opacity: .5; }

.ns-day {
  position: relative;
  min-height: var(--ns-tap);
  padding: var(--ns-gap-2) 0;
  border: 1px solid transparent;
  border-radius: var(--ns-r-sm);
  background: var(--ns-surface);
  color: var(--ns-text);
  font: inherit;
  cursor: pointer;
}
.ns-day--blank { background: transparent; border: 0; cursor: default; }
.ns-day:hover:not([disabled]) { border-color: var(--ns-gold); }
.ns-day:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: 2px; }
.ns-day[disabled] { color: var(--ns-muted); opacity: .4; cursor: not-allowed; background: transparent; }
.ns-day--free::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--ns-gold);
}
.ns-day.is-selected { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-bg); font-weight: var(--fw-bold, 700); }
.ns-day.is-selected::after { background: var(--ns-bg); }

/* --------------------------------------------------------------------------- Zeiten -- */

.ns-slots__group { border: 0; margin: 0; padding: 0; }
.ns-slots__legend { padding: 0; margin-bottom: var(--ns-gap-3); color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }
.ns-slots__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--ns-gap-2); }

.ns-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ns-tap);
  border: 1px solid var(--ns-line-strong);
  border-radius: var(--ns-r-sm);
  background: var(--ns-surface);
  cursor: pointer;
}
.ns-slot input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ns-slot:hover { border-color: var(--ns-gold); }
.ns-slot:focus-within { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: 2px; }
.ns-slot__time { font-variant-numeric: tabular-nums; }
/* `.ist-gewaehlt` ist die von JS nachgeführte Entsprechung für Browser ohne `:has()`. */
.ns-slot:has(input:checked), .ns-slot.ist-gewaehlt { background: var(--ns-gold); border-color: var(--ns-gold); color: var(--ns-bg); font-weight: var(--fw-semibold, 600); }

.ns-empty { margin: 0 0 var(--ns-gap-3); color: var(--ns-muted); }

.ns-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--ns-gap-2); }
.ns-skeleton__bar { grid-column: 1 / -1; height: 1.2rem; }
.ns-skeleton__tile,
.ns-skeleton__bar {
  display: block;
  min-height: var(--ns-tap);
  border-radius: var(--ns-r-sm);
  background: linear-gradient(90deg, var(--ns-surface) 25%, var(--ns-surface-2) 50%, var(--ns-surface) 75%);
  background-size: 200% 100%;
  animation: ns-shimmer 1.4s linear infinite;
}

@keyframes ns-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* -------------------------------------------------------------------------- Formular -- */

.ns-form { margin: 0; }
.ns-field { margin: 0 0 var(--ns-gap-4); display: flex; flex-direction: column; gap: var(--ns-gap-1); }
.ns-field__label { font-size: var(--fs-sm, .94rem); font-weight: var(--fw-semibold, 600); }
.ns-field__optional { color: var(--ns-muted); font-weight: var(--fw-regular, 400); }
.ns-field__input {
  min-height: var(--ns-tap);
  padding: var(--ns-gap-2) var(--ns-gap-3);
  border: 1px solid var(--ns-line-strong);
  border-radius: var(--ns-r-sm);
  background: var(--ns-bg);
  color: var(--ns-text);
  font: inherit;
}
.ns-field__input:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: 2px; border-color: var(--ns-gold); }
.ns-field__input[aria-invalid='true'] { border-color: var(--ns-bad); }
.ns-field__error { color: var(--ns-bad); font-size: var(--fs-sm, .94rem); }
.ns-field__error[hidden] { display: none; }
.ns-form__hint { display: block; margin: 0 0 var(--ns-gap-2); color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }
.ns-form__actions { display: flex; flex-wrap: wrap; gap: var(--ns-gap-3); margin: var(--ns-gap-4) 0 0; }
.ns-field--check .ns-field__check { display: flex; align-items: flex-start; gap: var(--ns-gap-3); min-height: var(--ns-tap); cursor: pointer; }
.ns-field--check input { width: 1.4rem; height: 1.4rem; margin: .25rem 0 0; flex: 0 0 auto; accent-color: var(--ns-gold); }
textarea.ns-field__input { min-height: calc(var(--ns-tap) * 1.6); resize: vertical; }
select.ns-field__input { min-width: 12rem; }

/* ----------------------------------------------------------------------------- Listen -- */

.ns-list { list-style: none; margin: 0; padding: 0; }
.ns-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ns-gap-3);
  padding: var(--ns-gap-3) 0;
  border-bottom: 1px solid var(--ns-line);
}
.ns-list__item:last-child { border-bottom: 0; }
/* Der Vorschlag, auf den der Tiefenlink aus der Mail zeigt (`&vorschlag=<id>`). */
.ns-list__item--gewaehlt {
  border-left: 3px solid var(--ns-gold);
  background: var(--ns-gold-bg);
  padding-left: var(--ns-gap-3);
  padding-right: var(--ns-gap-3);
  border-radius: var(--ns-radius-sm, 8px);
}
.ns-list__item--gewaehlt .ns-list__label { color: var(--ns-gold-light); }
.ns-list--plain .ns-list__item { border-bottom: 0; padding: var(--ns-gap-1) 0; }
.ns-list__label { font-weight: var(--fw-semibold, 600); }
.ns-list__meta { color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }
.ns-list__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ns-gap-2) var(--ns-gap-4);
  width: 100%;
  min-height: var(--ns-tap);
  padding: var(--ns-gap-2);
  border-radius: var(--ns-r-sm);
  color: inherit;
  text-decoration: none;
}
.ns-list__link:hover { background: var(--ns-surface-2); }
.ns-list__link:focus-visible { outline: var(--focus-w, 2px) solid var(--ns-gold-light); outline-offset: 2px; }
.ns-list__when { flex: 0 0 16.5rem; color: var(--ns-gold); font-variant-numeric: tabular-nums; }
.ns-list__link .ns-badge { margin-left: auto; }
.ns-list__who { font-weight: var(--fw-semibold, 600); }
.ns-list__what { color: var(--ns-muted); font-size: var(--fs-sm, .94rem); }

/* ------------------------------------------------------------------ Betreiber-Karten -- */

.ns-picker__manual[hidden],
.ns-picker__app[hidden],
.ns-propose[hidden] { display: none; }
.ns-picker__values { display: none; }
.ns-page-foot { margin-top: var(--ns-gap-8); }

/* ------------------------------------------------------------------------- Kleinbild -- */

@media (max-width: 30rem) {
  .ns-choices { grid-template-columns: 1fr; }
  .ns-summary__key { flex-basis: 100%; }
  .ns-list__when { flex-basis: 100%; }
  .ns-wizard__actions .ns-btn,
  .ns-form__actions .ns-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------- Weniger Bewegung -- */

@media (prefers-reduced-motion: reduce) {
  .ns-booking *,
  .ns-booking *::before,
  .ns-booking *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ns-skeleton__tile,
  .ns-skeleton__bar { background: var(--ns-surface-2); }
}