/**
 * Formular - Aussehen.
 *
 * KORREKTUR gegenueber 0.2.0/0.3.0: Dort stand ueberall "font-size: 21px".
 * Das war eine falsch angewendete Regel. Die Untergrenze von 21 Pixeln aus
 * der Designvorlage gilt fuer BILDER - Infografiken, Titelbilder,
 * Instagram-Posts -, damit Schrift auf einem Handy ohne Zoomen lesbar
 * bleibt. Eine Website hat ihre eigene Typografie, und das Theme setzt sie
 * bereits (Basis 1rem, Tablet 0.9, Handy 0.8). Ein Formular, das sich davon
 * loest, wirkt riesig und passt in keinen Abschnitt.
 *
 * Deshalb: Schriftgroessen werden GEERBT, nicht gesetzt. Aus dem Hausstil
 * bleiben die Farben - #2C5F5A, #FFFFFF, #F3F8F5 -, denn die sind Identitaet
 * und keine Groessenangabe.
 *
 * Der 15-Pixel-Rahmen entfaellt aus demselben Grund. Er gehoert um ein Bild,
 * nicht um ein Eingabefeld.
 */

.afcs-formular {
	max-width: 32rem;
	margin: 0 auto;
	padding: 1.5rem;
	box-sizing: border-box;
	background: #F3F8F5;
	border: 2px solid #2C5F5A;
	border-radius: 6px;
	color: #2C5F5A;
	font-size: inherit;
	line-height: inherit;
}

.afcs-feld {
	margin: 0 0 1rem;
}

.afcs-feld label {
	display: block;
	margin-bottom: 0.25em;
	font-size: inherit;
	font-weight: 600;
}

.afcs-feld input,
.afcs-feld textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.55em 0.7em;
	font-size: inherit;
	font-family: inherit;
	line-height: 1.4;
	color: #2C5F5A;
	background: #FFFFFF;
	border: 1px solid #2C5F5A;
	border-radius: 4px;
}

.afcs-feld input:focus,
.afcs-feld textarea:focus {
	outline: 2px solid #2C5F5A;
	outline-offset: 1px;
}

.afcs-feld__hinweis {
	display: block;
	margin-top: 0.25em;
	font-size: 0.875em;
	font-weight: 400;
	font-style: italic;
	opacity: 0.85;
}

.afcs-haken {
	margin: 0 0 0.9rem;
}

.afcs-haken label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.45;
	cursor: pointer;
}

.afcs-haken input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	margin-top: 0.2em;
}

.afcs-haken a {
	color: #2C5F5A;
	text-decoration: underline;
}

/* Honigtopf: fuer Menschen unsichtbar, fuer Ausfuellhelfer sichtbar.
   Bewusst kein type="hidden" - genau darauf beruht die Falle. */
.afcs-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.afcs-absenden {
	margin: 1.2rem 0 0.5rem;
}

.afcs-absenden__knopf {
	display: block;
	width: 100%;
	padding: 0.75em 1.2em;
	font-size: inherit;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.3;
	color: #FFFFFF;
	background: #2C5F5A;
	border: 2px solid #2C5F5A;
	border-radius: 4px;
	cursor: pointer;
}

.afcs-absenden__knopf:hover:enabled,
.afcs-absenden__knopf:focus:enabled {
	color: #2C5F5A;
	background: #FFFFFF;
}

.afcs-absenden__knopf:disabled {
	opacity: 0.6;
	cursor: default;
}

.afcs-pflicht {
	margin: 0;
	font-size: 0.8em;
	opacity: 0.8;
}

.afcs-meldung {
	margin-top: 0.9rem;
	font-size: inherit;
	line-height: 1.45;
}

.afcs-meldung--erfolg {
	padding: 0.9em 1em;
	font-weight: 700;
	color: #FFFFFF;
	background: #2C5F5A;
	border-radius: 4px;
}

.afcs-meldung--fehler {
	padding: 0.9em 1em;
	font-weight: 600;
	background: #FFFFFF;
	border: 2px solid #2C5F5A;
	border-radius: 4px;
}

.afcs-meldung--warten {
	font-style: italic;
	opacity: 0.85;
}

/* Der Widerrufshinweis in der Fusszeile - unauffaellig, aber lesbar. */
.afcs-widerruf__hinweis {
	display: inline-block;
	margin-left: 0.4em;
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * Kompakter am PC.
 *
 * Daniels Rueckmeldung: Auf dem Handy passt es, weil dort ohnehin alles
 * untereinander steht. Am PC liegt neben dem Formular ein anderer Block, und
 * dagegen wirkte es viel zu hoch.
 *
 * Loesung: Ab 640 Pixel Breite stehen kurze Felder PAARWEISE nebeneinander.
 * Aus neun Zeilen werden sechs. Nachricht, Haken und Knopf bleiben ueber die
 * volle Breite - die brauchen sie.
 * ------------------------------------------------------------------------ */

@media (min-width: 640px) {

	.afcs-formular__form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 0.9rem;
	}

	/* Standard: alles ueber beide Spalten. */
	.afcs-formular__form > * {
		grid-column: 1 / -1;
	}

	/* Diese vier teilen sich zwei Zeilen. */
	.afcs-feld--halb {
		grid-column: span 1;
	}

	.afcs-feld {
		margin-bottom: 0.75rem;
	}

	.afcs-haken {
		margin-bottom: 0.6rem;
	}

	.afcs-absenden {
		margin-top: 0.8rem;
	}

	.afcs-formular {
		padding: 1.25rem 1.4rem;
	}

	/* Die Nachricht darf flacher sein - wer viel schreiben will, scrollt. */
	.afcs-feld textarea {
		min-height: 5.5em;
	}
}

