/* Belegungskalender – Gestaltung nach dem Claude-Design-Entwurf
   „Belegungskalender Saison“. Farben folgen den Tokens des Themes
   „Osterweg Sylt“ und haben eigene Ersatzwerte für andere Themes. */

.fewo-bk {
	--fewo-bk-free: var(--state-free, #E7ECE3);
	--fewo-bk-free-ink: var(--state-free-ink, #4C5E45);
	--fewo-bk-booked: var(--state-booked, #E6DCD3);
	--fewo-bk-booked-ink: var(--state-booked-ink, #8A5E4A);
	--fewo-bk-ink: var(--ink, #1F2326);
	--fewo-bk-body: var(--text-body, #4A4F53);
	--fewo-bk-muted: var(--text-muted, #7C8084);
	--fewo-bk-border: var(--border-default, #DDD6CB);
	--fewo-bk-border-strong: var(--border-strong, #BFB5A6);
	--fewo-bk-card: var(--surface-card, #FFFFFF);
	display: flex;
	flex-direction: column;
	gap: 32px;
	box-sizing: border-box;
	margin: 0;
	padding: clamp(24px, 3.5vw, 44px);
	border: 1px solid var(--fewo-bk-border);
	background: var(--fewo-bk-card);
	color: var(--fewo-bk-ink);
	font-family: var(--font-sans, inherit);
}

.fewo-bk p { margin: 0; }

/* Kopf */

.fewo-bk-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--fewo-bk-border);
}

.fewo-bk-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fewo-bk-title svg { flex: none; }

.fewo-bk-title > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fewo-bk-eyebrow {
	color: var(--fewo-bk-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.fewo-bk-heading {
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -.01em;
}

.fewo-bk-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.fewo-bk-nav[hidden],
.fewo-bk-month[hidden] { display: none; }

.fewo-bk-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
	border: 1px solid var(--fewo-bk-border-strong);
	border-radius: 0;
	background: transparent;
	color: var(--fewo-bk-ink);
	cursor: pointer;
}

.fewo-bk-nav button:hover:not(:disabled) { border-color: var(--fewo-bk-ink); }

.fewo-bk-nav button:disabled {
	cursor: default;
	opacity: .3;
}

.fewo-bk-nav button:focus-visible {
	outline: 2px solid var(--fewo-bk-ink);
	outline-offset: 3px;
}

.fewo-bk-range {
	min-width: 210px;
	color: var(--fewo-bk-body);
	font-size: 13px;
	text-align: center;
}

/* Sechs preisbasierte SAS-Saisons; Buchstaben ergänzen die Farbcodierung. */
.fewo-bk {
	--fewo-bk-tier-1: oklch(0.930 0.035 85);
	--fewo-bk-tier-2: oklch(0.824 0.042 107);
	--fewo-bk-tier-3: oklch(0.718 0.049 129);
	--fewo-bk-tier-4: oklch(0.612 0.056 151);
	--fewo-bk-tier-5: oklch(0.506 0.063 173);
	--fewo-bk-tier-6: oklch(0.400 0.070 195);
}

.fewo-bk .tier-1 { --fewo-bk-tier: var(--fewo-bk-tier-1); }
.fewo-bk .tier-2 { --fewo-bk-tier: var(--fewo-bk-tier-2); }
.fewo-bk .tier-3 { --fewo-bk-tier: var(--fewo-bk-tier-3); }
.fewo-bk .tier-4 { --fewo-bk-tier: var(--fewo-bk-tier-4); }
.fewo-bk .tier-5 { --fewo-bk-tier: var(--fewo-bk-tier-5); }
.fewo-bk .tier-6 { --fewo-bk-tier: var(--fewo-bk-tier-6); }

.fewo-bk-tier {
	display: block;
	min-height: 12px;
	margin-top: 4px;
	border-top: 5px solid var(--fewo-bk-tier, transparent);
	padding-top: 3px;
	color: var(--fewo-bk-body);
	font-size: 10px;
	line-height: 1.2;
}

.fewo-bk-tiers {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 16px;
	color: var(--fewo-bk-body);
	font-size: 13px;
}

.fewo-bk-tier-scale {
	display: flex;
	flex: 0 1 336px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fewo-bk-tier-scale li {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 40px;
	border-top: 10px solid var(--fewo-bk-tier);
	padding-top: 6px;
	color: var(--fewo-bk-ink);
	font-size: 12px;
	font-weight: 500;
	text-align: center;
}

.fewo-bk-tier-rate {
	font-size: 11px;
	font-weight: 400;
}

/* Monate */

.fewo-bk-months {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 40px 44px;
}

.fewo-bk-month { min-width: 0; }

.fewo-bk-month table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 6px;
	table-layout: fixed;
}

.fewo-bk-month caption {
	padding: 0 0 8px;
	color: var(--fewo-bk-ink);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: .02em;
	text-align: center;
}

.fewo-bk-month th {
	padding: 0 0 6px;
	border: 0;
	background: none;
	color: var(--fewo-bk-muted);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-align: center;
	text-transform: uppercase;
}

.fewo-bk-month td {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
	vertical-align: top;
}

.fewo-bk-day {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	max-width: 100%;
	height: 36px;
	margin: 0 auto;
	border-radius: 50%;
	background: var(--fewo-bk-free);
	color: var(--fewo-bk-free-ink);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

button.fewo-bk-day {
	padding: 0;
	border: 0;
	box-shadow: none;
	font-family: inherit;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	cursor: help;
}

button.fewo-bk-day:focus-visible {
	outline: 2px solid var(--fewo-bk-ink);
	outline-offset: 3px;
}

.fewo-bk td.is-tooltip-open { z-index: 4; }

.fewo-bk-tooltip {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	width: 220px;
	max-width: calc(100vw - 24px);
	padding: 14px 16px;
	border: 1px solid var(--fewo-bk-border);
	background: var(--fewo-bk-card);
	box-shadow: 0 6px 24px #1f232626;
	color: var(--fewo-bk-ink);
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	transform: translateX(calc(-50% + var(--fewo-bk-tooltip-shift, 0px)));
}

.fewo-bk-tooltip[hidden] { display: none; }
.fewo-bk-tooltip.is-above { top: auto; bottom: calc(100% + 8px); }

/* Transparente Brücke: der Tooltip bleibt beim Bewegen des Zeigers erreichbar. */
.fewo-bk-tooltip::before {
	position: absolute;
	top: -10px;
	right: 0;
	left: 0;
	height: 10px;
	content: '';
}
.fewo-bk-tooltip.is-above::before { top: auto; bottom: -10px; }

.fewo-bk-tooltip-date { font-size: 12px; color: var(--fewo-bk-muted); }
.fewo-bk-tooltip-status { color: var(--fewo-bk-body); }
.fewo-bk-tooltip-price { font-size: 16px; font-weight: 500; }

.fewo-bk-season {
	align-self: flex-start;
	padding: 4px 9px;
	background: #EEE8DE;
	color: var(--fewo-bk-body);
	font-size: 12px;
	font-weight: 500;
}
.fewo-bk-season[class*="season-"] { background: var(--fewo-bk-tier); color: var(--fewo-bk-ink); }
.fewo-bk-season.season-d { color: #101512; }
.fewo-bk-season.season-e,
.fewo-bk-season.season-f { color: #FFFFFF; }

/* Tagesstatus – An-/Abreise diagonal halb eingefärbt. */
.fewo-bk .is-booked .fewo-bk-day,
.fewo-bk .is-changeover .fewo-bk-day {
	background: var(--fewo-bk-booked);
	color: var(--fewo-bk-booked-ink);
}

.fewo-bk .is-arrival .fewo-bk-day {
	background: linear-gradient(135deg, var(--fewo-bk-free) 50%, var(--fewo-bk-booked) 50%);
	color: var(--fewo-bk-booked-ink);
}

.fewo-bk .is-departure .fewo-bk-day {
	background: linear-gradient(135deg, var(--fewo-bk-booked) 50%, var(--fewo-bk-free) 50%);
	color: var(--fewo-bk-free-ink);
}

.fewo-bk td.is-past .fewo-bk-day {
	background: transparent;
	color: var(--fewo-bk-muted);
	opacity: .45;
}

/* Legende */

.fewo-bk-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
	padding: 0;
	color: var(--fewo-bk-body);
	font-size: 13px;
	list-style: none;
}

.fewo-bk-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.fewo-bk-swatch {
	display: inline-block;
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--fewo-bk-free);
}

.fewo-bk-swatch.is-booked { background: var(--fewo-bk-booked); }
.fewo-bk-swatch.is-arrival { background: linear-gradient(135deg, var(--fewo-bk-free) 50%, var(--fewo-bk-booked) 50%); }

/* Fuß */

.fewo-bk-foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 24px;
	border-top: 1px solid var(--fewo-bk-border);
}

.fewo-bk-updated {
	color: var(--fewo-bk-muted);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Schmale Bildschirme: Zeitraum über den beiden Navigationsbuttons. */
@media (max-width: 600px) {
	.fewo-bk-nav { width: 100%; justify-content: space-between; }
	.fewo-bk-range { order: -1; flex-basis: 100%; min-width: 0; text-align: left; }
	.fewo-bk-tier-scale { flex-basis: 100%; order: 1; }
}