/**
 * Kontakt Multi-Step Popup – Minimal CSS
 *
 * Nur Dinge, die Tailwind nicht kann:
 * ::after-Pseudoelement, :has()-Selektor, scrollbar-Styling.
 */

/* ---------- Scrollbar ---------- */
.kp-inner {
	scrollbar-width: thin;
	scrollbar-color: #e5e7eb transparent;
}

/* ---------- Bereich-Tile: Auswahl-Rahmen ---------- */
.kp-bereich-tile input:checked ~ .kp-bereich-tile__inner {
	border-color: #CE386B;
	box-shadow: 0 0 0 2px #CE386B;
}

/* ---------- Bereich-Tile: Häkchen-Badge ---------- */
.kp-bereich-tile__inner::after {
	content: '';
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background-color: #CE386B;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath fill-rule='evenodd' d='M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 3;
}

.kp-bereich-tile input:checked ~ .kp-bereich-tile__inner::after {
	opacity: 1;
}

/* ---------- Bereich-Tile: Kein Bild – Label zentriert ---------- */
.kp-bereich-tile--no-img .kp-bereich-tile__label {
	inset: 0;
	background: none;
	color: #374151;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	font-size: 0.8125rem;
}

.kp-bereich-tile--no-img input:checked ~ .kp-bereich-tile__inner .kp-bereich-tile__label {
	color: #CE386B;
}

/* ---------- Option-Chip: ausgewählt ---------- */
.kp-option-chip:has(input:checked) {
	border-color: #CE386B;
	background: #CE386B;
	color: #ffffff;
}

.kp-option-chip:has(input:checked) .kp-option-chip__sub {
	color: rgba(255, 255, 255, 0.85);
}