/*
 * Terminseiten des Plugins `nicestyle-termine` im Theme-Look.
 *
 * Geladen wird diese Datei ausschließlich auf den vier Plugin-Seiten (`/termin/`,
 * `/termin/verwalten/`, `/termin/aktion/`, `/termin/uebersicht/`) und dort **hinter**
 * `assets/booking.css` des Plugins (Abhängigkeit `nicestyle-booking`, siehe `functions.php`).
 * Das Plugin-Stylesheet bleibt die Grundlage – es funktioniert auch ohne dieses Theme; hier
 * kommt nur die Handschrift von Nice Style dazu: Cormorant in den Überschriften, goldene
 * Hauptknöpfe, Geist-Knöpfe für alles Zweite, WhatsApp-Grün, gehobene Karten mit Goldsaum.
 *
 * Regeln wie in `main.css`:
 *   – ausschließlich `var(--…)` aus `tokens.css`, keine eigenen Hex- oder px-Werte
 *     (Ausnahmen: 0, 1-px-Haarlinien und die Grenzen der Media-Queries),
 *   – Zustandsfarben nie allein: jeder Banner, jedes Abzeichen trägt seinen Text weiter,
 *   – Tippziele bleiben mindestens `--tap-min`,
 *   – mobil zuerst, kein waagerechtes Scrollen bei 360 px.
 *
 * Die Wurzelklasse `.ns-booking` ist der einzige Einstieg – Markup und Klassen gehören dem
 * Plugin und werden von hier aus nicht vorausgesetzt, sondern nur eingefärbt.
 */

/* ------------------------------------------------- 1 Rahmen und Rhythmus -- */

/*
 * Der Wrapper `page-termin.php` steckt die Seite bereits in `.behaelter-schmal`. Die eigene
 * Breitenbegrenzung des Plugins würde darin ein zweites Mal beschneiden – sie wird aufgehoben,
 * damit Terminseite und Rechtsseiten auf derselben linken Kante stehen.
 */
.seiten-inhalt .ns-booking {
  max-width: none;
  margin-inline: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* `.seiten-inhalt > * + *` setzt sonst einen zweiten Abstand über den Assistenten. */
.seiten-inhalt > .ns-booking {
  margin-top: 0;
}

.ns-booking .ns-page-head {
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}

.ns-booking .ns-page-intro {
  max-width: var(--vorspann-max);
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
}

.ns-booking .ns-page-foot {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

/* ---------------------------------------------------------- 2 Typografie -- */

.ns-booking .ns-page-title,
.ns-booking .ns-wizard__title,
.ns-booking .ns-card__title,
.ns-booking .ns-card__subtitle {
  font-family: var(--f-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--c-text);
}

.ns-booking .ns-wizard__title {
  margin-bottom: var(--s-6);
  font-size: var(--fs-2xl);
}

.ns-booking .ns-card__title {
  margin-bottom: var(--s-4);
  font-size: var(--fs-xl);
}

.ns-booking .ns-card__subtitle {
  margin: var(--s-6) 0 var(--s-3);
  font-size: var(--fs-lg);
}

.ns-booking .ns-card__text,
.ns-booking .ns-empty,
.ns-booking .ns-form__hint {
  color: var(--c-text-muted);
}

.ns-booking .ns-card__text--muted,
.ns-booking .ns-form__hint {
  font-size: var(--fs-sm);
}

/* ------------------------------------------------------------- 3 Karten -- */

/*
 * Wie `.kontaktkarte` auf den übrigen Seiten: große Rundung, ruhiger Schatten und ein
 * Goldsaum an der Oberkante. Der Saum ist reine Zierde (`::before`, ohne Inhalt) und
 * unterscheidet die Karte auch dann vom Grund, wenn jemand Farben umstellt.
 */
.ns-booking .ns-card {
  position: relative;
  overflow: hidden;
  padding: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--s-6);
}

.ns-booking .ns-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}

.ns-booking .ns-card--summary {
  background-color: var(--c-surface-2);
}

/* Die stille Karte bleibt still: kein Schatten, kein Saum, nur der Rahmen. */
.ns-booking .ns-card--quiet {
  background-color: transparent;
  box-shadow: none;
}

