/* KATAI Forms — schlankes Basis-Styling (scoped auf .kf-form), per CSS-Variablen
   pro Formular überschreibbar (Design-Panel / Custom-CSS). */
.kf-form-wrap {
	--kf-accent: #2f3a8f;
	--kf-accent-text: #ffffff;
	--kf-border: #c9ccd1;
	--kf-radius: 6px;
	--kf-max-width: 640px;
	--kf-error: #c0392b;
	--kf-field-gap: 1.1rem;
	max-width: var(--kf-max-width);
}
.kf-form .kf-fields, .kf-form .kf-step { display: flex; flex-wrap: wrap; column-gap: 1rem; align-content: flex-start; }
.kf-form .kf-field { margin: 0 0 var(--kf-field-gap); flex: 1 1 100%; }
.kf-form .kf-field.kf-w-50 { flex: 1 1 calc(50% - .5rem); }
.kf-form .kf-field.kf-w-33 { flex: 1 1 calc(33.333% - .67rem); }
.kf-form .kf-field.kf-w-25 { flex: 1 1 calc(25% - .75rem); }
@media (max-width: 600px) { .kf-form .kf-field.kf-w-25, .kf-form .kf-field.kf-w-33 { flex-basis: 100%; } }
.kf-form .kf-step, .kf-form .kf-progress, .kf-form .kf-steps-nav, .kf-form .kf-step-title, .kf-form .kf-step-nav, .kf-form .kf-section, .kf-form .kf-html { flex-basis: 100%; width: 100%; }
.kf-form label { display: block; font-weight: 600; margin: 0 0 .35rem; }
.kf-form .kf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kf-form .kf-req { color: var(--kf-error); }
.kf-form input[type=text],
.kf-form input[type=email],
.kf-form input[type=tel],
.kf-form input[type=url],
.kf-form input[type=number],
.kf-form input[type=date],
.kf-form select,
.kf-form textarea {
	width: 100%;
	padding: .6rem .7rem;
	border: 1px solid var(--kf-border);
	border-radius: var(--kf-radius);
	font: inherit;
	box-sizing: border-box;
	background: var(--kf-field-bg, #fff);
}
.kf-form input:focus,
.kf-form select:focus,
.kf-form textarea:focus { outline: 2px solid var(--kf-accent); outline-offset: 1px; border-color: var(--kf-accent); }
.kf-form .kf-compound { display: flex; gap: .5rem; flex-wrap: wrap; }
.kf-form .kf-compound .kf-sub { flex: 1 1 45%; }
.kf-form .kf-choices { display: flex; flex-direction: column; gap: .35rem; }
.kf-form .kf-choice { font-weight: 400; }

/* Auswahl als große Buttons/Karten statt klassischem Radio-Look */
.kf-form .kf-choices-cards { gap: .6rem; }
.kf-form .kf-choices-cards .kf-choice {
	display: flex; align-items: center; margin: 0;
	padding: .9rem 1.1rem; font-weight: 500;
	border: 2px solid var(--kf-border); border-radius: var(--kf-radius);
	background: var(--kf-field-bg, #fff); cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.kf-form .kf-choices-cards .kf-choice:hover { border-color: var(--kf-accent); }
.kf-form .kf-choices-cards .kf-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kf-form .kf-choices-cards .kf-choice:has(input:checked) { border-color: var(--kf-accent); box-shadow: 0 0 0 1px var(--kf-accent); }
.kf-form .kf-choices-cards .kf-choice:has(input:focus-visible) { outline: 2px solid var(--kf-accent); outline-offset: 2px; }
.kf-form .kf-desc { display: block; font-size: .85em; color: #666; margin-top: .25rem; }
.kf-form .kf-error { display: block; color: var(--kf-error); font-size: .85em; margin-top: .3rem; min-height: 1px; }
.kf-form .kf-field.has-error input,
.kf-form .kf-field.has-error select,
.kf-form .kf-field.has-error textarea { border-color: var(--kf-error); }
.kf-form .kf-submit {
	padding: .7rem 1.4rem;
	border: var(--kf-btn-border-width, 0px) solid var(--kf-btn-border-color, transparent);
	border-radius: var(--kf-radius);
	background: var(--kf-btn-bg, var(--kf-accent));
	color: var(--kf-accent-text);
	box-shadow: var(--kf-btn-shadow, none);
	font: inherit;
	font-weight: 600;
	text-transform: var(--kf-btn-transform, none);
	letter-spacing: var(--kf-btn-spacing, normal);
	width: var(--kf-btn-width, auto);
	box-sizing: border-box;
	cursor: pointer;
	transition: background .15s, box-shadow .2s, filter .15s, transform .08s, border-color .15s;
}
.kf-form .kf-submit:hover {
	background: var(--kf-btn-hover-bg, var(--kf-btn-bg, var(--kf-accent)));
	color: var(--kf-btn-hover-text, var(--kf-accent-text));
	filter: var(--kf-btn-hover-filter, brightness(0.93));
}
.kf-form .kf-submit:active { transform: translateY(1px); }
.kf-form .kf-submit.kf-loading { opacity: .6; cursor: wait; }
.kf-form .kf-turnstile { margin: 0 0 1rem; }
.kf-form .kf-message { margin-top: .8rem; }
.kf-form .kf-message-error { color: var(--kf-error); }
.kf-confirmation { padding: 1rem 1.2rem; background: #eef7ee; border: 1px solid #bcdcbc; border-radius: var(--kf-radius); }