/*
 * Kidszone Contact-FAB — Sprechblase rechts unten
 * Farbpalette: Cream + Coral (Plattform-Standard kh-*)
 */

.kz-fab {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Toggle-Button ───────────────────────────────────────────── */
.kz-fab__toggle {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: none;
	background: var(--kh-coral, #dc4534);
	color: #fff;
	box-shadow: 0 8px 24px rgba(220, 69, 52, .35), 0 2px 6px rgba(120, 95, 60, .2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s, box-shadow .35s, background .35s, color .35s;
	position: relative;
	padding: 0;
}
.kz-fab__toggle:hover {
	background: var(--kh-coral-dp, #c43928);
	transform: scale(1.04);
	box-shadow: 0 12px 32px rgba(220, 69, 52, .42);
}
.kz-fab__toggle:focus-visible {
	outline: 3px solid #f5f4d7;
	outline-offset: 3px;
}

/* Open-state: Toggle morpht zu Cream, Sprechblase wird frei (Coral) */
.kz-fab[data-state="open"] .kz-fab__toggle {
	background: #f5f4d7;
	color: var(--kh-coral, #dc4534);
	box-shadow: 0 4px 14px rgba(120, 95, 60, .15);
}
.kz-fab[data-state="open"] .kz-fab__toggle:hover {
	background: #ebe9c5;
	transform: scale(1);
}

.kz-fab__icon {
	width: 26px;
	height: 26px;
	fill: currentColor;
	transition: transform .3s;
}
.kz-fab[data-state="open"] .kz-fab__icon { transform: scale(1.08); }

/* Pulsierender Hint-Ring beim ersten Render (nur einmal pro Session, im closed-state) */
.kz-fab__toggle::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--kh-coral, #dc4534);
	opacity: 0;
	animation: kz-fab-pulse 2.6s ease-out 1.5s 2;
	pointer-events: none;
}
.kz-fab[data-state="open"] .kz-fab__toggle::before { display: none; }
@keyframes kz-fab-pulse {
	0%   { opacity: .55; transform: scale(1); }
	100% { opacity: 0;   transform: scale(1.7); }
}

/* ── Panel mit Optionen ──────────────────────────────────────── */
.kz-fab__panel {
	position: absolute;
	right: 0;
	bottom: 66px;
	width: 320px;
	max-width: calc(100vw - 40px);
	background: #f5f4d7;
	border: 1px solid var(--kh-edge, #ead7b5);
	border-radius: 18px;
	box-shadow: 0 18px 50px rgba(120, 95, 60, .25), 0 4px 12px rgba(120, 95, 60, .12);
	padding: 14px;
	opacity: 0;
	/* Closed: zusammengeschrumpft auf den Toggle-Punkt (rechts unten, im Toggle-Center) */
	transform: scale(.05) translateY(20px);
	transform-origin: calc(100% - 6px) calc(100% + 38px);   /* Toggle-Center: 58/2≈29, +9 offset zum bottom-edge */
	pointer-events: none;
	transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.32, .64, 1);
	will-change: transform, opacity;
}
.kz-fab[data-state="open"] .kz-fab__panel {
	opacity: 1;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

/* Kleiner Sprechblasen-Tail zum Toggle hin (rechts unten am Panel) */
.kz-fab__panel::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: #f5f4d7;
	border-right: 1px solid var(--kh-edge, #ead7b5);
	border-bottom: 1px solid var(--kh-edge, #ead7b5);
	transform: rotate(45deg);
	border-bottom-right-radius: 4px;
}

/* Gruppen-Label zwischen Sektionen ("Camp finden" / "Persönlich nachfragen") */
.kz-fab__group-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 4px 4px;
}
.kz-fab__group-label:not(:first-child) { margin-top: 10px; }
.kz-fab__group-label span {
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kh-ink-soft, #76665a);
	white-space: nowrap;
}
.kz-fab__group-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--kh-edge, #ead7b5);
	opacity: .7;
}

/* ── Optionen ────────────────────────────────────────────────── */
.kz-fab__opt,
.kz-fab__opt-main {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--kh-ink, #3a3530);
	transition: background .15s, transform .1s;
}
a.kz-fab__opt:hover,
.kz-fab__opt-main:hover { background: #ebe9c5; transform: translateX(2px); }
a.kz-fab__opt:active,
.kz-fab__opt-main:active { transform: translateX(2px) scale(.99); }

/* KiKi-Option: Main-Link oben, dezente WA-Hint-Pill darunter */
.kz-fab__opt--kiki {
	flex-direction: column;
	align-items: stretch;
	padding: 6px 8px 8px;
	gap: 2px;
}
.kz-fab__opt-main {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	text-decoration: none;
	color: var(--kh-ink, #3a3530);
	border-radius: 10px;
}
.kz-fab__opt-wa-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 50px;
	padding: 5px 10px;
	background: rgba(37, 211, 102, .14);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
	color: #128c7e;
	text-decoration: none;
	width: max-content;
	transition: background .15s, transform .1s;
}
.kz-fab__opt-wa-hint:hover { background: rgba(37, 211, 102, .26); transform: translateY(-1px); }
.kz-fab__opt-wa-hint svg { width: 13px; height: 13px; fill: #128c7e; flex-shrink: 0; }

/* KiKi-Sphere: animierter Blob (Spiegelung von .kzchat__sparkle auf /ki-suche/) */
.kz-fab__sphere {
	display: inline-block;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background-image:
		radial-gradient(circle at 28% 30%, #ffb347 0%, rgba(255,179,71,0)  55%),
		radial-gradient(circle at 72% 70%, #f73838 0%, rgba(247, 56, 56,0) 55%),
		radial-gradient(circle at 50% 85%, #ff6d1e 0%, rgba(255,109,30,0)  60%),
		radial-gradient(circle at 65% 25%, #ffd166 0%, rgba(255,209,102,0) 50%);
	background-color: #ffd9b3;
	background-size: 200% 200%, 200% 200%, 200% 200%, 180% 180%;
	background-position: 0% 0%, 100% 100%, 50% 100%, 100% 0%;
	filter: blur(.7px) saturate(1.1);
	box-shadow: 0 2px 10px rgba(247, 56, 56, .35), 0 0 18px rgba(255, 140, 60, .45);
	animation:
		kz-fab-blob-morph 11s ease-in-out infinite,
		kz-fab-blob-shift  9s ease-in-out infinite;
	will-change: border-radius, background-position, transform;
}
@keyframes kz-fab-blob-morph {
	0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; transform: rotate( 0deg); }
	20%      { border-radius: 60% 40% 58% 42% / 55% 45% 60% 40%; transform: rotate( 6deg); }
	40%      { border-radius: 45% 55% 40% 60% / 60% 40% 48% 52%; transform: rotate(-5deg); }
	60%      { border-radius: 55% 45% 62% 38% / 42% 58% 50% 50%; transform: rotate( 4deg); }
	80%      { border-radius: 42% 58% 50% 50% / 52% 48% 55% 45%; transform: rotate(-3deg); }
}
@keyframes kz-fab-blob-shift {
	0%, 100% { background-position:   0%   0%, 100% 100%,  50% 100%, 100%   0%; }
	33%      { background-position: 100%  30%,   0%  70%,  70%  30%,  20%  70%; }
	66%      { background-position:  30% 100%,  70%   0%,  30%  70%,  80%  40%; }
}
@media (prefers-reduced-motion: reduce) {
	.kz-fab__sphere { animation: none; }
}

.kz-fab__opt-ic {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.kz-fab__opt-ic svg { width: 20px; height: 20px; fill: #fff; }

.kz-fab__opt-tx {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
	flex: 1;
}
.kz-fab__opt-tx strong {
	font-size: .92rem;
	font-weight: 700;
	color: var(--kh-ink, #3a3530);
}
.kz-fab__opt-tx span {
	font-size: .76rem;
	color: var(--kh-ink-soft, #76665a);
	margin-top: 2px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
}

.kz-fab__opt--kiki .kz-fab__opt-ic { background: var(--kh-coral, #dc4534); }
.kz-fab__opt--wa   .kz-fab__opt-ic { background: #25d366; }
.kz-fab__opt--mail .kz-fab__opt-ic { background: #f7c648; }
.kz-fab__opt--mail .kz-fab__opt-ic svg { fill: #3a3530; }

/* Mobile ────────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.kz-fab { right: 14px; bottom: 14px; }
	.kz-fab__toggle { width: 54px; height: 54px; }
	.kz-fab__panel { width: 290px; bottom: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.kz-fab__toggle, .kz-fab__icon, .kz-fab__panel, .kz-fab__opt { transition: none; animation: none; }
	.kz-fab__toggle::before { animation: none; }
}