/*
 * Struktur des Buchungs-Overlays. Mobil: Bottom-Sheet, ab 720px: zentriertes Fenster.
 * Aussehen über Variablen – jede Variante setzt ihre eigenen Werte auf .bk.
 */
.bk {
  --bk-bg: #fff;
  --bk-surface: #f6f4f3;
  --bk-fg: #231f1f;
  --bk-muted: #6d6666;
  --bk-line: #e6e1df;
  --bk-accent: #660000;
  --bk-accent-fg: #fff;
  --bk-accent-soft: #f6eaea;
  --bk-radius: 20px;
  --bk-radius-sm: 12px;
  --bk-font: inherit;
  --bk-font-display: inherit;
  --bk-pad: 20px;

  position: fixed; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--bk-fg); font-family: var(--bk-font);
  overflow: hidden;
}
.bk[open] { display: flex; align-items: flex-end; justify-content: center; }
.bk::backdrop { background: rgb(24 12 12 / .55); }

.bk__panel {
  display: flex; flex-direction: column;
  width: 100%; max-width: 580px; height: min(94dvh, 880px);
  background: var(--bk-bg); border-radius: var(--bk-radius) var(--bk-radius) 0 0;
  overflow: hidden; box-shadow: 0 -8px 40px rgb(0 0 0 / .18);
}
@media (min-width: 720px) {
  .bk[open] { align-items: center; }
  .bk__panel { height: min(88dvh, 820px); border-radius: var(--bk-radius); }
}

/* Öffnen / Schließen */
@keyframes bk-in { from { transform: translateY(100%); } }
@keyframes bk-out { to { transform: translateY(100%); } }
@keyframes bk-in-desk { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes bk-out-desk { to { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes bk-fade { from { opacity: 0; } }
.bk[open] .bk__panel { animation: bk-in .36s cubic-bezier(.2, .8, .2, 1); }
.bk.is-closing .bk__panel { animation: bk-out .22s ease-in forwards; }
.bk[open]::backdrop { animation: bk-fade .3s ease; }
.bk.is-closing::backdrop { opacity: 0; transition: opacity .22s; }
@media (min-width: 720px) {
  .bk[open] .bk__panel { animation-name: bk-in-desk; }
  .bk.is-closing .bk__panel { animation-name: bk-out-desk; }
}

/* Kopf */
.bk__head { flex: none; padding: 12px var(--bk-pad) 14px; }
.bk__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.bk__stepof { text-align: center; font-size: 13px; color: var(--bk-muted); }
.bk__icon {
  display: grid; place-items: center; width: 44px; height: 44px; margin-inline-start: -10px;
  border: 0; border-radius: 50%; background: transparent; color: var(--bk-fg);
}
.bk__icon svg { width: 24px; height: 24px; }
.bk__close { margin-inline: auto -10px; }
.bk__icon:hover { background: var(--bk-surface); }
[dir="rtl"] .bk__back svg { transform: scaleX(-1); }
.bk[data-step="1"] .bk__back, .bk[data-step="5"] .bk__back { visibility: hidden; }

.bk__progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 16px; list-style: none; padding: 0; }
.bk__progress li { font-size: 12px; color: var(--bk-muted); }
.bk__progress li::before { content: ""; display: block; height: 3px; margin-bottom: 6px; border-radius: 3px; background: var(--bk-line); }
.bk__progress li.is-done::before, .bk__progress li.is-current::before { background: var(--bk-accent); }
.bk__progress li.is-current { color: var(--bk-fg); font-weight: 600; }
.bk[data-step="5"] .bk__progress { display: none; }

.bk__title { font-family: var(--bk-font-display); font-size: 21px; line-height: 1.25; outline: none; }
@media (min-width: 720px) { .bk__title { font-size: 24px; } }

/* Inhalt */
.bk__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--bk-pad) 24px; }
.bk__body > * + * { margin-top: 20px; }

