/* ============================================================
   Team Manga Toggle
   Reference theme-checkbox mechanic, wrapped in the project's
   .glass utility so the toggle reads as a glass pill.
   ============================================================ */

.kb-team-toggle-wrap {
	display: flex;
	justify-content: flex-end;
	margin: 0 0 clamp(20px, 3vw, 36px);
}

/* The label is the visible glass pill. Uses the global .glass utility
   classes for the surface treatment - we only handle sizing here. */
.kb-team-toggle-frame {
	display: inline-block;
	line-height: 0;
	cursor: pointer;
	font-size: 16px; /* lock --toggle-size base */
}

/* The checkbox track sits inside the glass frame. Background is made
   subtle so the glass surface shows through. */
.kb-team-toggle-wrap .theme-checkbox {
	--toggle-size: 16px;
	--toggle-light: hsla(0, 0%, 100%, 0.18);
	--toggle-dark:  hsla(0, 0%, 0%, 0.45);

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 6.25em;
	height: 3.125em;
	background:
		linear-gradient(to right, var(--toggle-light) 50%, var(--toggle-dark) 50%) no-repeat;
	background-size: 205%;
	background-position: 0;
	transition: 0.4s;
	border-radius: 99em;
	position: relative;
	cursor: pointer;
	font-size: var(--toggle-size);
	border: 0;
	margin: 0;
	padding: 0;
}

.kb-team-toggle-wrap .theme-checkbox::before {
	content: "";
	width: 2.25em;
	height: 2.25em;
	position: absolute;
	top: 0.438em;
	left: 0.438em;
	background:
		linear-gradient(to right, var(--kb-gray-100, #fdf9f6) 50%, var(--kb-gray-800, #343838) 50%) no-repeat;
	background-size: 205%;
	background-position: 100%;
	border-radius: 50%;
	transition: 0.4s;
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.35),
		inset 0 1px 0 hsla(0, 0%, 100%, 0.25);
}

.kb-team-toggle-wrap .theme-checkbox:checked::before {
	left: calc(100% - 2.25em - 0.438em);
	background-position: 0;
}

.kb-team-toggle-wrap .theme-checkbox:checked {
	background-position: 100%;
}

.kb-team-toggle-wrap .theme-checkbox:focus { outline: none; }
.kb-team-toggle-wrap .theme-checkbox:focus-visible {
	outline: none !important;
	box-shadow: 0 0 0 3px hsla(0, 0%, 100%, 0.35) !important;
}

/* ============================================================
   Image transitions
   ============================================================ */

.kb-team-img img {
	transition: opacity 0.35s ease, filter 0.5s ease;
}

body[data-kb-manga="true"] .kb-team-img img[data-kb-manga-missing="true"] {
	filter: grayscale(1) contrast(1.4) brightness(1.05);
}

/* Inner-Glow Overlay im Manga-Modus ausblenden, damit die Illustration pur wirkt. */
body[data-kb-manga="true"] .kb-team-card .kb-team-img-wrap::after {
	opacity: 0;
}

/* Grayscale-Filter im Manga-Modus entfernen, damit die Illustrationen farbig bleiben. */
body[data-kb-manga="true"] .kb-team-card .kb-team-img-wrap img {
	filter: none;
}

::view-transition-old(kb-team-img),
::view-transition-new(kb-team-img) {
	animation-duration: 0.55s;
	animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.kb-team-toggle-wrap .theme-checkbox,
	.kb-team-toggle-wrap .theme-checkbox::before,
	.kb-team-img img { transition: none; }
	::view-transition-old(kb-team-img),
	::view-transition-new(kb-team-img) { animation-duration: 0.01ms; }
}