/*
 * Quick Task 260907-568 - Kontaktformular auf die neue Logik.
 *
 * Gestaltung der Schicht aus assets/js/contact-form.js: Ja/Nein-Frage, Antwortnotiz,
 * Fortschrittszeile und Weiter-Knopf. Kein bestehendes Feld des Formulars aendert hier
 * sein Aussehen - die Datei fuegt nur hinzu, was es vorher nicht gab.
 *
 * DESIGN-DISZIPLIN (.planning/CONVENTIONS.md Zeile 131): kein Hex-Literal, keine eigene
 * --pcg-*-Deklaration. Alle Werte kommen aus dem :root-Block von price-calculator.css,
 * das site-weit geladen wird - deshalb steht dieses Stylesheet in functions.php auch
 * ausdruecklich als abhaengig davon eingetragen. Wer die Marke dort umfaerbt, faerbt
 * das Kontaktformular mit um; genau das ist gewollt.
 *
 * Die Optik ist bewusst die des Preiskalkulators: derselbe Knopf, dieselbe
 * Fortschrittszeile, dieselben Kacheln. Der Besucher soll die beiden Formulare als
 * dasselbe Haus erkennen.
 *
 * Owner: PCG Website Relaunch, quick task 260907-568.
 */

/* ---------------------------------------------------------------------------
 * Ausblenden. Die einzige Regel, die das Skript zum Fuehren braucht.
 *
 * !important ist hier Absicht und kein Notnagel: Bricks legt eigene Anzeige-Regeln auf
 * die Absaetze innerhalb des Formulars, und ein noch nicht freigeschalteter Schritt darf
 * unter keinen Umstaenden trotzdem sichtbar sein - das waere kein Schoenheitsfehler,
 * sondern der Verlust der ganzen Fuehrung.
 * ------------------------------------------------------------------------- */

.wpcf7-form .pcg-kf-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Die Ja/Nein-Frage
 * ------------------------------------------------------------------------- */

.wpcf7-form .pcg-kf-gate {
	margin: 0 0 var(--pcg-space-md);
	padding: var(--pcg-space-sm) var(--pcg-space-md) var(--pcg-space-md);
	border: 1px solid var(--pcg-color-hairline);
	border-radius: var(--pcg-radius-card);
	background-color: var(--pcg-color-card);
}

.wpcf7-form .pcg-kf-gate__legend {
	padding: 0 var(--pcg-space-xs);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	color: var(--pcg-color-ink);
}

.wpcf7-form .pcg-kf-gate__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pcg-space-xs);
	margin-top: var(--pcg-space-sm);
}

/* Dieselbe Kachel wie im Kalkulator (.pcg-calc__chip), nur um ein echtes Radiofeld
 * herumgebaut statt um einen Knopf: die Bedienung mit der Tastatur und die Ansage im
 * Screenreader kommen so vom Browser selbst und muessen nicht nachgebaut werden. */
.wpcf7-form .pcg-kf-gate__option {
	display: inline-flex;
	align-items: center;
	gap: var(--pcg-space-xs);
	min-width: 96px;
	min-height: var(--pcg-touch-min);
	padding: var(--pcg-space-xs) var(--pcg-space-sm);
	background-color: var(--pcg-color-bg);
	color: var(--pcg-color-ink);
	border: 1px solid var(--pcg-color-field-border);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.4;
	cursor: pointer;
}

.wpcf7-form .pcg-kf-gate__option:hover {
	border-color: var(--pcg-color-accent);
}

.wpcf7-form .pcg-kf-gate__option:focus-within {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

.wpcf7-form .pcg-kf-gate__option input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pcg-color-accent);
}

/* ---------------------------------------------------------------------------
 * Die Antwortnotiz. Zwei Auspraegungen: die Bestaetigung bei "Ja" (leise) und der
 * Hinweis auf den Kalkulator bei "Nein" (mit Akzentkante, weil er ein Angebot macht).
 * ------------------------------------------------------------------------- */

