/*
 * PflichtRadar hero support styles.
 * Layout and content are built with Elementor; this file handles the radar visual.
 */

.pr-hero-section {
	background:
		radial-gradient(circle at 82% 24%, rgba(25, 196, 214, 0.08) 0%, transparent 45%),
		radial-gradient(circle at 10% 15%, rgba(20, 91, 215, 0.05) 0%, transparent 50%),
		#f4f7fb;
}

.pr-hero-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}

.pr-hero-eyebrow .elementor-heading-title::before {
	position: static;
	content: "";
	width: 14px;
	height: 2px;
	background: var(--radar-cyan);
}

.pr-hero-highlight {
	color: #145bd7;
	font-weight: 800;
}

.pr-hero-lead {
	max-width: 44ch;
}

.pr-hero-lead p {
	margin: 0;
	color: #4b6180;
	font-size: clamp(1.02rem, 1.35vw, 1.18rem);
	line-height: 1.62;
}

body .pr-hero-button .elementor-button {
	display: flex;
    align-items: center;
	min-height: 50px;
	padding: 0.95rem 1.9rem;
	border-radius: 8px;
	font-family: "Poppins", sans-serif;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1;
	transition: all 0.2s ease;
}

body .pr-hero-button-primary .elementor-button {
	background: #145bd7 !important;
	box-shadow: 0 4px 14px rgba(20, 91, 215, 0.32) !important;
	color: #ffffff !important;
}

body .pr-hero-button-primary .elementor-button:hover {
	background: #0e48b0 !important;
	box-shadow: 0 6px 20px rgba(20, 91, 215, 0.42) !important;
	transform: translateY(-2px);
}

body .pr-hero-button-ghost .elementor-button {
	border: 1px solid #dce5f0 !important;
	background: #ffffff !important;
	box-shadow: 0 2px 10px rgba(11, 31, 58, 0.04), 0 1px 3px rgba(11, 31, 58, 0.03) !important;
	color: #0b1f3a !important;
}

body .pr-hero-button-ghost .elementor-button:hover {
	border-color: #145bd7 !important;
	color: #145bd7 !important;
	transform: translateY(-2px);
}

.pr-hero-trust-tag {
	width: auto;
	padding: 0.45rem 0.85rem;
	border: 1px solid #dce5f0;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.04);
	color: #0b1f3a;
	font-size: 0.82rem;
	font-weight: 500;
	line-height: 1;
}

.pr-hero-trust-tag p,
.pr-hero-metric p {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.pr-hero-trust-tag p::before,
.pr-hero-metric p::before {
	flex: none;
	width: 0.72rem;
	height: 0.4rem;
	border-bottom: 2px solid #10b981;
	border-left: 2px solid #10b981;
	content: "";
	transform: translateY(-1px) rotate(-45deg);
}

.pr-radar-stamp .elementor-heading-title {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border: 1px solid #dce5f0;
	border-radius: 6px;
	background: #edf3fa;
}

.pr-hero-radar-card {
	position: relative;
	overflow: hidden;
}

.pr-hero-radar-card::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(90deg, #145bd7 0%, #19c4d6 100%);
	content: "";
}

.pr-radar-status-dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #19c4d6;
	box-shadow: 0 0 0 0 rgba(25, 196, 214, 0.7);
	animation: pr-radar-pulse 2.2s infinite;
}

@keyframes pr-radar-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(25, 196, 214, 0.7);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(25, 196, 214, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(25, 196, 214, 0);
	}
}

.pr-radar-viewport {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 420px;
	margin: 0.4rem auto;
	border: 1px solid #c8d6e8;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(25, 196, 214, 0.12) 0%, rgba(20, 91, 215, 0.03) 60%, #f5f9fd 100%);
	overflow: hidden;
}

.pr-hero-metric {
	width: calc(50% - 0.325rem);
	padding: 0.68rem 0.7rem;
	border: 1px solid #dce5f0;
	border-radius: 8px;
	background: #edf3fa;
	color: #0b1f3a;
	font-size: 0.8rem;
	font-weight: 500;
	line-height: 1.25;
}

.pr-hero-metric:nth-child(2) p::before,
.pr-hero-metric:nth-child(4) p::before {
	width: 0.92rem;
	height: 0.92rem;
	border: 0;
	background: #10b981;
	transform: none;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.pr-hero-metric:nth-child(2) p::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' height='14' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4l2.5 2.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg fill='none' height='14' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4l2.5 2.5'/%3E%3C/svg%3E");
}

.pr-hero-metric:nth-child(4) p::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' height='14' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg fill='none' height='14' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' viewBox='0 0 24 24' width='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48 2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48 2.83-2.83'/%3E%3C/svg%3E");
}

.pr-radar-viewport .ring {
	position: absolute;
	inset: 4%;
	border: 1px dashed rgba(200, 214, 232, 0.9);
	border-radius: 50%;
}

.pr-radar-viewport .r2 {
	inset: 26%;
	border-style: solid;
	border-color: rgba(25, 196, 214, 0.35);
}

.pr-radar-viewport .r3 {
	inset: 50%;
}

.pr-radar-viewport .r4 {
	inset: 74%;
	border-style: solid;
	border-color: rgba(20, 91, 215, 0.22);
}

.pr-radar-viewport .cross-h,
.pr-radar-viewport .cross-v {
	position: absolute;
	background: rgba(200, 214, 232, 0.7);
}

.pr-radar-viewport .cross-h {
	top: 50%;
	right: 0;
	left: 0;
	height: 1px;
}

.pr-radar-viewport .cross-v {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
}

.pr-radar-viewport .sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(25, 196, 214, 0.45) 0deg, rgba(25, 196, 214, 0.12) 28deg, rgba(25, 196, 214, 0) 65deg, rgba(25, 196, 214, 0) 360deg);
	animation: pr-radar-sweep 5.5s linear infinite;
}

@keyframes pr-radar-sweep {
	to {
		transform: rotate(360deg);
	}
}

.pr-radar-label {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.pr-radar-label::before {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #145bd7;
	box-shadow: 0 0 0 3px rgba(20, 91, 215, 0.25), 0 0 8px #19c4d6;
	content: "";
}

.pr-radar-label span {
	padding: 0.2rem 0.5rem;
	border: 1px solid #c8d6e8;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 6px rgba(11, 31, 58, 0.08);
	color: #0b1f3a;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.68rem;
	font-weight: 500;
}

.pr-radar-label.b1 {
	top: 32%;
	left: 28%;
}

.pr-radar-label.b2 {
	top: 35%;
	left: 72%;
}

.pr-radar-label.b3 {
	top: 72%;
	left: 34%;
}

.pr-radar-label.b4 {
	top: 68%;
	left: 76%;
}

.pr-radar-degree,
.pr-radar-calib {
	position: absolute;
	color: #8fa6c8;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 0.58rem;
	font-weight: 500;
}

.pr-radar-calib {
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
	color: #8c9bb3;
	font-size: 0.6rem;
}

.pr-radar-degree.d0 {
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
}

.pr-radar-degree.d90 {
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

.pr-radar-degree.d180 {
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
}

.pr-radar-degree.d270 {
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
}

@media (max-width: 900px) {
	.pr-hero-copy {
		text-align: center;
	}

	.pr-hero-copy .elementor-widget-text-editor {
		margin-right: auto;
		margin-left: auto;
	}

	.pr-hero-actions,
	.pr-hero-trust {
		justify-content: center;
	}
}

@media (max-width: 767px) {
	.pr-radar-label span {
		font-size: 0.58rem;
	}
	.pr-radar-widget {
		width: 100%;
	}
}