/* booking.css – Anfrageformular (.booking-form) und Verfügbarkeits-Widget (.booking-widget). Werte nach DESIGN.md §1, §3, §5.
   Die Tokens --c-* kommen aus site.css; die Fallbacks unten greifen nur, wenn site.css fehlt. */
.booking-form, .booking-widget {
  --bf-ink: var(--c-ink, #1B1A17); --bf-muted: var(--c-muted, #625C53); --bf-line: var(--c-line-strong, rgba(27, 26, 23, .42));
  --bf-bg: var(--c-bg, #F7F5F0); --bf-surface: var(--c-surface, #FFFFFF); --bf-accent: var(--c-accent, #B4713B);
  --bf-rose: var(--c-rose, #8E2F2F); --bf-ok: var(--c-ok, #3F6B5E); --bf-night: var(--c-night, #1C2740); --bf-on-night: var(--c-on-night, #F7F5F0);
  color-scheme: light;   /* kein Dunkelmodus (DESIGN §10): Datumsfenster, Auswahllisten und Scrollbalken bleiben auch auf dunklen Systemen hell (Nachtrag P2-9) */
}


/* Startseite, „Buchen“: Karten, die nur einen Knopf tragen (Direkt anfragen, WhatsApp), enden mit ihrem Inhalt. Sie wurden auf die Höhe der
   Widget-Karte gestreckt und schoben den Knopf mit margin-top:auto ans untere Ende, rund 220 px unter den Text (P3-21).
   Gehört eigentlich nach site.css (.way, Z. 1043), das Tabu war; die Regel greift, weil index.html booking.css lädt. */
@media (min-width: 768px) { .book__ways > .way { align-self: start; } }

/* Karte */
.booking-form { color: var(--bf-ink); background: var(--bf-surface); border: 1px solid var(--bf-line); border-radius: var(--r-card, 20px); padding: clamp(1.25rem, 4vw, 2.25rem); }
.booking-form__fields, .booking-widget__fields { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 480px) { .booking-form__fields { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }

/* Feld */
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field__label { font-size: var(--fs-small, .9rem); font-weight: 600; line-height: 1.3; }
.field__hint { margin: 0; font-size: var(--fs-small, .9rem); line-height: 1.5; color: var(--bf-muted); }
.field__error { margin: 0; font-size: var(--fs-small, .9rem); font-weight: 500; line-height: 1.4; color: var(--bf-rose); color: color-mix(in srgb, var(--bf-rose) 70%, var(--bf-ink)); } /* Mischung hält AA (≥ 4,5:1) */
.field__error[hidden] { display: none; }
.field__input {
  box-sizing: border-box; width: 100%; min-height: 48px; padding: .7rem 1rem; margin: 0;
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--bf-ink);
  background-color: var(--bf-bg); border: 1px solid var(--bf-line); border-radius: 12px;
  -webkit-appearance: none; appearance: none; transition: border-color .15s ease;
}
.field__input::placeholder { color: var(--bf-muted); opacity: 1; }
.field__input:hover { border-color: var(--bf-muted); }
.field__input:focus { outline: 2px solid var(--bf-accent); outline-offset: 3px; border-color: var(--bf-accent); }
.field__input[aria-invalid="true"] { border-color: var(--bf-rose); }
textarea.field__input { min-height: 8rem; line-height: 1.5; resize: vertical; }
input[type="date"].field__input { display: block; min-width: 0; }
input[type="date"].field__input::-webkit-date-and-time-value { min-height: 1.4em; text-align: start; }
select.field__input {
  padding-inline-end: 2.75rem; cursor: pointer; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.45rem) 55%, calc(100% - 1.1rem) 55%; background-size: .36rem .36rem; background-repeat: no-repeat;
}
[dir="rtl"] select.field__input { background-position: 1.1rem 55%, 1.45rem 55%; }
.field__input:-webkit-autofill { -webkit-text-fill-color: var(--bf-ink); box-shadow: 0 0 0 100px var(--bf-bg) inset; caret-color: var(--bf-ink); }
/* E-Mail und Telefon werden links-nach-rechts getippt und gelesen (in RTL-Sprachen brechen Adressen mit Satzzeichen am Rand und das „+“ sonst falsch um); in RTL bleiben die Felder rechtsbündig. */
.field__input[type="email"], .field__input[type="tel"] { direction: ltr; }
[dir="rtl"] .field__input[type="email"], [dir="rtl"] .field__input[type="tel"] { text-align: right; }

/* Einwilligung (Checkbox, Touchziel ≥ 44 px) */
.field__check { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; cursor: pointer; font-size: var(--fs-small, .9rem); line-height: 1.5; }
.field__check input {
  flex: none; display: grid; place-content: center; width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; cursor: pointer;
  background: var(--bf-bg); border: 1.5px solid var(--bf-muted); border-radius: 6px; -webkit-appearance: none; appearance: none;
}
.field__check input::after { content: ""; width: .8rem; height: .8rem; background: var(--bf-on-night); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transition: transform .12s ease; }
.field__check input:checked { background: var(--bf-night); border-color: var(--bf-night); }
.field__check input:checked::after { transform: scale(1); }
.field__check input:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 3px; }
.field__check input[aria-invalid="true"] { border-color: var(--bf-rose); }
.field__check a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.field--trap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; } /* Honigtopf: unsichtbar, ohne Überlauf (auch in RTL) */

/* Aktionen und Status */
.booking-form__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.booking-form__actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
@media (min-width: 480px) { .booking-form__actions .btn { flex: 0 1 auto; } }
.booking-form [aria-busy="true"] { opacity: .7; cursor: progress; }
.form__status { margin: 0; font-size: var(--fs-body, 1.0625rem); line-height: 1.5; }
.form__status:not(:empty) { margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--bf-line); border-inline-start-width: 4px; border-radius: 12px; }
.form__status.is-ok { border-inline-start-color: var(--bf-ok); }
.form__status.is-error { border-inline-start-color: var(--bf-rose); color: var(--bf-rose); color: color-mix(in srgb, var(--bf-rose) 70%, var(--bf-ink)); }
.form__status:focus { outline: none; }
.form__status strong { display: block; margin-bottom: .35rem; font: 500 var(--fs-h3, 1.5rem)/1.15 var(--font-display, Newsreader, "Iowan Old Style", Georgia, serif); color: var(--bf-ok); }
.booking-form.is-sent .booking-form__fields, .booking-form.is-sent .booking-form__actions { display: none; }

/* Verfügbarkeits-Widget: schmal zweispaltig, ab 40 rem eine Zeile */
.booking-widget { container-type: inline-size; }
.booking-widget__fields { grid-template-columns: 1fr 1fr; gap: .75rem; align-items: end; }
.booking-widget__submit { grid-column: 1 / -1; width: 100%; justify-content: center; }
.booking-widget__note { margin: .75rem 0 0; font-size: var(--fs-small, .9rem); line-height: 1.5; color: var(--bf-muted); }
@container (min-width: 40rem) {
  .booking-widget__fields { grid-template-columns: 1fr 1fr 1fr auto; }
  .booking-widget__fields .field--full, .booking-widget__submit { grid-column: auto; width: auto; }
}

@media (prefers-reduced-motion: reduce) { .field__input, .field__check input::after { transition: none; } }
@media print { .booking-form, .booking-widget { display: none; } }