/* Online booking widget on /buchung-und-kontakt. Built on the Relume design tokens of the page. */
.bk { padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 2rem; }
.bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 991px) { .bk-grid { grid-template-columns: 1fr; } }
.bk fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.bk legend { padding: 0; margin-bottom: 1rem; }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.bk-fields .bk-wide { grid-column: 1 / -1; }
@media (max-width: 479px) { .bk-fields { grid-template-columns: 1fr; } }

.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.bk-cal-title { font-family: var(--font-family-heading); font-weight: 700; font-size: 1.125rem; color: var(--scheme-heading); }
.bk-nav { width: 44px; height: 44px; border-radius: var(--radius-small); border: 1px solid var(--scheme-border); background: transparent; color: var(--scheme-text); cursor: pointer; font-size: 1.25rem; line-height: 1; }
.bk-nav:disabled { opacity: 0.35; cursor: default; }
.bk-week, .bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.375rem; }
.bk-week span { text-align: center; font-size: 0.8125rem; color: var(--scheme-text-muted); padding-bottom: 0.25rem; }
.bk-day { aspect-ratio: 1 / 1; min-height: 40px; border-radius: var(--radius-small); border: 1px solid var(--scheme-border); background: var(--scheme-background); color: var(--scheme-text); font-family: var(--font-family-body); font-size: 0.9375rem; cursor: pointer; padding: 0; }
.bk-day:hover:not(:disabled) { border-color: var(--scheme-accent); }
.bk-day:focus-visible, .bk-nav:focus-visible, .bk-option:focus-within { outline: 2px solid var(--scheme-accent); outline-offset: 2px; }
.bk-day[aria-pressed="true"] { background: var(--button-fill); border-color: var(--button-fill); color: var(--button-text); font-weight: 700; }
.bk-day.is-taken { background: transparent; color: var(--scheme-text-muted); text-decoration: line-through; opacity: 0.55; cursor: not-allowed; }
.bk-day.is-out { background: transparent; border-color: transparent; color: var(--scheme-text-muted); opacity: 0.35; cursor: default; }
.bk-day.is-blank { visibility: hidden; }
.bk-legend { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: 0.75rem; }
.bk-dot { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 4px; border: 1px solid var(--scheme-border); vertical-align: -2px; margin-right: 0.375rem; }
.bk-dot-taken { opacity: 0.55; background: repeating-linear-gradient(135deg, transparent 0 3px, var(--scheme-text-muted) 3px 4px); }
.bk-dot-selected { background: var(--button-fill); border-color: var(--button-fill); }

.bk-options { display: grid; gap: 0.75rem; }
.bk-option { display: flex; gap: 0.875rem; align-items: flex-start; padding: 1rem 1.125rem; border: 1px solid var(--scheme-border); border-radius: var(--radius-medium); background: var(--scheme-background); cursor: pointer; color: var(--scheme-text); text-decoration: none; }
.bk-option:has(input:checked) { border-color: var(--button-fill); box-shadow: 0 0 0 1px var(--button-fill); }
.bk-option input { margin-top: 0.2rem; accent-color: var(--button-fill); width: 1.125rem; height: 1.125rem; flex: none; }
.bk-option-title { display: block; font-weight: 700; color: var(--scheme-heading); }
.bk-option-text { display: block; font-size: 0.875rem; color: var(--scheme-text-muted); margin-top: 0.125rem; }
.bk-option-price { margin-left: auto; font-family: var(--font-family-heading); font-weight: 700; color: var(--scheme-heading); white-space: nowrap; }
.bk-check { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.bk-check .checkbox { flex: none; margin-top: 0.1rem; }
.bk-choice { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.bk-choice label { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.bk-choice input { accent-color: var(--button-fill); width: 1.125rem; height: 1.125rem; }
.bk-hint { font-size: 0.875rem; color: var(--scheme-text-muted); }
.bk-hint a, .bk-check a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.bk-invalid { color: #b42318; font-size: 0.8125rem; margin-top: 0.25rem; }
.bk .input[aria-invalid="true"], .bk-check.is-invalid .checkbox { border-color: #b42318; }

.bk-summary { border-top: 1px solid var(--scheme-border); padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.bk-summary-line { color: var(--scheme-text); }
.bk-total { font-family: var(--font-family-heading); font-weight: 700; font-size: 1.75rem; color: var(--scheme-heading); }
.bk-summary .button { align-self: flex-start; }
.bk-summary .button[disabled] { opacity: 0.6; cursor: progress; }
.bk-done { text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; padding: 2rem 0; }
.bk-done .material-symbols-rounded { font-size: 3rem; color: var(--button-fill); }