/* ==========================================================================
   Komm ins Bauchgefühl — formular.css
   Formular „Erstgespräch“ (Contact Form 7; Markup aus dem Plugin, inhalte/formular/formular.txt),
   Erfolgskarte (.kib-erfolg) und die Kontaktkarten der Seite /kontakt/.
   Vorlage: design-referenz/screens/erstgespraech.js, components/forms/{Input,Textarea,Checkbox}.jsx.
   Felder: Fläche Kalkweiß hoch, Rand 1 px Kante Feld, Radius 16, Innen 14/16, Label Small 600 Kellerbraun,
   Pflichtstern Kleks, Fokus Rand Kellerbraun + 2-px-Outline, Fehler Rand Kleks / Text Kleks tief.
   Die Bereichswahl färbt über bereich-autismus | bereich-koerper am CF7-Wrapper (formular.js).
   Zeilenhöhen in rem (wachsen mit der Browser-Schriftgröße), Abstände in px.

   Lädt auf der Website nur bei Bedarf (functions.php). Jeder Selektor dieser Datei muss eine der
   folgenden Klassen enthalten, sonst fehlt die Regel auf Seiten ohne Formular:
   kib-laden-wenn: wpcf7 kib-formular kib-erstgespraech kib-erfolg kib-direkt kib-telefon-gross kib-formular-ausfall
   ========================================================================== */

/* 1 · Aufbau ------------------------------------------------------------- */

.wpcf7 .kib-formular {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 620px;
	font-family: var(--wp--preset--font-family--grotesk);
	color: var(--kib-tinte);
}

.wpcf7 .kib-formular p {
	margin: 0;
	max-width: none;
}

