/* Buchungskalender (module app/Modules/Buchung). Uses the site's theme variables (--accent, --border,
   --text, --muted); the form reuses the Formular block's classes (.site-form, .form-field …). */
.bk { --bk-gap: 28px; color: var(--text); }
.bk-loading { min-height: 280px; border-radius: 10px; background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(0,0,0,.07), rgba(0,0,0,.03)); background-size: 200% 100%; animation: bk-pulse 1.4s linear infinite; }
@keyframes bk-pulse { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .bk-loading { animation: none; } }
.bk-empty { padding: 16px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); }

.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.bk-title { margin: 0; }
.bk-lang { margin-left: auto; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; font: inherit; color: #1c1e22; } /* white field: always dark writing */

/* The months use the full width; the arrows sit on the month-title line at the outer edges. */
.bk-cal { position: relative; }
.bk-nav { position: absolute; top: 2px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--page-bg, #fff); color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.bk-nav--prev { left: 0; }
.bk-nav--next { right: 0; }
.bk-nav:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bk-nav:disabled { opacity: .3; cursor: default; }
.bk-months { display: grid; grid-template-columns: repeat(var(--bk-months, 2), minmax(0, 1fr)); gap: var(--bk-gap); }
@media (max-width: 900px) { .bk-months { grid-template-columns: repeat(min(var(--bk-months, 2), 2), minmax(0, 1fr)); } .bk-month:nth-child(n+3) { display: none; } }
@media (max-width: 640px) { .bk-months { grid-template-columns: minmax(0, 1fr); } .bk-month:nth-child(n+2) { display: none; } .bk { --bk-gap: 16px; } }
.bk-month-title { text-align: center; font-weight: 600; margin: 8px 0 12px; text-transform: capitalize; }
/* keep the outer months' titles clear of the arrows */
.bk-month:first-child .bk-month-title, .bk-month:last-child .bk-month-title { padding: 0 44px; }
.bk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.bk-wd { text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }

.bk-day {
    position: relative; aspect-ratio: 1 / 1; min-height: 34px; padding: 0; border: 0; border-radius: 4px;
    font: inherit; font-size: 14px; font-weight: 600; color: #1c1e22; cursor: pointer; isolation: isolate;
    background: linear-gradient(135deg, var(--bk-p) 50%, var(--bk-c) 50%);
}
.bk-day--blank { background: transparent; cursor: default; }
.bk-day.is-off { cursor: default; }
.bk-day.is-past { opacity: .35; text-decoration: line-through; }
.bk-day:not(.is-off):hover, .bk-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
.bk-day.has-tip::after { content: ''; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; }
.bk-day.is-range::before, .bk-day.is-arrival::before, .bk-day.is-departure::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); opacity: .28; }
/* arrival / departure: the half of the day that belongs to the stay in the same light tint as the nights between;
   the accent border marks them as start and end */
.bk-day.is-arrival::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bk-day.is-departure::before { clip-path: polygon(0 0, 100% 0, 0 100%); }
.bk-day.is-arrival, .bk-day.is-departure { box-shadow: inset 0 0 0 2px var(--accent); }
.bk-day.is-departable:not(.is-range):not(.is-departure) { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 18px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.bk-legend li { display: flex; align-items: center; gap: 7px; }
.bk-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--bk-c); border: 1px solid rgba(0,0,0,.12); }
/* "Ihre Auswahl": exactly like the selected days — the light accent tint over the day's colour, accent border */
.bk-swatch--selection { position: relative; overflow: hidden; border-color: var(--accent); }
.bk-swatch--selection::before { content: ''; position: absolute; inset: 0; background: var(--accent); opacity: .28; }

.bk-status { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; }
.bk-hint { color: var(--muted); }
.bk-stay { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.bk-stay > span { display: flex; flex-direction: column; }
.bk-stay small { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.bk-reset { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--accent); text-decoration: underline; cursor: pointer; }

.bk-form { margin-top: 20px; }
.bk-form .form-field input[type=number] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; font: inherit; }
.bk-info { margin: 0; color: var(--muted); white-space: pre-line; }
.bk-notice { padding: 12px 14px; border-radius: 8px; margin: 16px 0 0; white-space: pre-line; }
.bk-notice--ok { background: #e8f6ec; color: #1d5b33; border: 1px solid #b9e2c6; }
.bk-notice--error { background: #fdecec; color: #8a2020; border: 1px solid #f3c0c0; }
.bk-form > .bk-notice { margin: 0; }