/*
 * Anfrageformular – Kieler Webschmiede
 *
 * Die Farben werden aus den Variablen der Website übernommen, wenn es sie gibt
 * (--brand, --ink, --muted, --wash, --line). Sonst greifen die Standardwerte.
 */

.kws-af {
	--kws-brand: var(--brand, #48AB77);
	--kws-brand-dark: #2f7d57;
	--kws-brand-soft: #eaf7f0;
	--kws-brand-ring: rgba(72, 171, 119, .18);
	/*
	 * Schriftfarben liegen fest, nur die Markenfarbe kommt von der Website.
	 * So kann ein Theme mit hellem --ink (dunkler Kopfbereich) das Formular
	 * nicht unlesbar machen.
	 */
	--kws-ink: #0e0e13;
	--kws-muted: #5f6b7a;
	--kws-wash: #f6faf8;
	--kws-line: rgba(0, 0, 0, .12);
	--kws-radius: 14px;
	--kws-radius-lg: 18px;
	--kws-shadow: var(--shadow, 0 10px 26px rgba(0, 0, 0, .10));
	--kws-error: #c2410c;

	/*
	 * Feste Farben für alles, was der Browser selbst zeichnet.
	 * Bewusst NICHT aus den Variablen der Website abgeleitet: Definiert ein
	 * Theme --ink hell (dunkler Kopf- oder Fußbereich), stünde sonst weiße
	 * Schrift auf weißem Feld.
	 */
	--kws-field-ink: #0e0e13;
	--kws-field-bg: #ffffff;

	/*
	 * Zwingt Eingabefelder, Aufklappmenüs und Schreibmarke ins helle Schema.
	 * Ohne diese Zeile zeichnet ein Rechner im Dunkelmodus das Auswahlmenü
	 * dunkel – mit unserer dunklen Schrift darin also unlesbar.
	 */
	color-scheme: light;

	font-family: inherit;
	color: var(--kws-ink);
	max-width: 720px;
	margin-inline: auto;
	container-type: inline-size;
}

.kws-af *,
.kws-af *::before,
.kws-af *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- Rahmen */

.kws-af__form {
	background: #fff;
	border: 1px solid var(--kws-line);
	border-radius: var(--kws-radius-lg);
	box-shadow: var(--kws-shadow);
	padding: clamp(1.15rem, 3.5vw, 2rem);
	position: relative;
}

/* --------------------------------------------------------- Fortschritt */

.kws-af__count {
	margin: 0 0 .55rem;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--kws-brand-dark);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

/* Auf sehr schmalen Karten den Zusatz weglassen, statt ihn umbrechen zu lassen. */
@container (max-width: 390px) {
	.kws-af__count em {
		display: none;
	}
}

.kws-af__count em {
	font-style: normal;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--kws-muted);
	font-size: .85rem;
}

.kws-af__bar {
	height: 6px;
	border-radius: 99px;
	background: var(--kws-line);
	overflow: hidden;
	margin: 0 0 1.5rem;
}

.kws-af__bar span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, #54b884, #3c9265);
	transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------- Schritt */

.kws-af__step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.kws-af--js .kws-af__step {
	display: none;
}

.kws-af--js .kws-af__step.is-active {
	display: block;
	animation: kws-af-in .38s cubic-bezier(.22, .61, .36, 1) both;
}

.kws-af--js .kws-af__step.is-active.is-back {
	animation-name: kws-af-in-back;
}

@keyframes kws-af-in {
	from { opacity: 0; transform: translateX(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes kws-af-in-back {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: none; }
}

.kws-af__legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 1.35rem;
}

.kws-af__legend-title {
	display: block;
	font-size: clamp(1.28rem, 2.6vw, 1.6rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.01em;
}

.kws-af__legend-lead {
	display: block;
	margin-top: .35rem;
	color: var(--kws-muted);
	font-size: .96rem;
	line-height: 1.5;
	font-weight: 400;
}

.kws-af__fields {
	display: grid;
	gap: 1.4rem;
}

/* ---------------------------------------------------------------- Feld */

.kws-af__field {
	min-width: 0;
}

.kws-af__field[hidden] {
	display: none;
}

.kws-af__field.is-revealed {
	animation: kws-af-reveal .3s ease both;
}

@keyframes kws-af-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

.kws-af__group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.kws-af__label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 .5rem;
	padding: 0;
	line-height: 1.35;
}

.kws-af__req {
	color: var(--kws-brand-dark);
	font-weight: 800;
}

.kws-af__hint {
	margin: -.25rem 0 .6rem;
	font-size: .87rem;
	color: var(--kws-muted);
	line-height: 1.45;
}

.kws-af__tip {
	display: none;
	margin-top: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--kws-error);
}