.kib-formular .kib-felder {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.kib-formular .kib-feldpaar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 680px) {
	.kib-formular .kib-feldpaar {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kib-formular .kib-feld {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.kib-formular .wpcf7-form-control-wrap {
	display: block;
}

/* 2 · Labels, Hinweise, Fehler ------------------------------------------ */

.kib-formular .kib-feld-label {
	display: block;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	font-weight: 600;
	color: var(--kib-kellerbraun);
}

.kib-formular .kib-pflicht {
	color: var(--kib-kleks);
}

.kib-formular .kib-feld-hinweis {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	color: var(--kib-kellerbraun-hell);
}

/* Fehler ersetzt den Hinweis (wie Feldhuelle im Entwurf) */
.kib-formular .kib-feld:has(.wpcf7-not-valid-tip) .kib-feld-hinweis {
	display: none;
}

.kib-formular .wpcf7-not-valid-tip {
	display: block;
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	font-weight: 400;
	color: var(--kib-kleks-tief);
}

/* 3 · Eingabefelder ------------------------------------------------------ */

.wpcf7 .kib-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	box-sizing: border-box;
	display: block;
	width: 100%;
	margin: 0;
	padding: 14px 16px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.625rem; /* 26px */
	font-weight: 400;
	color: var(--kib-tinte);
	background-color: var(--kib-kalkweiss-hoch);
	border: 1px solid var(--kib-kante-feld);
	border-radius: var(--kib-radius);
	box-shadow: none;
	outline: 2px solid transparent;
	outline-offset: 2px;
	-webkit-appearance: none;
	appearance: none;
	transition:
		border-color var(--kib-dauer-schnell) var(--kib-easing),
		outline-color var(--kib-dauer-schnell) var(--kib-easing);
}

.wpcf7 .kib-formular textarea.wpcf7-form-control {
	min-height: 0;
	line-height: 1.875rem; /* 30px */
	resize: vertical;
}

.wpcf7 .kib-formular :is(input, textarea)::placeholder {
	color: var(--kib-kellerbraun-hell);
	opacity: 0.8;
}

.wpcf7 .kib-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea)[aria-invalid="true"],
.wpcf7 .kib-formular .wpcf7-not-valid:is(input, textarea) {
	border-color: var(--kib-kleks);
}

.wpcf7 .kib-formular :is(input[type="text"], input[type="email"], input[type="tel"], textarea):focus {
	border-color: var(--kib-kellerbraun);
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 2px;
	box-shadow: none;
}

/* 4 · Bereichswahl (drei Pillen, Radio) -------------------------------- */

.kib-formular .kib-bereichswahl {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Legende als normaler Block (float), Zeilenhöhe 30 wie im Entwurf; Pillen direkt darunter */
.kib-formular .kib-bereichswahl > legend {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.875rem; /* 30px */
}

.kib-formular .kib-bereichswahl > .wpcf7-form-control-wrap {
	clear: both;
}

.kib-formular .kib-bereichswahl > .kib-bereich-hinweis {
	clear: both;
	margin-top: 16px;
}

.kib-formular .kib-bereichswahl .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.kib-formular .kib-bereichswahl .wpcf7-list-item {
	display: block;
	margin: 0;
}

.kib-formular .kib-bereichswahl label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 11px 18px;
	border: 1px solid var(--kib-kante);
	border-radius: var(--kib-radius-pill);
	background-color: transparent;
	color: var(--kib-tinte);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.25rem; /* 20px */
	font-weight: 500;
	cursor: pointer;
	transition:
		color var(--kib-dauer-schnell) var(--kib-easing),
		background-color var(--kib-dauer-schnell) var(--kib-easing),
		border-color var(--kib-dauer-schnell) var(--kib-easing);
}

.kib-formular .kib-bereichswahl label:hover {
	border-color: var(--kib-kante-feld);
	background-color: var(--kib-sand);
}

/* Hover wie bei der Zweiteilung der Startseite: helle Fläche in der Bereichsfarbe (Umbau 17.10.2026) */
.kib-formular .kib-bereichswahl label:is([data-bereich="autismus"], :has(input[value*="Autismus"])):hover {
	border-color: var(--kib-autismus-akzent-linie);
	background-color: var(--kib-autismus-akzent-schleier);
}

.kib-formular .kib-bereichswahl label:is([data-bereich="koerper"], :has(input[value*="K\00F6rper"])):hover {
	border-color: var(--kib-koerper-akzent-linie);
	background-color: var(--kib-koerper-akzent-schleier);
}

@media (hover: none) {
	.kib-formular .kib-bereichswahl label:hover {
		background-color: transparent;
		border-color: var(--kib-kante);
	}
}

/* Radio unsichtbar, aber bedienbar (Tastatur: Tab + Pfeiltasten, Screenreader) */
.kib-formular .kib-bereichswahl input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.kib-formular .kib-bereichswahl .wpcf7-list-item-label::before,
.kib-formular .kib-bereichswahl .wpcf7-list-item-label::after {
	content: none;
}

/* Kleks 11 px in der Bereichsfarbe vor „Autismus …“ und „Körperarbeit …“ */
.kib-formular .kib-bereichswahl label:is([data-bereich="autismus"], [data-bereich="koerper"], :has(input[value*="Autismus"]), :has(input[value*="K\00F6rper"]))::before {
	content: "";
	flex: none;
	width: 11px;
	height: 11px;
	background-color: var(--kib-autismus-akzent);
	-webkit-mask: url(../img/kleks-maske.svg) center / contain no-repeat;
	mask: url(../img/kleks-maske.svg) center / contain no-repeat;
}

.kib-formular .kib-bereichswahl label:is([data-bereich="koerper"], :has(input[value*="K\00F6rper"]))::before {
	background-color: var(--kib-koerper-akzent);
	transform: rotate(var(--kib-koerper-kleks-drehung, 140deg));
}

/* gewählt: Fläche in Bereichsfarbe („Weiß ich noch nicht“: Kellerbraun), Schrift Kalkweiß */
.kib-formular .kib-bereichswahl label:has(input:checked) {
	background-color: var(--kib-kellerbraun);
	border-color: var(--kib-kellerbraun);
	color: var(--kib-kalkweiss);
	font-weight: 600;
}

.kib-formular .kib-bereichswahl label:is([data-bereich="autismus"], :has(input[value*="Autismus"])):has(input:checked) {
	background-color: var(--kib-autismus-akzent);
	border-color: var(--kib-autismus-akzent);
}

.kib-formular .kib-bereichswahl label:is([data-bereich="koerper"], :has(input[value*="K\00F6rper"])):has(input:checked) {
	background-color: var(--kib-koerper-akzent);
	border-color: var(--kib-koerper-akzent);
}

.kib-formular .kib-bereichswahl label:has(input:checked)::before {
	background-color: var(--kib-kalkweiss);
}

.kib-formular .kib-bereichswahl label:has(input:focus-visible) {
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 3px;
}

.kib-formular .kib-bereichswahl input[type="radio"]:focus-visible {
	outline: none;
}

.kib-formular .kib-bereich-hinweis span[hidden] {
	display: none;
}

/* 5 · Einwilligung (Checkbox 22 px, Radius 6, gefüllt Kleks mit Haken) --- */

.kib-formular .kib-einwilligung .wpcf7-list-item {
	display: block;
	margin: 0;
}

.kib-formular .kib-einwilligung label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: var(--kib-mass-eng);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	color: var(--kib-tinte);
	cursor: pointer;
}