/* Fuß */
.bk__foot {
  flex: none; display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 12px var(--bk-pad) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bk-line); background: var(--bk-bg);
}
.bk__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-width: 0; }
.bk__sum:has(.bk__sum-total:empty) { justify-content: flex-start; }
.bk__sum-meta { font-size: 13px; line-height: 1.4; color: var(--bk-muted); }
.bk__sum-total { font-size: 18px; white-space: nowrap; }
.bk__next {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--bk-radius-sm);
  background: var(--bk-accent); color: var(--bk-accent-fg); font-weight: 600; font-size: 15px;
}
.bk__next:disabled { opacity: .35; cursor: not-allowed; }
.bk[data-step="5"] .bk__sum, .bk[data-step="5"] .bk__proto { display: none; }
.bk__proto { margin-top: -2px; font-size: 11px; color: var(--bk-muted); text-align: center; }

/* Gemeinsame Bausteine */
.bk-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.bk-hint, .bk-note { font-size: 13px; line-height: 1.45; color: var(--bk-muted); }
.bk-note a { color: var(--bk-accent); }
.bk-link { padding: 0; border: 0; background: none; color: var(--bk-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-align: start; }

/* Versteckte Formularelemente – das Label übernimmt Optik und Fokusanzeige */
.bk-len input, .bk-svc input, .bk-sty input, .bk-date input, .bk-slot input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.bk-len:has(input:focus-visible), .bk-svc:has(input:focus-visible), .bk-sty:has(input:focus-visible),
.bk-date:has(input:focus-visible), .bk-slot:has(input:focus-visible) {
  outline: 2px solid var(--bk-accent); outline-offset: 2px;
}

/* Schritt 1: Haarlänge */
.bk-length__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bk-len {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm);
  cursor: pointer; text-align: center;
}
.bk-len__name { font-weight: 600; font-size: 15px; }
.bk-len__hint { font-size: 12px; color: var(--bk-muted); }
.bk-len:has(input:checked) { border-color: var(--bk-accent); background: var(--bk-accent-soft); box-shadow: inset 0 0 0 1px var(--bk-accent); }
.bk-length .bk-hint { margin-top: 8px; }
.bk-length.has-error .bk-hint { color: #a4161a; font-weight: 600; }
.bk-length.has-error .bk-len { border-color: #a4161a; }

/* Schritt 1: Kategorien */
.bk-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--bk-pad) * -1); padding-inline: var(--bk-pad); }
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tab {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--bk-line); border-radius: 999px; background: transparent; font-size: 14px;
}
.bk-tab[aria-selected="true"] { background: var(--bk-fg); border-color: var(--bk-fg); color: var(--bk-bg); }
.bk-tab__count {
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--bk-accent); color: var(--bk-accent-fg); font-size: 11px; font-weight: 700;
}
.bk-tabs + .bk-note { margin-top: 10px; }