.kws-af__field.has-error .kws-af__tip {
	display: block;
}

/* -------------------------------------------------------------- Eingaben */

.kws-af .kws-af__input {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--kws-field-ink);
	/* Manche Themes setzen text-fill-color – das schlägt color sonst aus dem Feld. */
	-webkit-text-fill-color: var(--kws-field-ink);
	background-color: var(--kws-field-bg);
	background-image: none;
	opacity: 1;
	border: 2px solid var(--kws-line);
	border-radius: var(--kws-radius);
	padding: .85rem 1rem;
	min-height: 52px;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

textarea.kws-af__input {
	min-height: 0;
	line-height: 1.55;
	resize: vertical;
}

.kws-af select.kws-af__input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235f6b7a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
	cursor: pointer;
}

/* Die Einträge im aufgeklappten Menü zeichnet der Browser selbst. */
.kws-af select.kws-af__input option,
.kws-af select.kws-af__input optgroup {
	color: var(--kws-field-ink);
	background-color: var(--kws-field-bg);
	-webkit-text-fill-color: var(--kws-field-ink);
}

.kws-af .kws-af__input:hover {
	border-color: #cfd9e0;
}

.kws-af .kws-af__input:focus {
	outline: 0;
	border-color: var(--kws-brand);
	box-shadow: 0 0 0 4px var(--kws-brand-ring);
	color: var(--kws-field-ink);
	-webkit-text-fill-color: var(--kws-field-ink);
	background-color: var(--kws-field-bg);
}

.kws-af .kws-af__input::placeholder {
	color: #7b8794;
	-webkit-text-fill-color: #7b8794;
	opacity: 1;
}

/* Von Chrome ausgefüllte Felder nicht blau einfärben lassen. */
.kws-af .kws-af__input:-webkit-autofill,
.kws-af .kws-af__input:-webkit-autofill:hover,
.kws-af .kws-af__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--kws-field-ink);
	box-shadow: 0 0 0 40px var(--kws-field-bg) inset;
	caret-color: var(--kws-field-ink);
}

/* background-color, nicht background: sonst verschwindet der Pfeil im Auswahlfeld. */
.kws-af__field.has-error .kws-af__input {
	border-color: #e57373;
	background-color: #fff8f6;
}

.kws-af__field.is-filled .kws-af__input:not(:focus) {
	border-color: #bdf0d4;
	background-color: #fbfdfc;
}

/* Halbe Breiten */
@container (min-width: 460px) {
	.kws-af__fields {
		grid-template-columns: repeat(6, 1fr);
	}
	.kws-af__field {
		grid-column: span 6;
	}
	.kws-af__field--third { grid-column: span 2; }
	.kws-af__field--two-thirds { grid-column: span 4; }
}

/* ------------------------------------------------------------ Karten */

.kws-af__cards {
	display: grid;
	gap: .7rem;
}

@container (min-width: 520px) {
	.kws-af__cards {
		grid-template-columns: 1fr 1fr;
	}
}

.kws-af__card {
	position: relative;
	display: block;
	cursor: pointer;
	border: 2px solid var(--kws-line);
	border-radius: var(--kws-radius);
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.kws-af__card:hover {
	border-color: #9be7bf;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(72, 171, 119, .14);
}

.kws-af__card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.kws-af__card-body {
	display: block;
	padding: .95rem 3.1rem .95rem 1.05rem;
}

.kws-af__card-title {
	display: block;
	font-weight: 750;
	font-size: 1.02rem;
	line-height: 1.25;
}

.kws-af__card-hint {
	display: block;
	margin-top: .22rem;
	font-size: .86rem;
	color: var(--kws-muted);
	line-height: 1.4;
}

.kws-af__card::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 24px;
	height: 24px;
	margin-top: -12px;
	border-radius: 50%;
	border: 2px solid var(--kws-line);
	background: #fff no-repeat center;
	transition: border-color .18s ease, background-color .18s ease;
}