.kib-formular .kib-einwilligung .wpcf7-list-item-label::before,
.kib-formular .kib-einwilligung .wpcf7-list-item-label::after {
	content: none;
}

.wpcf7 .kib-formular .kib-einwilligung input[type="checkbox"] {
	flex: none;
	box-sizing: border-box;
	width: 22px;
	height: 22px;
	margin: calc(0.75rem - 9px) 0 0; /* 3 px bei 16 px Grundschrift (Entwurf), wandert mit der Zeilenhöhe 1.5rem mit */
	border: 1.5px solid var(--kib-kellerbraun);
	border-radius: 6px;
	background-color: var(--kib-kalkweiss-hoch);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition:
		background-color var(--kib-dauer-schnell) var(--kib-easing),
		border-color var(--kib-dauer-schnell) var(--kib-easing);
}

.wpcf7 .kib-formular .kib-einwilligung input[type="checkbox"]:checked {
	border-color: var(--kib-kleks);
	background-color: var(--kib-kleks);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.4L10.2 16L17.5 8.5' fill='none' stroke='%23F7F3EC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wpcf7 .kib-formular .kib-einwilligung input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 3px;
}

/* Fehlt das Häkchen: Rahmen rot (Entwurf) und — anders als im Entwurf — die Meldung sichtbar unter dem Text
   (WCAG 3.3.1/1.4.1: Fehler nicht nur über die Farbe). formular.js verknüpft sie zusätzlich mit der Checkbox. */
.wpcf7 .kib-formular .kib-einwilligung .wpcf7-not-valid input[type="checkbox"],
.wpcf7 .kib-formular .kib-einwilligung input[type="checkbox"][aria-invalid="true"] {
	border-color: var(--kib-kleks);
	outline: 1px solid var(--kib-kleks);
	outline-offset: 0;
}

/* eingerückt auf die Textkante (Checkbox 22 px + Abstand 12 px) */
.kib-formular .kib-einwilligung .wpcf7-not-valid-tip {
	padding-left: 34px;
}

/* Pflichtstern hinter dem Einwilligungstext (wie bei Vorname/E-Mail) */
.kib-formular .kib-einwilligung .kib-pflicht {
	white-space: nowrap;
}

.kib-formular .kib-einwilligung a {
	color: var(--kib-kleks);
}

.kib-formular .kib-einwilligung a:hover {
	color: var(--kib-kleks-tief);
}

