/* Hüpfburg Booking – Frontend-Styles */

.hb-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 24px 0; }
.hb-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; }
.hb-card__img img { width: 100%; height: 180px; object-fit: cover; display: block; }
.hb-card__body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hb-card__body h3 { margin: 0; font-size: 1.15rem; }
.hb-card__body h3 a { text-decoration: none; color: inherit; }
.hb-price { margin: 0; color: #374151; }
.hb-price strong { color: #0f766e; }

.hb-btn { display: inline-block; padding: 10px 16px; border-radius: 8px; background: #0f766e; color: #fff !important; text-decoration: none; border: none; cursor: pointer; font-weight: 600; text-align: center; font-size: .95rem; }
.hb-btn:hover { background: #0d5f59; }
.hb-btn--primary { width: 100%; padding: 14px; font-size: 1.05rem; }
.hb-btn--ghost { background: #f3f4f6; color: #111827 !important; }
.hb-btn--ghost:hover { background: #e5e7eb; }
.hb-btn:disabled { opacity: .5; cursor: not-allowed; }

.hb-booking { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 32px 0; align-items: start; }
@media (max-width: 780px) { .hb-booking { grid-template-columns: 1fr; } }
.hb-booking h3 { margin-top: 0; }

/* Kalender */
.hb-cal { border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; background: #fff; }
.hb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hb-cal__title { font-weight: 700; }
.hb-cal__prev, .hb-cal__next { background: #f3f4f6; border: none; border-radius: 8px; width: 36px; height: 36px; font-size: 1.3rem; cursor: pointer; }
.hb-cal__prev:hover, .hb-cal__next:hover { background: #e5e7eb; }
.hb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.hb-cal__wd { text-align: center; font-size: .75rem; color: #6b7280; font-weight: 600; padding: 4px 0; }
.hb-cal__cell { aspect-ratio: 1 / 1; border: none; border-radius: 8px; cursor: pointer; font-size: .9rem; display: flex; align-items: center; justify-content: center; background: #f9fafb; color: #111827; }
.hb-cal__cell--empty { background: transparent; cursor: default; }
.hb-cal__cell--free { background: #dcfce7; }
.hb-cal__cell--partial { background: #fef3c7; }
.hb-cal__cell--booked { background: #fee2e2; color: #991b1b; }
.hb-cal__cell--past { background: #f3f4f6; color: #d1d5db; cursor: not-allowed; }
.hb-cal__cell--selected { outline: 3px solid #0f766e; font-weight: 700; }
.hb-cal__cell:not(.hb-cal__cell--empty):not(.hb-cal__cell--past):hover { filter: brightness(.95); }
.hb-cal__legend { display: flex; gap: 16px; margin-top: 12px; font-size: .8rem; color: #4b5563; }
.hb-cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.hb-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.hb-dot--free { background: #22c55e; }
.hb-dot--partial { background: #f59e0b; }
.hb-dot--booked { background: #ef4444; }
.hb-cal__loading { padding: 20px; text-align: center; color: #9ca3af; grid-column: 1 / -1; }

/* Formular */
.hb-form { border: 1px solid #e5e7eb; border-radius: 12px; padding: 18px; background: #fff; }
.hb-field { margin-bottom: 14px; }
.hb-field label { display: block; font-weight: 600; margin-bottom: 4px; font-size: .9rem; }
.hb-field input, .hb-field textarea { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
.hb-field--row { display: flex; gap: 10px; }
.hb-field--row > div { flex: 1; }
.hb-hp { position: absolute; left: -9999px; }

.hb-busy { font-size: .85rem; color: #4b5563; margin-bottom: 10px; }
.hb-busy__label { font-weight: 600; }
.hb-busy ul { margin: 4px 0 0; padding-left: 18px; }
.hb-busy__free { color: #15803d; font-weight: 600; }

.hb-availability { padding: 10px; border-radius: 8px; font-weight: 600; margin-bottom: 14px; text-align: center; }
.hb-availability--ok { background: #dcfce7; color: #166534; }
.hb-availability--bad { background: #fee2e2; color: #991b1b; }
.hb-availability--checking { background: #f3f4f6; color: #6b7280; }
.hb-availability:empty { display: none; }

.hb-voucher-msg { display: block; margin-top: 4px; font-size: .82rem; }
.hb-voucher-msg.is-ok { color: #15803d; }
.hb-voucher-msg.is-bad { color: #b91c1c; }

.hb-summary { border-top: 1px solid #e5e7eb; padding-top: 12px; margin: 14px 0; }
.hb-summary__row { display: flex; justify-content: space-between; padding: 4px 0; }
.hb-summary__total { font-size: 1.15rem; border-top: 1px dashed #d1d5db; margin-top: 6px; padding-top: 8px; }
.hb-summary__total strong { color: #0f766e; }
.hb-note { background: #eff6ff; border-left: 3px solid #3b82f6; padding: 8px 12px; font-size: .85rem; border-radius: 4px; }

.hb-result { margin-top: 14px; padding: 12px; border-radius: 8px; }
.hb-result:empty { display: none; }
.hb-result--ok { background: #dcfce7; color: #166534; }
.hb-result--bad { background: #fee2e2; color: #991b1b; }

/* Zeitraum-Auswahl v2 */
.hb-hint { font-size: .85rem; color: #6b7280; margin: 0 0 8px; min-height: 1.1em; }
.hb-dot--sel { background: #0f766e; }
.hb-cal__cell--sel { background: #99f6e4; }
.hb-cal__cell--sel-edge { background: #0f766e; color: #fff; font-weight: 700; }
.hb-cal__cell--booked[disabled] { cursor: not-allowed; }

.hb-radio-row { display: flex; gap: 18px; }
.hb-radio-row label { font-weight: 400; display: inline-flex; gap: 6px; align-items: center; }
.hb-delivery-box { border: 1px dashed #cbd5e1; border-radius: 8px; padding: 12px; margin-bottom: 14px; background: #f8fafc; }
.hb-check { font-weight: 400 !important; display: inline-flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.hb-delivery-msg { font-size: .82rem; color: #4b5563; margin: 6px 0 0; }
.hb-delivery-box select { width: 100%; padding: 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; }

.hb-voucher-toggle { background: none; border: none; color: #0f766e; cursor: pointer; font-weight: 600; padding: 0 0 10px; font-size: .95rem; }
.hb-voucher-toggle:hover { text-decoration: underline; }
.hb-summary__deliv strong { color: #b45309; }