/*! VI Guard – Widget */
.vig-widget {
	--vig-accent: #0f766e;
	--vig-bg: #ffffff;
	--vig-fg: #1f2933;
	--vig-muted: #6b7280;
	--vig-border: #d9dee4;
	--vig-box-bg: #ffffff;
	--vig-danger: #dc2626;
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 340px;
	margin: 6px 0;
	padding: 12px 14px 12px;
	border: 1px solid var(--vig-border);
	border-radius: 10px;
	background: var(--vig-bg);
	color: var(--vig-fg);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	font-family: inherit;
	line-height: 1.3;
	text-align: left;
	overflow: hidden;
}
.vig-widget *, .vig-widget *::before, .vig-widget *::after { box-sizing: border-box; }

.vig-widget[data-theme="dark"] {
	--vig-bg: #1c2128;
	--vig-fg: #e6e8eb;
	--vig-muted: #9aa4b2;
	--vig-border: #343b45;
	--vig-box-bg: #22272e;
	--vig-danger: #f87171;
}
@media (prefers-color-scheme: dark) {
	.vig-widget[data-theme="auto"] {
		--vig-bg: #1c2128;
		--vig-fg: #e6e8eb;
		--vig-muted: #9aa4b2;
		--vig-border: #343b45;
		--vig-box-bg: #22272e;
		--vig-danger: #f87171;
	}
}

/* Honeypot – für Menschen unsichtbar */
.vig-widget .vig-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Checkbox-Zeile (gegen Theme-Button-Stile abgesichert) */
.vig-widget .vig-box {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 32px;
	cursor: pointer;
	color: var(--vig-fg);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	-webkit-tap-highlight-color: transparent;
}
.vig-widget .vig-box:focus-visible { outline: 2px solid var(--vig-accent); outline-offset: 4px; border-radius: 6px; }
.vig-widget[data-state="working"] .vig-box,
.vig-widget[data-state="done"] .vig-box { cursor: default; }

.vig-widget .vig-check {
	position: relative;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border: 2px solid var(--vig-muted);
	border-radius: 6px;
	background: var(--vig-box-bg);
	transition: background-color .2s ease, border-color .2s ease, border-radius .2s ease, transform .2s ease;
}
.vig-widget .vig-box:hover .vig-check { border-color: var(--vig-accent); }

/* Prüfung läuft: Spinner */
.vig-widget[data-state="working"] .vig-check {
	border-color: var(--vig-border);
	border-top-color: var(--vig-accent);
	border-radius: 50%;
	background: transparent;
	animation: vig-spin .7s linear infinite;
}

/* Verifiziert: Haken */
.vig-widget[data-state="done"] .vig-check {
	border-color: var(--vig-accent);
	background: var(--vig-accent);
	animation: vig-pop .25s ease;
}
.vig-widget[data-state="done"] .vig-check::after {
	content: "";
	position: absolute;
	left: 7px;
	top: 2px;
	width: 7px;
	height: 13px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}

/* Fehler */
.vig-widget[data-state="error"] .vig-check { border-color: var(--vig-danger); }
.vig-widget[data-state="error"] .vig-check::after {
	content: "!";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vig-danger);
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
}
.vig-widget[data-state="error"] .vig-text { color: var(--vig-danger); }

/* Fortschrittsbalken */
.vig-widget .vig-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: transparent;
}
.vig-widget .vig-bar {
	display: block;
	width: 0;
	height: 100%;
	background: var(--vig-accent);
	transition: width .2s ease, opacity .4s ease;
}
.vig-widget[data-state="done"] .vig-bar { opacity: 0; transition-delay: 0s, .6s; }

/* Fußzeile */
.vig-widget .vig-footer {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-left: 38px;
	color: var(--vig-muted);
	font-size: 11px;
	letter-spacing: .02em;
}
.vig-widget .vig-shield {
	display: inline-block;
	width: 9px;
	height: 11px;
	background: var(--vig-accent);
	border-radius: 2px 2px 50% 50% / 2px 2px 70% 70%;
	opacity: .85;
}
.vig-widget .vig-noscript { display: block; color: var(--vig-danger); font-size: 13px; }

/* Fehlermeldung von Elementor innerhalb des Widgets */
.vig-widget .elementor-message { margin-top: 4px; font-size: 13px; }

@keyframes vig-spin { to { transform: rotate(360deg); } }
@keyframes vig-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.vig-widget[data-state="working"] .vig-check { animation-duration: 2s; }
	.vig-widget[data-state="done"] .vig-check { animation: none; }
}