/* 6 · Senden, Spinner, Meldungen ---------------------------------------- */

.kib-formular .kib-absenden {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.wpcf7 .kib-formular input.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 18px 34px;
	border: 1.5px solid var(--kib-akzent);
	border-radius: var(--kib-radius-button);
	background-color: var(--kib-akzent);
	color: var(--kib-kalkweiss);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5rem; /* 24px */
	font-weight: 600;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition:
		color var(--kib-dauer-schnell) var(--kib-easing),
		background-color var(--kib-dauer-schnell) var(--kib-easing),
		border-color var(--kib-dauer-schnell) var(--kib-easing),
		transform var(--kib-dauer-schnell) var(--kib-easing);
}

.wpcf7 .kib-formular input.wpcf7-submit:hover {
	background-color: var(--kib-akzent-tief);
	border-color: var(--kib-akzent-tief);
	color: var(--kib-kalkweiss);
}

.wpcf7 .kib-formular input.wpcf7-submit:active {
	transform: scale(var(--kib-druck));
}

.wpcf7 .kib-formular input.wpcf7-submit:focus-visible {
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 3px;
}

.wpcf7 .kib-formular input.wpcf7-submit:disabled {
	background-color: #E2DACF;
	border-color: #E2DACF;
	color: #9A9083;
	cursor: not-allowed;
}

/* Spinner von CF7 in Bereichsfarbe */
.wpcf7 .kib-formular .wpcf7-spinner {
	width: 22px;
	height: 22px;
	margin: 0;
	background-color: var(--kib-akzent);
	opacity: 1;
}

.wpcf7 .kib-formular .wpcf7-spinner::before {
	top: 4px;
	left: 4px;
	background-color: var(--kib-kalkweiss);
	transform-origin: 7px 7px;
}

/* Meldung unter dem Knopf: schlicht, ohne farbigen Kasten */
.wpcf7 .kib-formular .wpcf7-response-output {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	color: var(--kib-kleks-tief);
}

.wpcf7 .kib-formular .wpcf7-response-output:empty {
	display: none;
}

/* Erfolg ohne JavaScript (oder falls formular.js fehlt): Meldung als Sand-Karte mit Häkchen */
.wpcf7 form.sent .kib-formular .wpcf7-response-output {
	position: relative;
	padding: 32px 32px 32px 76px;
	border: 1px solid var(--kib-sand-tief);
	border-radius: var(--kib-radius);
	background-color: var(--kib-sand);
	color: var(--kib-tinte);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.875rem; /* 30px */
}

.wpcf7 form.sent .kib-formular .wpcf7-response-output::before {
	content: "";
	position: absolute;
	left: 32px;
	top: 33px;
	width: 28px;
	height: 28px;
	background-color: var(--kib-akzent);
	-webkit-mask: url(../img/icons/check.svg) center / contain no-repeat;
	mask: url(../img/icons/check.svg) center / contain no-repeat;
}

/* Ohne JavaScript nach dem Absenden: nur noch die Erfolgsmeldung zeigen (CF7 springt an den Formularanfang) */
.wpcf7.no-js form.sent .kib-formular > .kib-bereichswahl,
.wpcf7.no-js form.sent .kib-formular .kib-felder > :not(.wpcf7-response-output) {
	display: none;
}

/* Pflichtinformation unter dem Formular */
.kib-formular .kib-pflichthinweis {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5rem; /* 24px */
	color: var(--kib-kellerbraun-hell);
}

.kib-formular .kib-pflichthinweis a {
	color: var(--kib-kleks);
}

/* Honigtopf: für Menschen unsichtbar (zusätzlich Inline-Regel aus dem Plugin) */
.wpcf7 .kib-honigtopf {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
}

/* Während des Sendens nicht halb ausgegraut (CF7 6 setzt [inert]) */
.wpcf7 .kib-formular[inert],
.wpcf7 form[inert] .kib-formular {
	opacity: 1;
}

