/* Shared styles for Online-Checks (Reputation, Beratungsqualität, …) */

.online-check [hidden] {
	display: none !important;
}

.online-check__question-wrap .card {
	border: 1px solid #dbe4f2;
	margin-bottom: 0.75rem;
	padding: 0.5rem 0.75rem;
}

.online-check__option {
	cursor: pointer;
	display: block;
	padding-top: 0.5rem;
	line-height: 1.25;
}

.online-check__option input[type="radio"] {
	margin-right: 0.5rem;
}

.online-check__option:focus-within {
	outline: 2px solid #0082bb;
	outline-offset: 3px;
}

.online-check__ring-wrap {
	display: flex;
	justify-content: center;
}

.online-check__ring {
	--gauge-progress: 0deg;
	--gauge-color: #0082bb;
	align-items: center;
	border-radius: 50%;
	background: conic-gradient(var(--gauge-color) var(--gauge-progress), #e5e5e5 0deg);
	display: flex;
	font-size: 1.125rem;
	font-weight: 700;
	height: 12rem;
	justify-content: center;
	position: relative;
	width: 12rem;
}

.online-check__ring::before {
	background: #fff;
	border-radius: 50%;
	content: '';
	inset: 1.5rem;
	position: absolute;
}

.online-check__ring span {
	position: relative;
	z-index: 1;
}

.online-check__ring.is-level-1 {
	--gauge-color: #8ec5dd;
}

.online-check__ring.is-level-2 {
	--gauge-color: #3ea5cf;
}

.online-check__ring.is-level-3 {
	--gauge-color: #0082bb;
}

.online-check__ring.is-level-4 {
	--gauge-color: #00638e;
}

@media (max-width: 767px) {
	.online-check__option {
		min-height: 48px;
	}

	.online-check__result {
		padding: 1rem;
	}
}