/* Conversion V4 / P1 – Reisedaten-Einstieg (Startseite, Chalet-Seiten) und Belegungshinweise. */
.bq {
  margin: 1.25rem 0 0;
  padding: clamp(.9rem, 2vw, 1.15rem);
  border: 1px solid rgba(101, 76, 45, .22);
  border-radius: 1rem;
  background: #fffdf8;
  color: #25231d;
  box-shadow: 0 .75rem 2rem rgba(45, 36, 24, .08);
  text-align: left;
}
.bq__title { margin: 0 0 .7rem; font-weight: 700; font-size: 1rem; line-height: 1.35; }
.bq__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.bq--home .bq__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr); }
.bq__actions { margin-top: .85rem; }
.bq label { display: grid; gap: .3rem; min-width: 0; font-size: .85rem; font-weight: 700; color: #4a4338; }
.bq input, .bq select {
  box-sizing: border-box; min-width: 0; max-width: 100%;
  width: 100%; min-height: 2.9rem; padding: .55rem .65rem;
  border: 1px solid #7b6a55; border-radius: .55rem; background: #fff; color: #25231d; font: inherit; font-size: 1rem;
}
.bq input:focus-visible, .bq select:focus-visible, .bq button:focus-visible { outline: 3px solid #8b5f22; outline-offset: 2px; }
.bq__submit { min-height: 2.9rem; white-space: nowrap; }
.bq__ages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.bq__ages[hidden] { display: none; }
.bq__errors { margin: .75rem 0 0; padding: .7rem .9rem; border-left: .3rem solid #9b2318; background: #fff1ef; color: #64180f; font-size: .92rem; }
.bq__errors[hidden] { display: none; }
.bq__errors ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.bq__note { margin: .6rem 0 0; font-size: .85rem; color: #6f6a5f; }

.bq-fit { margin: .6rem 0 0; padding: .55rem .75rem; border-radius: .55rem; font-size: .9rem; line-height: 1.4; }
.bq-fit[hidden] { display: none; }
.bq-fit p { margin: 0; }
.bq-fit p + p { margin-top: .3rem; }
.bq-fit[data-state="ok"] { background: #eef3e6; color: #33401f; }
.bq-fit[data-state="warn"] { background: #fff4e0; color: #5c3b07; border-left: .25rem solid #b5781c; }
.bq-fit[data-state="info"] { background: #f3efe6; color: #4a4338; }
.bq-fit a { color: inherit; font-weight: 700; text-decoration: underline; }
a[aria-disabled] { opacity: .55; }

/* Keine Ueberlagerung: mobile Buchungsleiste ausblenden, solange im Formular gearbeitet wird. */
body:has(.bq:focus-within) .mobile-booking-cta { display: none !important; }
.bq input, .bq select { scroll-margin-bottom: 6rem; }

@media (max-width: 1100px) {
  .bq--home .bq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) repeat(2, minmax(0, .7fr)); }
  .bq--home .bq__chalet { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .bq { margin-top: 1rem; padding: .85rem; border-radius: .85rem; }
  .bq__grid, .bq--home .bq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bq--home .bq__chalet { grid-column: 1 / -1; }
  .bq--home .bq__submit { width: 100%; min-height: 3.2rem; }
  .bq__ages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .bq input, .bq select { min-height: 3rem; font-size: 16px; }
}

/* Chalet-Seiten: Formular steht in der Aktionsspalte des Hero direkt ueber den Buttons. */
.chalet-hero-content:has(.bq) { align-items: start !important; }
.chalet-hero-content:has(.bq) > div:first-child { align-self: center; }
.bq input[type="date"] { -webkit-appearance: none; appearance: none; min-height: 2.9rem; }
.bq input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.chalet-hero-actions:has(> .bq) { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 10px; }
.chalet-hero-actions > .bq { flex: 1 1 100%; margin: 0 0 4px; }
.chalet-hero-actions > .bq .bq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chalet-hero-actions > .bq .bq__ages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) {
  .chalet-hero-actions:has(> .bq) { display: grid; grid-template-columns: 1fr; }
}
/* Startseite: Formular ersetzt die Einzel-Schaltflaeche im Hero und nutzt die volle Breite. */
.home-hero-content .bq--home { max-width: 1080px; }