/* 7 · Erfolgskarte ------------------------------------------------------ */

/* Auf der Website erst nach dem Versand sichtbar; im Editor immer (mit Hinweis). */
body:not(.editor-styles-wrapper) .kib-erfolg:not(.ist-sichtbar) {
	display: none;
}

.wp-block-group.kib-erfolg {
	position: relative;
	border-radius: var(--kib-radius);
	/* Sprungziel/scrollIntoView unter der klebenden Kopfzeile: html { scroll-padding-top } in kopf.css */
}

/* Sichtbar steht die Karte an der Stelle des (versteckten) Formulars: oben bündig mit der rechten Kartenspalte,
   ohne den Fluss-Abstand, den sie als zweites Kind der Spalte sonst bekäme. */
.wpcf7[hidden] + .kib-erfolg,
.wp-block-group.kib-erfolg.ist-sichtbar {
	margin-block-start: 0;
}

.wp-block-group.kib-erfolg::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	margin-bottom: 16px;
	background-color: var(--kib-akzent);
	-webkit-mask: url(../img/icons/check.svg) center / contain no-repeat;
	mask: url(../img/icons/check.svg) center / contain no-repeat;
}

.wp-block-group.kib-erfolg > * + * {
	margin-block-start: 16px;
}

.wp-block-group.kib-erfolg > .wp-block-buttons {
	margin-block-start: 24px;
}

.kib-erfolg .kib-erfolg-titel {
	margin: 0;
	font-size: var(--wp--preset--font-size--h-2);
	line-height: 1.25;
}

.kib-erfolg p {
	max-width: 48ch;
}

.kib-erfolg:focus {
	outline: none;
}

.kib-erfolg:focus-visible {
	outline: 2px solid var(--kib-kellerbraun);
	outline-offset: 3px;
}

.editor-styles-wrapper .wp-block-group.kib-erfolg::after {
	content: "Erscheint nach dem Absenden anstelle des Formulars. \201E{Vorname}\201C  wird durch den Vornamen ersetzt.";
	display: block;
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px dashed var(--kib-sand-tief);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 13px;
	line-height: 20px;
	color: var(--kib-kellerbraun-hell);
}

/* 8 · Kontaktkarten neben dem Formular (Seite /kontakt/) ---------------- */

/* „Lieber direkt“: Telefon in Fraunces H3, Kalkweiß, mit Telefon-Icon.
   Seit Phase 3c ein Button-Block mit Bindung an „Kontaktdaten“ (Nummer folgt Einstellungen → Allgemein);
   die Regeln für den früheren Absatz (p.kib-telefon-gross > a) gelten weiter. */
.kib-telefon-gross {
	font-weight: 500;
	letter-spacing: -0.01em;
	font-variation-settings: var(--kib-fraunces-heading);
}

/* Button-Block: ohne Fläche, Rand und Innenabstand — sieht aus wie der Telefon-Link im Entwurf */
.wp-block-button.kib-telefon-gross > .wp-block-button__link {
	justify-content: flex-start;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	color: var(--kib-kalkweiss);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	line-height: 1.3333;
	letter-spacing: -0.01em;
	font-variation-settings: var(--kib-fraunces-heading);
	text-align: left;
}

.wp-block-button.kib-telefon-gross > .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--kib-kalkweiss);
}

.wp-block-button.kib-telefon-gross > .wp-block-button__link:active {
	transform: none;
}

.kib-telefon-gross a {
	display: inline-flex;
	align-items: center;
	vertical-align: top;
	gap: 12px;
	color: var(--kib-kalkweiss);
	text-decoration: none;
}

:is(.kib-dunkel, .is-style-karte-dunkel) .kib-telefon-gross a,
:is(.kib-dunkel, .is-style-karte-dunkel) .kib-telefon-gross a:hover {
	color: var(--kib-kalkweiss);
}

