/* Jochenshof Buchungskalender – Frontend-Styles (Naturfarben, passend zur Website) */

.jhb-widget{
	--jhb-sand:#fbf4e8; --jhb-cream:#fffcf6; --jhb-sea:#6bb0c4; --jhb-sea-deep:#3f7e8c;
	--jhb-green:#b5d8b8; --jhb-coral:#e8a87c; --jhb-ink:#4a4640; --jhb-ink-soft:#79736b;
	font-family:inherit; color:var(--jhb-ink); max-width:960px; margin:0 auto;
}
.jhb-title{font-size:1.6rem;color:var(--jhb-sea-deep);margin:0 0 16px;font-weight:700}
.jhb-acc-select{margin-bottom:18px}
.jhb-acc-select label{display:block;font-weight:600;color:var(--jhb-sea-deep);margin-bottom:6px;font-size:.9rem}
.jhb-acc-select select{width:100%;max-width:340px;padding:11px 14px;border:1.5px solid rgba(63,126,140,.25);border-radius:10px;background:#fff;font-size:.95rem}

.jhb-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
@media(max-width:760px){.jhb-layout{grid-template-columns:1fr}}

.jhb-calendar-wrap{background:var(--jhb-cream);border:1px solid rgba(63,126,140,.1);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(63,126,140,.1)}
.jhb-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.jhb-cal-nav span{font-weight:700;color:var(--jhb-sea-deep)}
.jhb-cal-nav button{width:34px;height:34px;border:none;border-radius:50%;background:var(--jhb-sand);color:var(--jhb-sea-deep);font-size:1.2rem;cursor:pointer;transition:.2s}
.jhb-cal-nav button:hover{background:var(--jhb-sea);color:#fff}

.jhb-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.jhb-dow{text-align:center;font-size:.72rem;font-weight:700;color:var(--jhb-sea);padding:4px 0}
.jhb-empty{aspect-ratio:1}
.jhb-day{aspect-ratio:1;border:none;border-radius:8px;background:rgba(181,216,184,.25);color:var(--jhb-ink);font-size:.85rem;cursor:pointer;transition:.15s}
.jhb-day:hover{background:var(--jhb-green)}
.jhb-past{opacity:.3;cursor:not-allowed;background:transparent}
.jhb-busy-day{background:rgba(232,168,124,.25);color:var(--jhb-coral);cursor:not-allowed;text-decoration:line-through}

/* Wechseltage: halbe Belegung als Dreieck.
   Anreisetag (check-in): belegt ab nachmittags -> Dreieck steigt von links unten nach rechts oben an.
   Abreisetag (check-out): frei ab vormittags  -> Dreieck fällt von links oben nach rechts unten ab. */
.jhb-day{position:relative;overflow:hidden}
.jhb-day.jhb-checkin-day,
.jhb-day.jhb-checkout-day{background:rgba(181,216,184,.25);color:var(--jhb-ink);cursor:pointer;text-decoration:none}
.jhb-day.jhb-checkin-day::before,
.jhb-day.jhb-checkout-day::before{
	content:"";position:absolute;inset:0;background:rgba(232,168,124,.55);z-index:0;
}
/* Anreisetag: untere rechte Hälfte belegt (Diagonale links-unten -> rechts-oben) */
.jhb-day.jhb-checkin-day::before{clip-path:polygon(100% 0, 100% 100%, 0 100%)}
/* Abreisetag: untere linke Hälfte belegt (Diagonale links-oben -> rechts-unten) */
.jhb-day.jhb-checkout-day::before{clip-path:polygon(0 0, 0 100%, 100% 100%)}
.jhb-day.jhb-checkin-day span,
.jhb-day.jhb-checkout-day span{position:relative;z-index:1}
.jhb-in-range{background:var(--jhb-sea-deep)!important;color:#fff}
.jhb-range-start,.jhb-range-end{background:var(--jhb-coral)!important;color:#fff;font-weight:700}

.jhb-legend{display:flex;gap:16px;margin-top:14px;font-size:.78rem;color:var(--jhb-ink-soft)}
.jhb-legend span{display:flex;align-items:center;gap:6px}
.jhb-dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.jhb-dot.jhb-free{background:rgba(181,216,184,.7)}
.jhb-dot.jhb-busy{background:rgba(232,168,124,.7)}
.jhb-dot.jhb-sel{background:var(--jhb-sea-deep)}

.jhb-times{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-size:.82rem;color:var(--jhb-ink-soft)}
.jhb-times strong{color:var(--jhb-sea-deep)}

.jhb-form-wrap{background:var(--jhb-cream);border:1px solid rgba(63,126,140,.1);border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(63,126,140,.1)}
.jhb-summary{margin-bottom:16px;min-height:40px}
.jhb-hint{color:var(--jhb-ink-soft);font-size:.9rem;margin:0}
.jhb-error{color:#c0623a;font-size:.9rem;margin:0}
.jhb-price{display:flex;justify-content:space-between;align-items:center;background:var(--jhb-sand);border-radius:10px;padding:12px 16px}
.jhb-price strong{font-size:1.3rem;color:var(--jhb-coral)}
.jhb-breakdown{background:var(--jhb-sand);border-radius:10px;padding:14px 16px}
.jhb-line{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--jhb-ink);padding:3px 0}
.jhb-line.jhb-fee{color:var(--jhb-ink-soft);font-size:.86rem}
.jhb-line.jhb-total{margin-top:8px;padding-top:10px;border-top:1px solid rgba(63,126,140,.2);font-size:1rem}
.jhb-line.jhb-total strong{font-size:1.3rem;color:var(--jhb-coral)}

.jhb-form .jhb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jhb-field{margin-bottom:12px;display:flex;flex-direction:column}
.jhb-field label{font-size:.82rem;font-weight:600;color:var(--jhb-sea-deep);margin-bottom:5px}
.jhb-field input,.jhb-field textarea,.jhb-field output{padding:10px 13px;border:1.5px solid rgba(63,126,140,.2);border-radius:10px;background:#fff;font-size:.92rem;font-family:inherit}
.jhb-field output{background:var(--jhb-sand);border-style:dashed;color:var(--jhb-sea-deep);font-weight:600}
.jhb-field input:focus,.jhb-field textarea:focus{outline:none;border-color:var(--jhb-sea);box-shadow:0 0 0 3px rgba(107,176,196,.15)}

.jhb-privacy{font-size:.76rem;color:var(--jhb-ink-soft);line-height:1.5;margin:6px 0 14px}
.jhb-submit{width:100%;padding:14px;border:none;border-radius:999px;background:var(--jhb-coral);color:#fff;font-weight:700;font-size:.98rem;cursor:pointer;transition:.25s}
.jhb-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 22px rgba(232,168,124,.4)}
.jhb-submit:disabled{opacity:.5;cursor:not-allowed}

.jhb-message{margin-top:14px;padding:0;font-size:.9rem}
.jhb-message.jhb-ok{color:#4d7c4d;background:rgba(181,216,184,.3);padding:12px;border-radius:10px}
.jhb-message.jhb-error{color:#c0623a;background:rgba(232,168,124,.2);padding:12px;border-radius:10px}

/* --- Anklickbare Datumsfelder mit Popup-Kalender --- */
.jhb-datefield { position: relative; }
.jhb-datebtn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--jhb-sand-deep, #f0e4cf);
	border-radius: 10px;
	background: #fff;
	color: var(--jhb-ink, #4a4640);
	font-size: 15px;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.jhb-datebtn:hover { border-color: var(--jhb-sea, #6bb0c4); }
.jhb-datebtn[aria-expanded="true"] {
	border-color: var(--jhb-sea-deep, #3f7e8c);
	box-shadow: 0 0 0 3px rgba(107,176,196,.2);
}
.jhb-datebtn-icon { color: var(--jhb-sea-deep, #3f7e8c); font-size: 12px; }

.jhb-popcal {
	position: absolute;
	z-index: 30;
	top: calc(100% + 6px);
	left: 0;
	width: 300px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid var(--jhb-sand-deep, #f0e4cf);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(63,126,140,.18);
	padding: 14px;
}
.jhb-popcal[hidden] { display: none; }
.jhb-popcal .jhb-calendar { gap: 2px; }
.jhb-popcal .jhb-day { font-size: 13px; }
@media (max-width: 600px) {
	.jhb-popcal { left: 50%; transform: translateX(-50%); }
}