/* Kidszone Ferienwochen-Zeitleiste – unten angedocktes Sticky-Element */

/* Ergebnisbereich während des AJAX-Austauschs */
.hp-page__content.kzfwt-busy {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.kzfwt-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990; /* unter Newsletter-Slide-In (99998) und Map-Promo (99997), über normalem Inhalt. */
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
	font-family: inherit;
}
.kzfwt-dock > * { pointer-events: auto; }

/* ── Griff (immer sichtbar) ─────────────────────────────── */
.kzfwt-handle {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	margin: 0 0 10px;
	padding: 9px 18px;
	border: 1px solid rgba( 0, 0, 0, 0.07 );
	border-radius: 16px;
	background: rgba( 245, 244, 215, 0.8 ); /* #f5f4d7, eingeklappt leicht durchsichtig */
	-webkit-backdrop-filter: blur( 7px );
	backdrop-filter: blur( 7px );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.16 );
	cursor: pointer;
	font-size: 14px;
	line-height: 1.15;
	color: #222;
	text-align: left;
	transition: box-shadow 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.kzfwt-handle:hover,
.kzfwt-dock[data-open="1"] .kzfwt-handle {
	background: #f5f4d7; /* voll deckend bei Hover / geöffnet */
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.22 );
}
.kzfwt-handle:hover { transform: translateY( -1px ); }
.kzfwt-handle__text { display: flex; flex-direction: column; gap: 2px; }
.kzfwt-handle__label { font-weight: 700; white-space: nowrap; }
.kzfwt-handle__sub { font-size: 11px; font-weight: 500; color: #7a7852; white-space: nowrap; }
.kzfwt-handle__count { white-space: nowrap; color: #666; }
.kzfwt-handle__count span { font-weight: 700; color: #222; }
.kzfwt-handle__arrow { color: #999; transition: transform 0.2s ease; }
.kzfwt-dock[data-open="1"] .kzfwt-handle__arrow { transform: rotate( 180deg ); }

/* ── Mini-Balkendiagramm mit Zeit-Achse (Höhe = Anzahl, Gruppen = Perioden) ── */
.kzfwt-strip {
	display: inline-flex;
	gap: 10px;
	align-items: flex-end;
}
.kzfwt-strip__grp {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}
.kzfwt-strip__bars {
	display: flex;
	gap: 2px;
	align-items: flex-end;
	height: 26px;
}
.kzfwt-strip__lbl {
	font-size: 9px;
	line-height: 1;
	color: #8a8862;
	white-space: nowrap;
}
.kzfwt-spark {
	width: 5px;
	height: 100%;
	border-radius: 2px 2px 0 0;
	background: #e6e6e6;
	display: inline-block;
}

/* ── Heat-Skala (Verfügbarkeit) ─────────────────────────── */
.kzfwt-h0 { background: #e7e5c6; }
.kzfwt-h1 { background: #cdeccd; }
.kzfwt-h2 { background: #93d693; }
.kzfwt-h3 { background: #4fb84f; }
.kzfwt-h4 { background: #2e9e2e; }
.kzfwt-spark.kzfwt-h0 { background: #d9d7b6; }

/* ── Panel ──────────────────────────────────────────────── */
.kzfwt-panel {
	width: min( 920px, calc( 100vw - 24px ) );
	max-height: min( 60vh, 460px );
	margin: 0 0 -2px;
	overflow-y: auto;
	background: #f5f4d7;
	border: 1px solid rgba( 0, 0, 0, 0.07 );
	border-bottom: none;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 34px rgba( 0, 0, 0, 0.18 );
	padding: 16px 18px 20px;
	box-sizing: border-box;
}
.kzfwt-panel[hidden] { display: none; }

.kzfwt-panel__head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.kzfwt-panel__head strong { font-size: 16px; }
.kzfwt-legend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-left: auto;
	font-size: 12px;
	color: #777;
}
.kzfwt-legend .kzfwt-spark { width: 9px; height: 12px; }
.kzfwt-close {
	border: none;
	background: #f2f2f2;
	color: #555;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.kzfwt-close:hover { background: #e6e6e6; }

/* ── Perioden + Wochen ──────────────────────────────────── */
.kzfwt-period { margin-bottom: 14px; }
.kzfwt-period__title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: #333;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.kzfwt-weeks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.kzfwt-week {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 62px;
	padding: 7px 10px;
	border-radius: 12px;
	border: 2px solid transparent;
	text-decoration: none;
	color: #123;
	line-height: 1.15;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none; /* kein blaues Text-Markieren beim schnellen Mehrfach-Klicken */
	transition: transform 0.1s ease, border-color 0.12s ease;
}
.kzfwt-week:hover { transform: translateY( -1px ); border-color: rgba( 254, 23, 27, 0.45 ); }
.kzfwt-week__label { font-size: 12px; font-weight: 700; white-space: nowrap; }
.kzfwt-week__count { font-size: 12px; opacity: 0.85; }

.kzfwt-week.is-selected {
	background: #fe171b;
	border-color: #d0060a;
	color: #fff;
}
.kzfwt-week.is-selected:hover { border-color: #b3000c; }
.kzfwt-week.is-selected .kzfwt-week__count { opacity: 1; }

.kzfwt-week.is-empty {
	background: #eae8cd;
	color: #a9a67f;
	pointer-events: none;
	opacity: 0.75;
}
.kzfwt-week.is-selected .kzfwt-week__label,
.kzfwt-week.is-selected .kzfwt-week__count { color: #fff; }

/* ── Footer: Anwenden / Zurücksetzen ────────────────────── */
.kzfwt-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	position: sticky;
	bottom: 0;
	margin-top: 8px;
	padding: 12px 2px 2px;
	border-top: 1px solid rgba( 0, 0, 0, 0.08 );
	background: #f5f4d7;
}
.kzfwt-reset {
	color: #7a7852;
	text-decoration: underline;
	font-size: 13px;
	cursor: pointer;
}
.kzfwt-reset:hover { color: #555; }
.kzfwt-hint-empty,
.kzfwt-foot-hint { font-size: 13px; color: #8a8862; }
.kzfwt-reset[hidden] { display: none; }
.kzfwt-apply {
	border: none;
	background: #e3000f;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.kzfwt-apply:hover { background: #c60010; }
.kzfwt-apply:disabled { background: #d7d5b6; color: #918f68; cursor: default; }

/* ── Mobil ──────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.kzfwt-panel {
		width: 100vw;
		border-radius: 14px 14px 0 0;
		max-height: 66vh;
		padding: 14px 14px 18px;
	}
	.kzfwt-handle { margin-bottom: 8px; font-size: 13px; gap: 8px; padding: 8px 13px; }
	.kzfwt-handle__count { display: none; }
	.kzfwt-week { min-width: 56px; }
	.kzfwt-strip { gap: 6px; }
	.kzfwt-spark { width: 4px; }
	.kzfwt-strip__bars { height: 22px; }
	.kzfwt-strip__lbl { font-size: 8px; }
}