.kib-telefon-gross a:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

.kib-telefon-gross a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url(../img/icons/phone.svg) center / contain no-repeat;
	mask: url(../img/icons/phone.svg) center / contain no-repeat;
}

.kib-direkt p.has-small-font-size {
	color: var(--kib-invers-leise);
}

/* Wie im Entwurf: Labels der beiden Karten mit 30 px Zeilenhöhe, Telefonzeile 30 px,
   Kosten-Labels über die volle Kartenbreite */
.kib-erstgespraech :is(.is-style-karte, .is-style-karte-dunkel) > .is-style-kicker-schlicht {
	line-height: 1.875rem; /* 30px */
}

.kib-erstgespraech .kib-telefon-gross,
.kib-erstgespraech .wp-block-button.kib-telefon-gross > .wp-block-button__link {
	line-height: 1.875rem; /* 30px */
}

.kib-erstgespraech .is-style-karte .is-style-kosten {
	width: auto;
}

/* 9 · Hinweise nur im Editor ------------------------------------------- */

/* Shortcode-Block des Formulars (gesperrt gegen Löschen/Verschieben): sagen, was hier erscheint und wo man es pflegt.
   Nur im Block-Editor (.editor-styles-wrapper); auf der Website rendert an dieser Stelle das Formular. */
.editor-styles-wrapper .kib-erstgespraech .wp-block-shortcode::before {
	content: "Hier erscheint das Formular \201E Erstgespr\00E4 ch\201C . Felder, Empf\00E4 nger und Meldungen \00E4 nderst du unter Formulare \2192  Kontaktformulare \2192  \201E Erstgespr\00E4 ch (Website 2026)\201C . Diese Zeile nicht l\00F6 schen oder \00E4 ndern.";
	display: block;
	width: 100%;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 13px;
	line-height: 20px;
	color: var(--kib-kellerbraun-hell);
}

/* Formular nicht erreichbar (Contact Form 7 inaktiv / Formular fehlt): Ersatz aus inc/formular.php */
.kib-formular-ausfall > * + * {
	margin-block-start: 16px;
}

.kib-formular-ausfall a[href^="tel:"] {
	white-space: nowrap;
}

.kib-formular-ausfall .kib-formular-ausfall-hinweis {
	padding-top: 12px;
	border-top: 1px dashed var(--kib-sand-tief);
	font-size: 13px;
	line-height: 20px;
	color: var(--kib-kellerbraun-hell);
}

/* 10 · Erzwungene Farben (Windows-Kontrastmodus) ------------------------ */

@media (forced-colors: active) {
	/* gewählte Pille: Systemfarbe „Markierung“ statt der Bereichsfläche (die der Modus sonst entfernt).
	   Selektor bewusst spezifischer als die Bereichsregeln in Abschnitt 4 (sonst bliebe Kleks/Moos). */
	.wpcf7 .kib-formular .kib-bereichswahl .wpcf7-list-item label:has(input:checked) {
		forced-color-adjust: none;
		background-color: Highlight;
		border-color: Highlight;
		color: HighlightText;
	}

	/* Kleks vor „Autismus …“/„Körperarbeit …“ in Textfarbe statt unsichtbar (Fläche würde zu Canvas) */
	.wpcf7 .kib-formular .kib-bereichswahl .wpcf7-list-item label::before {
		forced-color-adjust: none;
		background-color: CanvasText;
	}

	.wpcf7 .kib-formular .kib-bereichswahl .wpcf7-list-item label:has(input:checked)::before {
		background-color: HighlightText;
	}

	/* Einwilligung: native Checkbox, damit der Haken sichtbar bleibt */
	.wpcf7 .kib-formular .kib-einwilligung input[type="checkbox"],
	.wpcf7 .kib-formular .kib-einwilligung input[type="checkbox"]:checked {
		-webkit-appearance: auto;
		appearance: auto;
		background-image: none;
	}
}