/* whoin Übergabe-Kontakt – alle Klassen mit Präfix whoin-uk-
 * Schriftart wird bewusst NICHT gesetzt, sie wird vom aktiven Theme geerbt.
 * Farben ausschließlich über die CSS-Variablen unten – keine festen Farbwerte. */

.whoin-uk,
.whoin-uk-fehler {
	/* --- Vorgegebene Basisfarben (identisch zu den anderen whoin-Plugins) --- */
	--whoin-uk-primary: #33474C;                      /* Primärfarbe */
	--whoin-uk-primary-light: rgba(51, 71, 76, 0.08); /* Primärfarbe mit 8 % Deckkraft */
	--whoin-uk-text: #1A1A1A;                          /* Textfarbe */
	--whoin-uk-bg: #FFFFFF;                             /* Hintergrund */
	--whoin-uk-warn: #A94438;                           /* Warnfarbe */

	/* --- Abgeleitete Töne, ausschließlich aus den Basisfarben berechnet --- */
	--whoin-uk-border: color-mix(in srgb, var(--whoin-uk-primary) 22%, var(--whoin-uk-bg));
	--whoin-uk-muted: color-mix(in srgb, var(--whoin-uk-text) 55%, var(--whoin-uk-bg));
	--whoin-uk-primary-hover: color-mix(in srgb, var(--whoin-uk-primary) 88%, var(--whoin-uk-text));
	--whoin-uk-warn-bg: color-mix(in srgb, var(--whoin-uk-warn) 8%, var(--whoin-uk-bg));
	--whoin-uk-warn-border: color-mix(in srgb, var(--whoin-uk-warn) 40%, var(--whoin-uk-bg));

	/* --- Maße --- */
	--whoin-uk-radius: 6px;
}

.whoin-uk {
	box-sizing: border-box;
	max-width: 640px;
	margin: 0 auto;
	color: var(--whoin-uk-text);
	font-size: 16px;
	line-height: 1.5;
}

.whoin-uk *,
.whoin-uk *::before,
.whoin-uk *::after {
	box-sizing: border-box;
}

.whoin-uk h2 {
	font-size: 1.4em;
	margin: 0 0 0.4em;
}

.whoin-uk h3 {
	font-size: 1.15em;
	margin: 0 0 0.9em;
}

.whoin-uk__intro {
	color: var(--whoin-uk-muted);
	margin: 0 0 1em;
}

/* Fester Hinweis über dem Formular */
.whoin-uk__notice-top {
	background: var(--whoin-uk-primary-light);
	border: 1px solid var(--whoin-uk-border);
	border-radius: var(--whoin-uk-radius);
	padding: 0.9em 1.1em;
	margin: 0 0 1em;
	font-size: 0.95em;
}

.whoin-uk__pflicht-hinweis {
	font-size: 0.86em;
	color: var(--whoin-uk-muted);
	margin: 0 0 1.5em;
}

/* Abschnitt */
.whoin-uk__section {
	background: var(--whoin-uk-bg);
	border: 1px solid var(--whoin-uk-border);
	border-radius: var(--whoin-uk-radius);
	padding: 1.5em;
	margin: 0 0 1.2em;
}

/* Felder */
.whoin-uk__field {
	margin: 0 0 1.1em;
}

.whoin-uk__field:last-child {
	margin-bottom: 0;
}

.whoin-uk__label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.4em;
}

.whoin-uk__req {
	color: var(--whoin-uk-warn);
	margin-left: 0.15em;
}

.whoin-uk__hint {
	display: block;
	font-size: 0.85em;
	color: var(--whoin-uk-muted);
	margin: 0.3em 0 0;
}

.whoin-uk__input,
.whoin-uk__select,
.whoin-uk__textarea {
	width: 100%;
	padding: 0.6em 0.7em;
	font-size: 1em;
	font-family: inherit;
	color: var(--whoin-uk-text);
	background: var(--whoin-uk-bg);
	border: 1px solid var(--whoin-uk-border);
	border-radius: var(--whoin-uk-radius);
}

.whoin-uk__textarea {
	resize: vertical;
}

.whoin-uk__input:focus,
.whoin-uk__select:focus,
.whoin-uk__textarea:focus {
	outline: 2px solid var(--whoin-uk-primary);
	outline-offset: 1px;
}

/* Fehlerzustand eines Felds */
.whoin-uk__field--error .whoin-uk__input,
.whoin-uk__field--error .whoin-uk__select,
.whoin-uk__field--error .whoin-uk__textarea {
	border-color: var(--whoin-uk-warn);
	outline-color: var(--whoin-uk-warn);
}

.whoin-uk__field-error {
	display: none;
	color: var(--whoin-uk-warn);
	font-size: 0.85em;
	margin: 0.35em 0 0;
}

.whoin-uk__field--error .whoin-uk__field-error {
	display: block;
}

/* Honeypot – unsichtbar für Menschen, für Bots aber im DOM */
.whoin-uk__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Einwilligungen */
.whoin-uk__consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0 0 1em;
}

.whoin-uk__consent input {
	margin-top: 0.25em;
	flex: 0 0 auto;
	accent-color: var(--whoin-uk-primary);
}

.whoin-uk__consent a {
	color: var(--whoin-uk-primary);
	text-decoration: underline;
}

/* Absende-Bereich */
.whoin-uk__form-error {
	display: none;
	background: var(--whoin-uk-warn-bg);
	border: 1px solid var(--whoin-uk-warn-border);
	color: var(--whoin-uk-warn);
	border-radius: var(--whoin-uk-radius);
	padding: 0.9em 1.1em;
	margin: 0 0 1.2em;
}

.whoin-uk__form-error--visible {
	display: block;
}

.whoin-uk__btn {
	appearance: none;
	border: 1px solid var(--whoin-uk-primary);
	border-radius: var(--whoin-uk-radius);
	padding: 0.8em 1.5em;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	background: var(--whoin-uk-primary);
	color: var(--whoin-uk-bg);
}

.whoin-uk__btn:hover {
	background: var(--whoin-uk-primary-hover);
	border-color: var(--whoin-uk-primary-hover);
}

.whoin-uk__btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Erfolgsmeldung */
.whoin-uk__success {
	border: 2px solid var(--whoin-uk-primary);
	background: var(--whoin-uk-primary-light);
	border-radius: var(--whoin-uk-radius);
	padding: 1.6em;
}

.whoin-uk__success h3 {
	color: var(--whoin-uk-primary);
	margin-bottom: 0.4em;
}

.whoin-uk__success p {
	margin: 0;
}

.whoin-uk-fehler {
	padding: 1em;
	border: 1px solid var(--whoin-uk-warn-border);
	background: var(--whoin-uk-warn-bg);
	border-radius: var(--whoin-uk-radius);
	color: var(--whoin-uk-warn);
}

/* Responsive */
@media (max-width: 560px) {
	.whoin-uk__section {
		padding: 1.2em;
	}

	.whoin-uk__btn {
		width: 100%;
	}
}