.wpcf7-form .pcg-kf__note {
	margin: 0 0 var(--pcg-space-md);
	padding: var(--pcg-space-sm) var(--pcg-space-md);
	border-left: 3px solid var(--pcg-color-hairline);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--pcg-color-lead);
}

.wpcf7-form .pcg-kf__note p {
	margin: 0;
}

.wpcf7-form .pcg-kf__note--tip {
	border-left-color: var(--pcg-color-accent);
}

.wpcf7-form .pcg-kf__note-link {
	display: inline-block;
	margin-top: var(--pcg-space-xs);
	color: var(--pcg-color-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpcf7-form .pcg-kf__note-link:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Fortschrittszeile - Wort fuer Wort dieselbe Gestalt wie .pcg-calc__step-progress.
 * ------------------------------------------------------------------------- */

.wpcf7-form .pcg-kf__progress {
	/* Abstand nach OBEN, nicht nur nach unten (Kundenhinweis 2026-09-07): die Zeile ist das
	 * erste Element im Formular und stiess vorher direkt an den Einleitungsabsatz der Seite,
	 * der selbst keinen Abstand nach unten hat. Sie ist der Anfang des Formulars und braucht
	 * deshalb die Luft, die sonst zwischen zwei Abschnitten steht. */
	margin: var(--pcg-space-lg) 0 var(--pcg-space-sm);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pcg-color-lead);
}

/* ---------------------------------------------------------------------------
 * Weiter-Knopf. Umrandet statt gefuellt, damit der Absende-Knopf der einzige gefuellte
 * Knopf im Formular bleibt - dieselbe Begruendung wie bei .pcg-calc__step-next.
 * ------------------------------------------------------------------------- */

.wpcf7-form .pcg-kf__nav {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pcg-space-xs);
	margin: 0 0 var(--pcg-space-md);
}

.wpcf7-form .pcg-kf__next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pcg-touch-min);
	min-height: var(--pcg-touch-min);
	padding: 12px 26px;
	background-color: transparent;
	color: var(--pcg-color-ink);
	border: 1px solid var(--pcg-color-ink);
	border-radius: var(--pcg-radius-control);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}

.wpcf7-form .pcg-kf__next:hover {
	border-color: var(--pcg-color-accent);
	color: var(--pcg-color-accent);
}

.wpcf7-form .pcg-kf__next:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}

/* Gesperrt, weil der Schritt noch nicht vollstaendig ist. Bewusst SICHTBAR und nicht
 * ausgeblendet: ein Knopf, der verschwindet, laesst den Besucher raten, ob es ueberhaupt
 * weitergeht - und sein Verschwinden wuerde den Inhalt darunter verschieben. */
.wpcf7-form .pcg-kf__next--disabled,
.wpcf7-form .pcg-kf__next:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.wpcf7-form .pcg-kf__hint {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--pcg-color-lead);
}

/* ---------------------------------------------------------------------------
 * Nachbesserung an einem Altbestand (gefunden bei der Live-Pruefung dieser Aufgabe).
 *
 * Der Trichter-Hinweis aus Quick-Task 260907-0q9 (T7) traegt einen Link "Zum
 * Preiskalkulator" mit der Klasse .pcg-kf-link - fuer den es nirgends eine Regel gab.
 * Er wurde deshalb in der Fliesstextfarbe und ohne Unterstreichung ausgeliefert und war
 * von normalem Text nicht zu unterscheiden. Genau dort soll der Besucher aber abbiegen
 * koennen; ein unsichtbarer Link ist an dieser Stelle kein Schoenheitsfehler.
 *
 * Bewusst hier und nicht in einer eigenen Datei: er gehoert zu derselben Trichter-Logik,
 * die dieses Stylesheet gestaltet, und teilt sich die Gestalt mit .pcg-kf__note-link.
 * ------------------------------------------------------------------------- */

.wpcf7-form .pcg-kf-link {
	display: inline-block;
	color: var(--pcg-color-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wpcf7-form .pcg-kf-link:focus-visible {
	outline: 2px solid var(--pcg-color-accent);
	outline-offset: 2px;
}