/* Schritt 1: Leistungen */
.bk-services { list-style: none; padding: 0; }
.bk-svc {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 14px 0; border-bottom: 1px solid var(--bk-line); cursor: pointer;
}
.bk-svc__check {
  display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px;
  border: 1.5px solid var(--bk-muted); border-radius: 7px; color: transparent;
}
.bk-svc__check svg { width: 16px; height: 16px; }
.bk-svc:has(input:checked) .bk-svc__check { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-fg); }
.bk-svc__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-svc__name { font-weight: 600; font-size: 15px; line-height: 1.35; }
.bk-svc__desc { font-size: 13px; line-height: 1.45; color: var(--bk-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bk-svc__dur { font-size: 12px; color: var(--bk-muted); }
.bk-svc__price { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Schritt 2: Stylisten */
.bk-stylists { display: grid; gap: 10px; }
.bk-sty {
  position: relative; display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); cursor: pointer;
}
.bk-sty:has(input:checked) { border-color: var(--bk-accent); background: var(--bk-accent-soft); box-shadow: inset 0 0 0 1px var(--bk-accent); }
.bk-sty.is-disabled { cursor: not-allowed; opacity: .55; }
.bk-sty__img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.bk-sty__img--icon { display: grid; place-items: center; background: var(--bk-surface); color: var(--bk-accent); }
.bk-sty__img--icon svg { width: 30px; height: 30px; }
.bk-sty__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-sty__name { font-weight: 600; font-size: 16px; }
.bk-sty__role { font-size: 13px; line-height: 1.4; color: var(--bk-muted); }
.bk-sty__price { font-weight: 700; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-sty__na { grid-column: 2 / -1; font-size: 12px; color: var(--bk-muted); }

/* Schritt 3: Tage und Uhrzeiten */
.bk-dates {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin-inline: calc(var(--bk-pad) * -1); padding: 2px var(--bk-pad) 4px;
}
.bk-dates::-webkit-scrollbar { display: none; }
.bk-label + .bk-dates { margin-top: 0; }
.bk-date {
  position: relative; flex: none; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 68px; min-height: 84px; padding: 8px 4px;
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); cursor: pointer;
}
.bk-date__dow { font-size: 12px; color: var(--bk-muted); white-space: nowrap; }
.bk-date__num { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bk-date__mon { font-size: 12px; color: var(--bk-muted); }
.bk-date:has(input:checked) { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-fg); }
.bk-date:has(input:checked) span { color: inherit; }
.bk-date.is-closed { cursor: not-allowed; opacity: .45; }
.bk-date.is-full .bk-date__num { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-times { display: grid; gap: 18px; }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.bk-slot {
  position: relative; display: grid; place-items: center; min-height: 44px;
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); cursor: pointer;
  font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums;
}
.bk-slot:has(input:checked) { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-fg); }
.bk-empty { display: grid; gap: 10px; padding: 18px; border-radius: var(--bk-radius-sm); background: var(--bk-surface); font-size: 14px; line-height: 1.5; }

/* Schritt 4: Übersicht und Formular */
.bk-summary { display: grid; gap: 0; padding: 4px 16px; border-radius: var(--bk-radius-sm); background: var(--bk-surface); }
.bk-summary__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--bk-line); }
.bk-summary__row:last-child { border-bottom: 0; }
.bk-summary dt { grid-column: 1; font-size: 12px; color: var(--bk-muted); }
.bk-summary dd { grid-column: 1; font-size: 15px; line-height: 1.4; }
.bk-summary .bk-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13px; }
.bk-summary__total dd { font-weight: 700; font-size: 17px; }
.bk-form { display: grid; gap: 16px; }
.bk-field { display: grid; gap: 6px; }
.bk-field label { font-size: 14px; font-weight: 600; }
.bk-field input, .bk-field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px;
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-bg);
}
.bk-field textarea { resize: vertical; min-height: 88px; }
[dir="rtl"] .bk-field input[dir="ltr"] { text-align: right; }
.bk-field input:focus, .bk-field textarea:focus { outline: 2px solid var(--bk-accent); outline-offset: 0; border-color: transparent; }
.bk-field__hint { font-size: 12px; color: var(--bk-muted); }
.bk-field__error { font-size: 13px; font-weight: 600; color: #a4161a; }
.bk-field.has-error input, .bk-field.has-error textarea { border-color: #a4161a; }
.bk-check label { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; cursor: pointer; }
.bk-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--bk-accent); }
.bk-check .bk-field__error { display: block; margin-top: 6px; padding-inline-start: 34px; }

/* Schritt 5: Bestätigung */
.bk-done { display: grid; gap: 18px; justify-items: start; }
.bk-done__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--bk-accent); color: var(--bk-accent-fg); }
.bk-done__icon svg { width: 30px; height: 30px; }
.bk-done__text { font-size: 17px; line-height: 1.5; }
.bk-done .bk-summary { width: 100%; }