/**
 * Kontaktmanager – Frontend-Formular (Layout: Zeilen + Breiten)
 * Version: 1.1.0
 * Copyright: Swen Braunreuter | www.bluworx.de
 *
 * Anpassung: Alle Abstände, Schriftgrößen und Farben über CSS-Variablen.
 * Einmal hier ändern = einheitliches Erscheinungsbild im gesamten Formular.
 */

/* ——— Design-Variablen (anpassbar für Theme/Corporate Design) ——— */
.km-form {
	/* Abstände */
	--km-space-xs: 0.25em;
	--km-space-sm: 0.5em;
	--km-space-md: 0.75em;
	--km-space-lg: 1em;
	--km-space-xl: 1.5em;
	/* Typografie */
	--km-font-size-base: 1em;
	--km-font-size-sm: 0.9em;
	--km-font-size-lg: 1.05em;
	--km-line-height: 1.4;
	--km-font-weight-label: 500;
	--km-font-weight-strong: 600;
	/* Rahmen & Ecken */
	--km-radius-sm: 3px;
	--km-radius-md: 4px;
	--km-border-width: 1px;
	/* Farben: Eingaben */
	--km-color-border: #ccc;
	--km-color-required: #b00;
	/* Farben: Hinweise */
	--km-color-hint: #646970;
	/* Farben: Button */
	--km-color-btn: #2271b1;
	--km-color-btn-hover: #135e96;
	--km-color-btn-text: #fff;
	/* Fokus (Barrierefreiheit) */
	--km-focus-width: 2px;
	--km-focus-offset: 2px;
	--km-color-focus: currentColor;
	--km-color-focus-btn: #fff;
	/* Meldungen Erfolg/Fehler (WCAG-konformer Kontrast) */
	--km-msg-success-bg: #d4edda;
	--km-msg-success-text: #0d3d0d;
	--km-msg-success-border: #1e5c1e;
	--km-msg-error-bg: #f8d7da;
	--km-msg-error-text: #5a1a1a;
	--km-msg-error-border: #721c24;
	/* Sonstiges */
	--km-textarea-min-height: 120px;
	--km-icon-size: 1.35em;

	max-width: 100%;
	margin: var(--km-space-lg) 0;
	box-sizing: border-box;
}
.km-form *,
.km-form *::before,
.km-form *::after {
	box-sizing: border-box;
}
.km-form .km-fields {
	display: flex;
	flex-direction: column;
	gap: var(--km-space-md);
}
/* Zeile: Felder nebeneinander mit konfigurierter Breite */
.km-form .km-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--km-space-md);
	align-items: flex-start;
}
.km-form .km-field {
	margin: 0;
	min-width: 0; /* damit flex-Items nicht überlaufen */
	flex-grow: 0;
	flex-shrink: 0;
}
/* Einzelnes Feld in einer Zeile: volle Breite */
.km-form .km-row .km-field:only-child {
	flex: 0 0 100% !important;
	max-width: 100% !important;
}
.km-form .km-field label {
	display: block;
	margin-bottom: var(--km-space-xs);
	font-weight: var(--km-font-weight-label);
	font-size: var(--km-font-size-base);
}
.km-form .km-field input[type="text"],
.km-form .km-field input[type="email"],
.km-form .km-field input[type="url"],
.km-form .km-field input[type="number"],
.km-form .km-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: var(--km-space-sm) var(--km-space-md);
	border: var(--km-border-width) solid var(--km-color-border);
	border-radius: var(--km-radius-sm);
	font-size: var(--km-font-size-base);
	line-height: var(--km-line-height);
}
.km-form .km-field textarea {
	min-height: var(--km-textarea-min-height);
	resize: vertical;
}
.km-form .km-field .required {
	color: var(--km-color-required);
}
/* Feldbezogene Fehlermeldung + Zustand bei Fehler */
.km-form .km-field-error {
	display: block;
	margin-top: var(--km-space-xs);
	font-size: var(--km-font-size-sm);
	color: var(--km-msg-error-text);
}
.km-form .km-field input[type="text"]:user-invalid,
.km-form .km-field input[type="email"]:user-invalid,
.km-form .km-field input[type="url"]:user-invalid,
.km-form .km-field input[type="number"]:user-invalid,
.km-form .km-field textarea:user-invalid,
.km-form .km-field [aria-invalid="true"] {
	border-color: var(--km-msg-error-border);
}
.km-form .km-submit {
	margin-top: var(--km-space-lg);
	margin-bottom: 0;
}
.km-form .km-countdown-hint {
	margin-top: var(--km-space-sm);
	margin-bottom: 0;
	font-size: var(--km-font-size-sm);
	color: var(--km-color-hint);
}
.km-form .km-button {
	padding: 0.6em 1.2em;
	background: var(--km-color-btn);
	color: var(--km-color-btn-text);
	border: none;
	border-radius: var(--km-radius-sm);
	cursor: pointer;
	font-size: var(--km-font-size-base);
}
.km-form .km-button:hover {
	background: var(--km-color-btn-hover);
}
.km-form .km-button:focus-visible {
	outline: var(--km-focus-width) solid var(--km-color-focus-btn);
	outline-offset: var(--km-focus-offset);
}
.km-form .km-button:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}
/* Loading-Zustand: Spinner + Text */
.km-form .km-button.km-loading {
	cursor: wait;
}
.km-form .km-spinner {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: var(--km-space-sm);
	vertical-align: -0.15em;
	border: var(--km-focus-width) solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--km-color-btn-text);
	border-radius: 50%;
	animation: km-spin 0.7s linear infinite;
}
@keyframes km-spin {
	to { transform: rotate(360deg); }
}
/* Meldungs-Box: nutzt Variablen aus .km-form */
.km-form .km-message {
	margin-top: var(--km-space-lg);
	padding: var(--km-space-lg) 1.1em;
	border-radius: var(--km-radius-md);
	min-height: 0;
	font-size: var(--km-font-size-lg);
	line-height: var(--km-line-height);
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
}
.km-form .km-message:focus {
	outline: var(--km-focus-width) solid var(--km-color-focus);
	outline-offset: var(--km-focus-offset);
}
.km-form .km-message:not(:empty) {
	padding-left: 3em;
	position: relative;
}
.km-form .km-message.km-success::before,
.km-form .km-message.km-error::before {
	content: "";
	position: absolute;
	left: var(--km-space-lg);
	top: 50%;
	transform: translateY(-50%);
	width: var(--km-icon-size);
	height: var(--km-icon-size);
	line-height: var(--km-icon-size);
	text-align: center;
	font-size: 1.2em;
	font-weight: var(--km-font-weight-strong);
	flex-shrink: 0;
}
.km-form .km-message.km-success {
	background: var(--km-msg-success-bg);
	color: var(--km-msg-success-text);
	border: var(--km-border-width) solid var(--km-msg-success-border);
}
.km-form .km-message.km-success::before {
	content: "\2713";
	background: var(--km-msg-success-text);
	color: var(--km-msg-success-bg);
	border-radius: 50%;
}
.km-form .km-message.km-error {
	background: var(--km-msg-error-bg);
	color: var(--km-msg-error-text);
	border: var(--km-border-width) solid var(--km-msg-error-border);
}
.km-form .km-message.km-error::before {
	content: "\26A0";
	background: var(--km-msg-error-text);
	color: var(--km-msg-error-bg);
	border-radius: 50%;
	font-size: var(--km-font-size-base);
}
/* Rechenaufgabe: Aufgabe und Eingabe in einer Zeile */
.km-form .km-field-rechenaufgabe .km-math-task {
	display: inline-block;
	margin-right: var(--km-space-sm);
	font-weight: var(--km-font-weight-strong);
	min-width: 4em;
}
.km-form .km-field-rechenaufgabe .km-math-input {
	width: 4em;
	display: inline-block;
	vertical-align: middle;
}

/* Honeypot ausblenden */
.km-form .km-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Mobile / kleine Auflösung: ein Feld pro Zeile, alle Felder 100 % Breite */
@media (max-width: 767px) {
	.km-form {
		width: 100%;
	}
	.km-form .km-fields {
		width: 100%;
	}
	.km-form .km-row {
		flex-direction: column;
		width: 100%;
	}
	.km-form .km-row .km-field {
		width: 100% !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	.km-form .km-field input[type="text"],
	.km-form .km-field input[type="email"],
	.km-form .km-field input[type="url"],
	.km-form .km-field input[type="number"],
	.km-form .km-field textarea {
		width: 100% !important;
		max-width: 100% !important;
	}
	.km-form .km-submit,
	.km-form .km-countdown-hint,
	.km-form .km-message {
		width: 100%;
	}
}