/* Klenkes – schwebender Button zum Anfrage-Konfigurator */
.klk-float {
	position: fixed;
	right: max(20px, env(safe-area-inset-right));
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	font-family: Ubuntu, system-ui, sans-serif;
	transition: opacity .35s ease, transform .35s ease;
}
.klk-float.is-hidden { opacity: 0; transform: translateY(16px); pointer-events: none; }
.klk-float *, .klk-float *::before, .klk-float *::after { box-sizing: border-box; }

.klk-float .klk-float__btn,
.klk-float .klk-float__btn:hover,
.klk-float .klk-float__btn:focus,
.klk-float .klk-float__btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 8px 8px 22px;
	background: #222224;
	border: 1px solid #2D2D30;
	border-radius: 999px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 0 rgba(222, 209, 95, .0);
}
.klk-float .klk-float__btn:hover { border-color: #5C5C5E; color: #FFFFFF; }
.klk-float__btn:focus-visible { outline: 2px solid #DED15F; outline-offset: 3px; }
.klk-float__circle {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #DED15F;
	color: #171719;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	transition: transform .25s;
}
.klk-float__btn:hover .klk-float__circle { transform: rotate(45deg); }
.klk-float__circle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(222, 209, 95, .55);
	animation: klk-float-pulse 2.8s ease-out infinite;
}
@keyframes klk-float-pulse {
	0% { box-shadow: 0 0 0 0 rgba(222, 209, 95, .5); }
	70%, 100% { box-shadow: 0 0 0 14px rgba(222, 209, 95, 0); }
}

/* Kleines Pop-up über dem Button */
.klk-float__tip {
	position: relative;
	max-width: 260px;
	padding: 16px 40px 16px 18px;
	background: #222224;
	border: 1px solid #2D2D30;
	border-left: 3px solid #DED15F;
	color: #A7A7A7;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
.klk-float__tip.is-open { opacity: 1; transform: none; pointer-events: auto; }
.klk-float__tip strong { display: block; color: #FFFFFF; font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.klk-float__close,
.klk-float__close:hover,
.klk-float__close:focus {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #A7A7A7;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	white-space: normal;
}
.klk-float__close:hover { color: #FFFFFF; }

@media (max-width: 767px) {
	.klk-float { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
	.klk-float .klk-float__btn, .klk-float .klk-float__btn:hover, .klk-float .klk-float__btn:focus, .klk-float .klk-float__btn:visited { font-size: 15px; padding: 6px 6px 6px 18px; gap: 10px; }
	.klk-float__circle { width: 44px; height: 44px; }
	.klk-float__tip { max-width: 230px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.klk-float, .klk-float__tip, .klk-float__circle { transition: none; }
	.klk-float__circle::after { animation: none; }
}
@media print { .klk-float { display: none; } }