@media (min-width: 640px) {
	/* Die Rechenaufgabe braucht Platz fuer die Frage, aber kein breites Feld. */
	.afcs-feld--rechnen input {
		max-width: 8em;
	}
}

/* ---------------------------------------------------------------------------
 * Enger. Daniels Rueckmeldung: "Da ist so viel Platz dazwischen."
 * Gilt fuer alle drei Geraeteklassen, nicht nur fuer den PC.
 * ------------------------------------------------------------------------ */

.afcs-formular { padding: 1.1rem 1.2rem; }
.afcs-feld     { margin-bottom: 0.55rem; }
.afcs-haken    { margin-bottom: 0.45rem; }
.afcs-absenden { margin: 0.8rem 0 0.35rem; }
.afcs-feld label { margin-bottom: 0.15em; }
.afcs-feld input { padding: 0.45em 0.6em; }
.afcs-haken label { gap: 0.45em; line-height: 1.35; }
.afcs-meldung { margin-top: 0.7rem; }

@media (min-width: 640px) {
	.afcs-formular__form { column-gap: 0.7rem; }
	.afcs-feld  { margin-bottom: 0.55rem; }
	.afcs-haken { margin-bottom: 0.45rem; }
	.afcs-formular { padding: 1.15rem 1.3rem; }
}

/* Tablet: zweispaltig ab 600 px, damit die Paare auch dort nebeneinander
   stehen und der Block nicht so hoch wird wie am Handy. */
@media (min-width: 600px) and (max-width: 639px) {
	.afcs-formular__form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.7rem; }
	.afcs-formular__form > * { grid-column: 1 / -1; }
	.afcs-feld--halb { grid-column: span 1; }
}

/* ---------------------------------------------------------------------------
 * Höhe angleichen — im Browser gemessen, nicht geschätzt.
 *
 * Gemessen auf angstfrei-coaching.com bei 1280 px Fensterbreite:
 *   Breite Formular 472 px · Breite FAQ 472 px  -> identisch, kein Handlungsbedarf
 *   Höhe   Formular 661 px · Höhe   FAQ 296 px  -> hier lag der Unterschied
 * Mit den Werten unten: Formular 499 px. Die restlichen 200 px sind Inhalt,
 * kein Weißraum — vier Felder, Sicherheitsfrage, zwei Häkchen und ein Knopf
 * brauchen mehr Platz als ein zugeklapptes Akkordeon.
 * ------------------------------------------------------------------------ */

@media (min-width: 640px) {
	.afcs-formular { padding: 0.9rem 1rem; }
	.afcs-formular__form { row-gap: 0; }
	.afcs-feld { margin-bottom: 0.4rem; }
	.afcs-feld label { margin-bottom: 0.1em; font-size: 0.9em; }
	.afcs-feld input { padding: 0.35em 0.55em; }
	.afcs-feld--rechnen { grid-column: span 1; }
	.afcs-haken { margin-bottom: 0.3rem; }
	.afcs-haken label { font-size: 0.8em; line-height: 1.3; }
	.afcs-absenden { margin: 0.5rem 0 0.2rem; }
	.afcs-absenden__knopf { padding: 0.6em 1em; }
	.afcs-pflicht { font-size: 0.75em; }
}

/* ---------------------------------------------------------------------------
 * Zweite Kürzungsrunde — wieder im Browser gemessen.
 *   vorher 499 px · nachher 424 px · FAQ 296 px
 * Der grösste Einzelposten war die Beschriftung der Sicherheitsfrage: Sie
 * brach im halbbreiten Feld auf drei Zeilen um. Kurzer Text + kein Umbruch.
 * ------------------------------------------------------------------------ */

@media (min-width: 600px) {
	.afcs-formular { padding: 0.85rem 1rem 0.7rem; }
	.afcs-feld { margin-bottom: 0.3rem; }
	.afcs-haken { margin-bottom: 0.25rem; }
	.afcs-haken label { font-size: 0.78em; line-height: 1.28; gap: 0.4em; }
	.afcs-absenden { margin: 0.45rem 0 0.15rem; }
	.afcs-pflicht { font-size: 0.72em; margin: 0; }
	.afcs-meldung { margin-top: 0.5rem; }
	.afcs-feld--rechnen label { white-space: nowrap; }
}

/*
 * Kadence setzt auf p-Elemente innerhalb des Inhalts pauschal 32px Abstand.
 * Diese Regeln bleiben vollständig auf das Suite-Formular begrenzt und
 * verhindern, dass der Formularblock dadurch unnötig hoch wird.
 */

.afcs-formular p.afcs-feld {
	margin-top: 0 !important;
	margin-bottom: 0.25rem !important;
}

.afcs-formular p.afcs-haken {
	margin-top: 0 !important;
	margin-bottom: 0.2rem !important;
}

.afcs-formular p.afcs-absenden {
	margin-top: 0.35rem !important;
	margin-bottom: 0.1rem !important;
}

.afcs-formular p.afcs-pflicht {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.afcs-formular .afcs-meldung {
	margin-top: 0.45rem !important;
}