.kws-af__card:has(input:checked) {
	border-color: var(--kws-brand);
	background: var(--kws-brand-soft);
	box-shadow: 0 0 0 4px var(--kws-brand-ring);
}

.kws-af__card:has(input:checked)::after {
	border-color: var(--kws-brand);
	background-color: var(--kws-brand);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10'%3E%3Cpath d='M1 5l3.6 3.6L12 1.2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 13px 10px;
}

.kws-af__card:has(input:focus-visible) {
	border-color: var(--kws-brand);
	box-shadow: 0 0 0 4px var(--kws-brand-ring);
}

/* ------------------------------------------------- Auswahl als Kacheln */

.kws-af__choices {
	display: grid;
	gap: .5rem;
}

@container (min-width: 520px) {
	.kws-af__choices {
		grid-template-columns: 1fr 1fr;
	}
}

.kws-af__choice {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	cursor: pointer;
	padding: .72rem .95rem;
	border: 2px solid var(--kws-line);
	border-radius: var(--kws-radius);
	background: #fff;
	font-size: .97rem;
	line-height: 1.4;
	transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.kws-af__choice:hover {
	border-color: #9be7bf;
	background: #fbfdfc;
}

.kws-af__choice input {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin: 0;
	accent-color: var(--kws-brand);
	cursor: pointer;
}

.kws-af__choice:has(input:checked) {
	border-color: var(--kws-brand);
	background: var(--kws-brand-soft);
	font-weight: 600;
}

.kws-af__choice:has(input:focus-visible) {
	box-shadow: 0 0 0 4px var(--kws-brand-ring);
	border-color: var(--kws-brand);
}

/* ------------------------------------------------------ Zusammenfassung */

.kws-af__recap {
	margin: 0 0 1.35rem;
	padding: .9rem 1.05rem;
	background: var(--kws-wash);
	border: 1px solid #dfe5ea;
	border-radius: var(--kws-radius);
	font-size: .9rem;
	line-height: 1.5;
}

.kws-af__recap-title {
	display: block;
	font-weight: 700;
	margin-bottom: .35rem;
	font-size: .82rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--kws-muted);
}

.kws-af__recap ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.kws-af__recap li {
	background: #fff;
	border: 1px solid #dfe5ea;
	border-radius: 99px;
	padding: .2rem .7rem;
	font-weight: 600;
	color: var(--kws-ink);
}

/* ------------------------------------------------------------ Bedienung */

.kws-af__nav {
	display: flex;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.6rem;
	align-items: center;
}

