/**
 * On-Lion Captcha – Darstellung des Prüffeldes.
 *
 * Alle Maße folgen dem 4er-Raster. Bedienelemente sind 44 px hoch, damit sie
 * zu den übrigen Formularfeldern passen und auf dem Handy gut treffbar sind.
 */

.olmc {
	--olmc-accent: #eda600;
	--olmc-radius: 8px;

	/* Maße, die sich im Backend einstellen lassen. */
	--olmc-rand: 1px;
	--olmc-luft-x: 16px;
	--olmc-hoehe: 44px;
	--olmc-schrift: 15px;
	--olmc-schatten: none;

	--olmc-bg: #ffffff;
	--olmc-bg-soft: #f6f7f8;
	--olmc-border: #c4c8cc;
	--olmc-text: #16191c;
	--olmc-muted: #5a6067;
	--olmc-ok: #1a7f46;
	--olmc-error: #b3261e;

	display: block;
	margin: 16px 0;
	font-size: var( --olmc-schrift );
	line-height: 1.4;
	color: var(--olmc-text);
	max-width: 100%;
}

/*
 * Dunkle Darstellung. Bei „automatisch“ entscheidet nicht die Einstellung des
 * Betriebssystems, sondern die Helligkeit der Seite, in der das Feld steht –
 * sonst stünde ein dunkles Kästchen auf einer hellen Seite. Das Skript setzt
 * dafür data-olmc-hell; solange es nicht gelaufen ist, bleibt es hell.
 */
.olmc--theme-dunkel,
.olmc--theme-auto[data-olmc-hell="dunkel"] {
	--olmc-bg: #1c1f23;
	--olmc-bg-soft: #24282d;
	--olmc-border: #454b52;
	--olmc-text: #f2f4f6;
	--olmc-muted: #a8b0b8;
	--olmc-ok: #4ade80;
	--olmc-error: #ff8a80;
}

/* --------------------------------------------------------------------- */
/* Der Kasten                                                            */
/* --------------------------------------------------------------------- */

.olmc-box {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: var( --olmc-hoehe );
	padding: 8px var( --olmc-luft-x );
	background: var(--olmc-bg);
	border: var( --olmc-rand ) solid var(--olmc-border);
	border-radius: var(--olmc-radius);
	box-shadow: var( --olmc-schatten );
	box-sizing: border-box;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.olmc[data-olmc-zustand="fertig"] .olmc-box {
	border-color: var(--olmc-ok);
	background: var(--olmc-bg-soft);
}

.olmc[data-olmc-zustand="fehler"] .olmc-box {
	border-color: var(--olmc-error);
}

/* Häkchen fehlt noch: auffällig, aber nicht als Fehler. */
.olmc[data-olmc-zustand="hinweis"] .olmc-box {
	border-color: var(--olmc-accent);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--olmc-accent) 25%, transparent );
}

.olmc[data-olmc-zustand="hinweis"] .olmc-checkbox {
	border-color: var(--olmc-accent);
}

.olmc[data-olmc-zustand="hinweis"] .olmc-status {
	color: var(--olmc-text);
	font-weight: 500;
}

/* --------------------------------------------------------------------- */
/* Kästchen, Wartezeiger und Haken                                       */
/* --------------------------------------------------------------------- */

.olmc-control {
	position: relative;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.olmc-checkbox {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	width: 24px;
	height: 24px;
	border: 2px solid var(--olmc-border);
	border-radius: 4px;
	background: var(--olmc-bg);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.olmc-checkbox:hover:not( :disabled ) {
	border-color: var(--olmc-accent);
}

.olmc-checkbox:focus-visible {
	outline: 2px solid var(--olmc-accent);
	outline-offset: 2px;
}

.olmc-checkbox:disabled {
	cursor: default;
}

.olmc[data-olmc-zustand="fertig"] .olmc-checkbox {
	border-color: var(--olmc-ok);
	background: var(--olmc-ok);
}

/* Der Haken erscheint nur im fertigen Zustand. */
.olmc-tick {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: #ffffff;
}

.olmc-tick svg {
	width: 16px;
	height: 16px;
}

.olmc[data-olmc-zustand="fertig"] .olmc-tick {
	display: flex;
}

/* Der Wartezeiger läuft nur während der Prüfung. */
.olmc-spinner {
	position: absolute;
	inset: 0;
	display: none;
	border: 2px solid var(--olmc-border);
	border-top-color: var(--olmc-accent);
	border-radius: 50%;
	pointer-events: none;
}

.olmc[data-olmc-zustand="laeuft"] .olmc-spinner {
	display: block;
	animation: olmc-dreh 700ms linear infinite;
}

.olmc[data-olmc-zustand="laeuft"] .olmc-checkbox {
	opacity: 0;
}

@keyframes olmc-dreh {
	to {
		transform: rotate( 360deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.olmc[data-olmc-zustand="laeuft"] .olmc-spinner {
		animation-duration: 2s;
	}

	.olmc-box,
	.olmc-checkbox {
		transition: none;
	}
}

/* --------------------------------------------------------------------- */
/* Beschriftung und Hinweis                                              */
/* --------------------------------------------------------------------- */

.olmc-label {
	flex: 1 1 auto;
	cursor: pointer;
	user-select: none;
	color: var(--olmc-text);
	font-weight: 500;
	margin: 0;
}

.olmc[data-olmc-zustand="fertig"] .olmc-label {
	cursor: default;
}

.olmc-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--olmc-muted);
	font-size: 12px;
	white-space: nowrap;
}

.olmc-brand svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

/* Als Verweis bleibt der Hinweis zurückhaltend und wird erst beim
   Überfahren deutlicher. */
a.olmc-brand--link {
	text-decoration: none;
	color: var(--olmc-muted);
	border-bottom: 1px solid transparent;
	transition: color 160ms ease, border-color 160ms ease;
}

a.olmc-brand--link:hover,
a.olmc-brand--link:focus-visible {
	color: var(--olmc-text);
	border-bottom-color: var(--olmc-accent);
}

a.olmc-brand--link:focus-visible {
	outline: 2px solid var(--olmc-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.olmc-status {
	margin: 8px 0 0;
	min-height: 0;
	font-size: calc( var( --olmc-schrift ) - 1px );
	color: var(--olmc-error);
}

.olmc-status:empty {
	display: none;
}

/* --------------------------------------------------------------------- */
/* Schmale Fassung, etwa im Anmeldeformular                              */
/* --------------------------------------------------------------------- */

.olmc--kompakt .olmc-box {
	padding: 8px calc( var( --olmc-luft-x ) * 0.75 );
	gap: 8px;
}

.olmc--kompakt .olmc-brand-text {
	display: none;
}

@media ( max-width: 480px ) {
	.olmc-brand-text {
		display: none;
	}
}

/* --------------------------------------------------------------------- */
/* Lockfeld – für Menschen unsichtbar, für Maschinen sichtbar            */
/* --------------------------------------------------------------------- */

.olmc-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --------------------------------------------------------------------- */
/* Hinweis, wenn JavaScript aus ist                                       */
/* --------------------------------------------------------------------- */

.olmc-nojs {
	margin: 0;
	padding: 12px 16px;
	background: var(--olmc-bg-soft);
	border: 1px solid var(--olmc-border);
	border-left: 3px solid var(--olmc-accent);
	border-radius: var(--olmc-radius);
	color: var(--olmc-text);
	font-size: 14px;
}