.ns-booking .ns-card--quiet::before {
  content: none;
}

.ns-booking .ns-card--warn {
  border-color: var(--c-warning);
}

.ns-booking .ns-card--ok {
  border-color: var(--c-success);
}

.ns-booking .ns-card__actions,
.ns-booking .ns-form__actions,
.ns-booking .ns-wizard__actions,
.ns-booking .ns-contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
}

/* ------------------------------------------------- 4 Knöpfe und Textlinks -- */

/* Dieselbe Form wie `.knopf`: Pille, `--fs-sm`, halbfett, Tippziel `--tap-min`. */
.ns-booking .ns-btn {
  gap: var(--s-2);
  min-height: var(--tap-min);
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  transition:
    transform var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.ns-booking .ns-btn--gold {
  border-color: var(--c-gold);
  background-color: var(--c-gold);
  color: var(--c-bg);
}

.ns-booking .ns-btn--gold:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-gold-light);
  background-color: var(--c-gold-light);
  color: var(--c-bg);
  box-shadow: var(--glow-gold);
}

.ns-booking .ns-btn--ghost,
.ns-booking .ns-btn:not([class*="ns-btn--"]) {
  border-color: var(--c-line-strong);
  background-color: transparent;
  color: var(--c-text);
}

.ns-booking .ns-btn--ghost:hover,
.ns-booking .ns-btn:not([class*="ns-btn--"]):hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}

.ns-booking .ns-btn--danger {
  border-color: var(--c-danger);
  background-color: transparent;
  color: var(--c-danger);
}

.ns-booking .ns-btn--danger:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-danger);
  background-color: var(--c-danger-bg);
  color: var(--c-text);
}

/*
 * WhatsApp trägt auf der ganzen Website dieselbe Farbe. Erkannt wird der Knopf am Ziel und
 * nicht an einer Klasse, weil das Markup dem Plugin gehört; der Text steht ohnehin daneben.
 */
.ns-booking a.ns-btn[href*="wa.me"] {
  border-color: var(--c-wa);
  background-color: var(--c-wa);
  color: var(--c-bg);
}

.ns-booking a.ns-btn[href*="wa.me"]:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-wa-hell);
  background-color: var(--c-wa-hell);
  color: var(--c-bg);
}

/* Beim Drücken setzt sich der Knopf ab – sichtbare Rückmeldung ohne Wackeln. */
.ns-booking .ns-btn:active {
  transform: translateY(0);
}

/*
 * Gesperrte Knöpfe werden nicht durchsichtig, sondern still: Gold auf 40 % Deckkraft wird
 * über dem fast schwarzen Grund zu einem schlammigen Braun, das weder nach Gold noch nach
 * „gerade nicht möglich" aussieht. Grau in Grau ist eindeutig und bleibt lesbar.
 */
.ns-booking .ns-btn[disabled],
.ns-booking .ns-btn[disabled]:hover {
  transform: none;
  box-shadow: none;
  opacity: 1;
  border-color: var(--c-line);
  background-color: var(--c-surface-2);
  color: var(--c-text-muted);
  cursor: not-allowed;
}

.ns-booking .ns-btn:focus-visible,
.ns-booking .ns-link:focus-visible,
.ns-booking .ns-choice:focus-visible,
.ns-booking .ns-cal__nav:focus-visible,
.ns-booking .ns-day:focus-visible,
.ns-booking .ns-list__link:focus-visible,
.ns-booking .ns-field__input:focus-visible {
  outline: var(--focus-w) solid var(--c-gold-light);
  outline-offset: var(--focus-offset);
}

.ns-booking .ns-contact__number {
  color: var(--c-text-muted);
  font-weight: var(--fw-regular);
}

.ns-booking .ns-link {
  color: var(--c-gold-light);
  text-underline-offset: var(--s-1);
}

.ns-booking .ns-link:hover {
  color: var(--c-gold);
}

/* ------------------------------------------- 5 Schrittleiste des Assistenten -- */