.kws-af__btn {
	appearance: none;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
	border: 0;
	border-radius: var(--kws-radius);
	min-height: 54px;
	padding: .95rem 1.7rem;
	transition: transform .15s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.kws-af__btn--next,
.kws-af__btn--send {
	flex: 1 1 220px;
	color: #fff;
	font-size: 1.03rem;
	background: linear-gradient(180deg, #54b884, #3c9265);
	box-shadow: 0 8px 20px rgba(72, 171, 119, .34);
}

.kws-af__btn--next:hover,
.kws-af__btn--send:hover {
	background: linear-gradient(180deg, #4cae79, #347d57);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(72, 171, 119, .42);
}

.kws-af__btn--back {
	background: transparent;
	color: var(--kws-muted);
	border: 2px solid var(--kws-line);
	padding: .95rem 1.2rem;
	flex: 0 0 auto;
}

.kws-af__btn--back:hover {
	border-color: #cfd9e0;
	color: var(--kws-ink);
}

.kws-af__btn:focus-visible {
	outline: 3px solid var(--kws-brand-dark);
	outline-offset: 2px;
}

.kws-af__btn.is-busy {
	opacity: .7;
	pointer-events: none;
}

.kws-af__btn.is-busy::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: .6rem;
	vertical-align: -2px;
	border: 2px solid rgba(255, 255, 255, .55);
	border-top-color: #fff;
	border-radius: 50%;
	animation: kws-af-spin .7s linear infinite;
}

@keyframes kws-af-spin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------- Rest */

.kws-af__error {
	margin: 1.1rem 0 0;
	padding: .8rem 1rem;
	border-radius: 12px;
	background: #fff4ef;
	border: 2px solid #f3c4ae;
	color: #9a3412;
	font-weight: 600;
	font-size: .93rem;
}

.kws-af__legal {
	margin: 1.1rem 0 0;
	font-size: .82rem;
	line-height: 1.55;
	color: var(--kws-muted);
}

.kws-af__legal a {
	color: var(--kws-brand-dark);
	text-decoration: underline;
}

.kws-af__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------- Danke */

.kws-af__done {
	background: #fff;
	border: 1px solid #bdf0d4;
	border-radius: var(--kws-radius-lg);
	box-shadow: var(--kws-shadow);
	padding: clamp(1.6rem, 4vw, 2.6rem);
	text-align: center;
	animation: kws-af-pop .45s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes kws-af-pop {
	from { opacity: 0; transform: scale(.97); }
	to   { opacity: 1; transform: none; }
}

.kws-af__done-icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: linear-gradient(180deg, #54b884, #3c9265);
	color: #fff;
	font-size: 1.9rem;
	line-height: 62px;
	box-shadow: 0 10px 24px rgba(72, 171, 119, .4);
}

.kws-af__done h3 {
	margin: 0 0 .5rem;
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	line-height: 1.25;
}

.kws-af__done p {
	margin: 0;
	color: var(--kws-muted);
	line-height: 1.6;
}

/* ------------------------------------------------------- Rücksichten */

@media (prefers-reduced-motion: reduce) {
	.kws-af *,
	.kws-af *::before,
	.kws-af *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	.kws-af__btn:hover,
	.kws-af__card:hover {
		transform: none;
	}
}

/* ------------------------------------------------- Schutz gegen Seitenstile
 *
 * Das Formular steht oft in einem farbigen Abschnitt, dessen Stile per
 * ID gesetzt sind (z.B. #cta-bereich p{color:#fff}). Eine ID schlägt jede
 * Klassenregel – die Schrift im weißen Formular würde hell und unlesbar.
 * Deshalb sichern wir hier ausschließlich die Schriftfarben ab. Layout,
 * Abstände und Hintergründe bleiben frei überschreibbar.
 */
.kws-af .kws-af__legend-title,
.kws-af .kws-af__label,
.kws-af .kws-af__card-title,
.kws-af .kws-af__choice,
.kws-af .kws-af__recap li,
.kws-af .kws-af__done h3 {
	color: var(--kws-ink) !important;
}

.kws-af .kws-af__legend-lead,
.kws-af .kws-af__hint,
.kws-af .kws-af__card-hint,
.kws-af .kws-af__legal,
.kws-af .kws-af__recap-title,
.kws-af .kws-af__done p,
.kws-af .kws-af__count em {
	color: var(--kws-muted) !important;
}

.kws-af .kws-af__count {
	color: var(--kws-brand-dark) !important;
}

.kws-af .kws-af__legal a {
	color: var(--kws-brand-dark) !important;
}

.kws-af .kws-af__btn--next,
.kws-af .kws-af__btn--send {
	color: #fff !important;
}

.kws-af .kws-af__btn--back {
	color: var(--kws-muted) !important;
}

.kws-af .kws-af__tip {
	color: var(--kws-error) !important;
}

.kws-af .kws-af__error {
	color: #9a3412 !important;
}

/* Browser ohne :has() – Auswahl bleibt trotzdem erkennbar */
@supports not selector(:has(*)) {
	.kws-af__card.is-checked,
	.kws-af__choice.is-checked {
		border-color: var(--kws-brand);
		background: var(--kws-brand-soft);
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}