/* Kidszone Translate – Sprach-Switcher (unten links) */
#kzt-switcher {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#kzt-switcher .kzt-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 14px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	background: #f5f4d7;
	color: #1f2937;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
	transition: transform .12s ease, box-shadow .12s ease;
}
#kzt-switcher .kzt-toggle:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
#kzt-switcher .kzt-globe { font-size: 16px; }

/* Spinner im Button: ersetzt den Globus, solange Übersetzungen laufen */
#kzt-switcher .kzt-spin {
	display: none;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(67, 56, 202, .25);
	border-top-color: #4338ca;
	border-radius: 50%;
	animation: kzt-rotate .7s linear infinite;
}
#kzt-switcher.is-loading .kzt-spin { display: inline-block; }
#kzt-switcher.is-loading .kzt-globe { display: none; }

@keyframes kzt-rotate { to { transform: rotate(360deg); } }

/* Status-Pille „wird übersetzt …", nur während des Ladens sichtbar.
   Standard (Desktop, unten rechts): links neben dem Button. */
#kzt-switcher .kzt-status {
	position: absolute;
	bottom: 5px;
	left: calc(100% + 10px);
	display: flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 999px;
	background: #4338ca;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 6px 18px rgba(67, 56, 202, .3);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	pointer-events: none;
}
#kzt-switcher.is-loading .kzt-status {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
#kzt-switcher .kzt-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: kzt-pulse 1s ease-in-out infinite;
}
@keyframes kzt-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

#kzt-switcher .kzt-list {
	list-style: none;
	margin: 0;
	padding: 6px;
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	min-width: 190px;
	max-height: 60vh;
	overflow-y: auto;
	background: #f5f4d7;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
#kzt-switcher.is-open .kzt-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#kzt-switcher .kzt-list li { margin: 0; }
#kzt-switcher .kzt-opt {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: #1f2937;
	font-size: 14px;
	cursor: pointer;
}
#kzt-switcher .kzt-opt:hover { background: rgba(0, 0, 0, .07); }
#kzt-switcher .kzt-opt.is-active {
	background: rgba(220, 38, 38, .12);
	color: #c0271f;
	font-weight: 700;
}

@media (max-width: 600px) {
	/* Mobil: unten LINKS */
	#kzt-switcher { left: 12px; right: auto; bottom: 12px; }
	#kzt-switcher .kzt-toggle { padding: 11px; font-size: 13px; }

	/* Geschlossen: nur das Icon zeigen (cleaner). Sprache erst beim Öffnen. */
	#kzt-switcher .kzt-current { display: none; }
	#kzt-switcher.is-open .kzt-toggle { padding: 8px 12px; }
	#kzt-switcher.is-open .kzt-current { display: inline; }

	/* Dropdown nach links ausrichten */
	#kzt-switcher .kzt-list { left: 0; right: auto; }

	/* Status-Pille nach rechts neben den Button spiegeln */
	#kzt-switcher .kzt-status {
		right: auto;
		left: calc(100% + 10px);
		transform: translateX(-6px);
	}
	#kzt-switcher.is-loading .kzt-status { transform: translateX(0); }
}