/* Die Fortschrittszeile liest sich wie ein Kicker: klein, gold, gesperrt. */
.ns-booking .ns-wizard__progress {
  margin: 0 0 var(--s-3);
  color: var(--c-gold);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/*
 * Nummerierte Schritte (Spec 6). Die Zahl kommt aus einem CSS-Zähler und nicht aus dem
 * Markup – das gehört dem Plugin. Sie steht als Ziffer vor dem Schrittnamen, ist also auch
 * ohne Farbe zu unterscheiden.
 */
.ns-booking .ns-wizard__trail {
  counter-reset: ns-schritt;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.ns-booking .ns-wizard__trail-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-4) var(--s-1) var(--s-2);
  border-color: var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ns-booking .ns-wizard__trail-item::before {
  counter-increment: ns-schritt;
  content: counter(ns-schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s-6);
  height: var(--s-6);
  flex: none;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.ns-booking .ns-wizard__trail-item.is-done {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}

.ns-booking .ns-wizard__trail-item.is-current {
  border-color: var(--c-gold);
  background-color: var(--c-gold-bg);
  color: var(--c-gold-light);
}

.ns-booking .ns-wizard__trail-item.is-current::before {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-bg);
}

/* ------------------------------------------------------- 6 Auswahlkacheln -- */

.ns-booking .ns-choices {
  gap: var(--s-4);
}

.ns-booking .ns-choice {
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  transition:
    transform var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.ns-booking .ns-choice:hover {
  transform: translateY(calc(var(--lift) * -1));
  border-color: var(--c-gold);
  background-color: var(--c-surface-2);
  box-shadow: var(--glow-gold);
}

.ns-booking .ns-choice:active {
  transform: translateY(0);
  background-color: var(--c-surface);
}

/* Der Name der Leistung trägt dieselbe Schrift wie die Leistungskarten der Startseite. */
.ns-booking .ns-choice__name {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.ns-booking .ns-choice__meta {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

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

.ns-booking .ns-cal {
  padding: var(--s-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  margin-bottom: var(--s-6);
}

.ns-booking .ns-cal__month {
  font-family: var(--f-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}

.ns-booking .ns-cal__nav {
  border-color: var(--c-line-strong);
  border-radius: var(--r-pill);
  color: var(--c-text);
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.ns-booking .ns-cal__nav:hover {
  border-color: var(--c-gold);
  background-color: var(--c-gold-bg);
  color: var(--c-gold-light);
}

.ns-booking .ns-cal__weekday {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ns-booking .ns-day {
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.ns-booking .ns-day--blank {
  background-color: transparent;
}

.ns-booking .ns-day:hover:not([disabled]) {
  border-color: var(--c-gold);
  background-color: var(--c-gold-bg);
}

.ns-booking .ns-day[disabled] {
  background-color: transparent;
  color: var(--c-text-muted);
  opacity: var(--deckkraft-aus);
}

.ns-booking .ns-day.is-selected {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-bg);
  font-weight: var(--fw-bold);
}

/* --------------------------------------------------- 8 Zeiten und Skelett -- */

.ns-booking .ns-slots__legend {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ns-booking .ns-slot {
  border-color: var(--c-line-strong);
  border-radius: var(--r-md);
  background-color: var(--c-surface-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    color var(--t-base) var(--ease);
}

.ns-booking .ns-slot:hover {
  border-color: var(--c-gold);
  background-color: var(--c-gold-bg);
}

/* `.ist-gewaehlt` führt das Plugin per JS nach – die Ersatzregel für Browser ohne `:has()`. */
.ns-booking .ns-slot:has(input:checked),
.ns-booking .ns-slot.ist-gewaehlt {
  background-color: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-bg);
}

.ns-booking .ns-slot__time {
  font-variant-numeric: tabular-nums;
}

.ns-booking .ns-skeleton__tile,
.ns-booking .ns-skeleton__bar {
  border-radius: var(--r-md);
}

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

.ns-booking .ns-field__label {
  color: var(--c-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ns-booking .ns-field__optional {
  color: var(--c-text-muted);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
}

.ns-booking .ns-field__input {
  border-color: var(--c-line-strong);
  border-radius: var(--r-md);
  background-color: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-base);
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}

.ns-booking .ns-field__input:hover {
  border-color: var(--c-gold);
}

.ns-booking .ns-field__input::placeholder {
  color: var(--c-text-muted);
}

.ns-booking .ns-field__input[aria-invalid="true"] {
  border-color: var(--c-danger);
  background-color: var(--c-danger-bg);
}

/* Der Fehler steht als Text am Feld; die Farbe kommt nur dazu. */
.ns-booking .ns-field__error {
  color: var(--c-danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

/*
 * Eigene Kästchenform statt `accent-color`: `accent-color` färbt nur den **angehakten** Zustand.
 * Leer blieb das Kästchen ein rein weißes Quadrat – das einzige weiße Element der ganzen Seite,
 * ausgerechnet direkt vor dem Absende-Knopf.
 */
.ns-booking .ns-field--check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}

.ns-booking .ns-field--check input:hover {
  border-color: var(--c-gold);
}

/* Der Haken entsteht aus zwei Kanten eines gedrehten Rechtecks – kein zusätzliches Bild nötig. */
.ns-booking .ns-field--check input::before {
  content: "";
  width: .35rem;
  height: .7rem;
  border: solid var(--c-bg);
  border-width: 0 2px 2px 0;
  transform: translateY(-.08rem) rotate(45deg);
  opacity: 0;
}

.ns-booking .ns-field--check input:checked {
  border-color: var(--c-gold);
  background-color: var(--c-gold);
}

.ns-booking .ns-field--check input:checked::before {
  opacity: 1;
}

.ns-booking .ns-field--check input[aria-invalid="true"] {
  border-color: var(--c-danger);
  background-color: var(--c-danger-bg);
}

/*
 * Auswahlfelder (Absagegrund, anderer Barber) trugen bis hierher die Gestaltung des
 * Betriebssystems – weiße Kästen in einer sonst durchweg dunklen Seite. Mit `appearance: none`
 * greifen dieselben Regeln wie bei den Textfeldern; der Pfeil kommt als Verlaufs-Hintergrund.
 */
.ns-booking select.ns-field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s-9);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
    linear-gradient(135deg, var(--c-gold) 50%, transparent 50%);
  background-position:
    right var(--s-5) center,
    right var(--s-4) center;
  background-size: .4rem .4rem, .4rem .4rem;
  background-repeat: no-repeat;
}

/* Die Liste selbst zeichnet das Betriebssystem; nur die Farben lassen sich mitgeben. */
.ns-booking select.ns-field__input option {
  background-color: var(--c-surface);
  color: var(--c-text);
}

/* -------------------------------------------- 10 Banner, Abzeichen, Marken -- */

/*
 * Banner tragen ihre Aussage immer im Text (Plugin-Markup); Farbe und der kräftige Streifen
 * links sind die Zugabe. Der Streifen ist `--rule-w` breit wie der Leistungs-Hinweis auf der
 * Startseite, damit beide Seiten dieselbe Sprache sprechen.
 */
.ns-booking .ns-note {
  border: 1px solid var(--c-line);
  border-inline-start: var(--rule-w) solid var(--c-line-strong);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

.ns-booking .ns-note--info {
  border-inline-start-color: var(--c-info);
  background-color: var(--c-info-bg);
}

.ns-booking .ns-note--success {
  border-inline-start-color: var(--c-success);
  background-color: var(--c-success-bg);
}

.ns-booking .ns-note--warn {
  border-inline-start-color: var(--c-warning);
  background-color: var(--c-warning-bg);
}

.ns-booking .ns-note--error {
  border-inline-start-color: var(--c-danger);
  background-color: var(--c-danger-bg);
}

.ns-booking .ns-note .ns-btn {
  margin-left: var(--s-3);
}

.ns-booking .ns-note__text {
  margin-top: var(--s-2);
}

.ns-booking .ns-badge {
  padding: var(--s-1) var(--s-3);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
}

.ns-booking .ns-badge--wait {
  background-color: var(--c-warning-bg);
  color: var(--c-warning);
}

.ns-booking .ns-badge--ok {
  background-color: var(--c-success-bg);
  color: var(--c-success);
}

/*
 * Abzeichen sind klein (13 px) und stehen auf einer Karte, also auf --c-surface. --c-danger
 * kommt dort nur auf 4.31:1 und faellt durch; die hellere Stufe misst ueber 6:1.
 */
.ns-booking .ns-badge--bad {
  background-color: var(--c-danger-bg);
  color: var(--c-danger-light);
}

.ns-booking .ns-badge--info {
  background-color: var(--c-info-bg);
  color: var(--c-info);
}

.ns-booking .ns-tag {
  padding: 0 var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.ns-booking .ns-tag--warn {
  background-color: var(--c-warning-bg);
  color: var(--c-warning);
}

/* ------------------------------------------- 11 Zusammenfassung und Listen -- */

.ns-booking .ns-summary__row {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
}

/*
 * Höhere Spezifität als die Regel des Plugins (`.ns-summary__row:last-child`), weil die Regeln
 * hier zusätzlich an `.ns-booking` hängen – ohne diese Zeile setzten die Abstandsregeln oben
 * die Linie wieder, und die Karte bekäme einen doppelten Abschluss.
 */
.ns-booking .ns-summary__row:last-child,
.ns-booking .ns-list__item:last-child {
  border-bottom: 0;
}

/* Die schlichte Liste (Protokoll auf der Betreiberseite) bleibt ohne Linien und eng. */
.ns-booking .ns-list--plain .ns-list__item {
  padding: var(--s-1) 0;
  border-bottom: 0;
}

.ns-booking .ns-summary__key {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ns-booking .ns-summary__value {
  color: var(--c-text);
}

.ns-booking .ns-list__item {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--c-line);
}

.ns-booking .ns-list__label,
.ns-booking .ns-list__who {
  font-weight: var(--fw-semibold);
}

.ns-booking .ns-list__meta,
.ns-booking .ns-list__what {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.ns-booking .ns-list__link {
  row-gap: var(--s-1);
  border-radius: var(--r-md);
  padding: var(--s-3);
  transition: background-color var(--t-base) var(--ease);
}

.ns-booking .ns-list__link:hover {
  background-color: var(--c-surface-2);
}

/*
 * Zeit in die eigene Zeile. In einer Reihe passten „Donnerstag, 24.09.2026, 16:00", Name,
 * Leistung und Abzeichen im schmalen Seitenbehälter nicht nebeneinander – das Abzeichen fiel
 * dann allein in eine zweite Zeile und riss ein Loch in die Reihe. So stehen Zeitpunkt oben
 * und Name, Leistung und Stand darunter, am Schreibtisch wie am Telefon gleich.
 */
.ns-booking .ns-list__when {
  flex: 0 0 100%;
  color: var(--c-gold);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

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

@media (max-width: 30rem) {
  .ns-booking .ns-card {
    padding: var(--s-5);
  }

  .ns-booking .ns-choice {
    padding: var(--s-5);
  }

  .ns-booking .ns-cal {
    padding: var(--s-3);
  }

  /* Vier Tasten in einer Zeile wären bei 360 px unter 44 px breit. */
  .ns-booking .ns-wizard__trail-item {
    padding-right: var(--s-3);
  }
}

/* -------------------------------------- 13 Weniger Bewegung und Standbild -- */

/*
 * `main.css` friert im Standbild-Modus nur Übergänge und Animationen ein. Die Hebungen
 * hier hängen an `:hover` und sind damit ohnehin nicht Teil einer Aufnahme; bei reduzierter
 * Bewegung werden sie trotzdem abgeschaltet, damit nichts springt.
 */
@media (prefers-reduced-motion: reduce) {
  .ns-booking .ns-btn:hover,
  .ns-booking .ns-choice:hover {
    transform: none;
  }
}

/* ------------------------------------------------ 14 Tippflächen im Raster -- */

/*
 * Sieben Tage nebeneinander: bei 390 px blieben die Kacheln 43 px breit und damit knapp unter
 * `--tap-min`. Die Kalenderkarte gibt auf schmalen Geräten den fehlenden Innenabstand ab.
 */
@media (max-width: 30rem) {
  .ns-booking .ns-cal {
    padding: var(--s-2);
  }
}