/* fx4_kontakt — Terminformular (Spec 4.2). Reihenfolge: 1. Grundregeln,
   2. Zusatzregeln (vom Markup gebraucht, nicht im Spec-Textblock), 3. Eingriffe
   ins CF7-Markup, 4. Media-Queries zuletzt.
   Typografie (Groesse, Familie, Schnitt, Laufweite) kommt ausschliesslich aus
   project.css (Regel 5) — fuer .fx4_form_label/_control/_fuss/_hinweis/
   _schritt_nr liegen die entsprechenden Regeln deshalb dort, nicht hier. */

/* ---------- 1 Grundregeln (Spec 4.2 "CSS-Geometrie") ---------- */

section.fx4_kontakt .fx4_raster {
	display: grid;
	grid-template-columns: 340px 1fr;
	grid-template-areas: "intro karte" "anruf karte";
	gap: 64px;
	align-items: start;
}

section.fx4_kontakt .fx4_intro {
	grid-area: intro;
}

section.fx4_kontakt .fx4_anruf {
	grid-area: anruf;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--fx-line-tint);
}

section.fx4_kontakt .fx4_karte {
	grid-area: karte;
	background: var(--fx-white);
	padding: 44px;
	border: 1px solid var(--fx-line);
}

section.fx4_kontakt .fx4_form_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px;
}

section.fx4_kontakt .fx4_form_schritt {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fx-line);
}

section.fx4_kontakt .fx4_form_feld {
	position: relative;
}

section.fx4_kontakt .fx4_form_feld + .fx4_form_feld {
	margin-top: 18px;
}

section.fx4_kontakt .fx4_form_label {
	display: block;
	margin-bottom: 9px;
	color: var(--fx-navy);
}

section.fx4_kontakt .fx4_form_control {
	display: block;
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--fx-line-form);
	border-radius: 0;
	background: var(--fx-white);
	color: var(--fx-navy);
}

/* Explizite Hoehe statt nur Padding: das Shadow-DOM eines input[type=date]
   (Datumssegmente) traegt eine eigene, per Padding nicht kontrollierbare
   Grundhoehe, die sonst 2px von select/.fx4_dropdown_button abweicht — der
   haeufigste Bruch beim Mischen von nativem und ersetztem Control (Aufgabe 26). */
section.fx4_kontakt { --fx4-feld-hoehe: 55px; }
section.fx4_kontakt select.fx4_form_control,
section.fx4_kontakt input[type="date"].fx4_form_control,
section.fx4_kontakt .fx4_dropdown_button {
	height: var(--fx4-feld-hoehe);
	padding: 0 16px;
}

section.fx4_kontakt input[type="text"].fx4_form_control,
section.fx4_kontakt input[type="tel"].fx4_form_control {
	padding: 16px 14px;
}

section.fx4_kontakt .fx4_form_fuss {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-top: 38px;
	padding-top: 30px;
	border-top: 1px solid var(--fx-line);
}

section.fx4_kontakt .fx4_form_hinweis {
	margin: 0;
	max-width: 300px; /* entspricht .fx-lesebreite-schmal, hier direkt (kein Farb-/Font-Wert) */
	color: var(--fx-text);
}

/* Link im Hinweis (Datenschutzerklaerung): im Projekt gibt es keinen globalen
   Fliesstext-Link-Stil, ohne diese Regel stand hier das Browser-Blau. Unterstrichen
   in Navy, damit er sich vom grauen Hinweistext abhebt; Hover wie .fx4_nummer.
   Der Tastaturfokus kommt aus project.css (a:focus-visible, azure Rahmen). */
section.fx4_kontakt .fx4_form_hinweis a {
	color: var(--fx-navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

section.fx4_kontakt .fx4_form_hinweis a:hover {
	color: var(--fx-azure);
}

/* Fehlerzustand: Tokens statt Farbliteralen (Verbindliche Korrektur 2 zu Aufgabe 24). */
section.fx4_kontakt .wpcf7-not-valid {
	border-color: var(--fx-fehler);
	background: var(--fx-fehler-flaeche);
}

/* ---------- 2 Zusatzregeln (vom Markup gebraucht, nicht im Spec-Textblock) ---------- */

section.fx4_kontakt .fx4_topline {
	margin: 0 0 14px;
}

section.fx4_kontakt .fx4_titel {
	margin: 0 0 14px;
}

section.fx4_kontakt .fx4_lead {
	margin: 0;
}

section.fx4_kontakt .fx4_anruf_label {
	margin: 0 0 6px;
}

section.fx4_kontakt .fx4_nummer {
	color: var(--fx-navy);
	text-decoration: none;
}

section.fx4_kontakt a.fx4_nummer:hover {
	color: var(--fx-azure);
}

section.fx4_kontakt .fx4_form_schritt_nr {
	flex: none;
	color: var(--fx-azure);
}

section.fx4_kontakt .fx4_form_schritt_titel {
	color: var(--fx-navy);
}

/* ---------- 3 Eingriffe ins CF7-Markup (Spec 4.2) ---------- */

/* Bewusst auf .fx4_form_feld beschraenkt, damit der Honeypot-Wrap (gleiche
   CF7-Basisklasse, eigene Clip-Styles) unberuehrt bleibt. */
section.fx4_kontakt .fx4_form_feld > .wpcf7-form-control-wrap {
	display: block;
}

section.fx4_kontakt .wpcf7-spinner {
	margin: 0;
}

section.fx4_kontakt .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 16px;
	border-width: 1px;
}

/* Seit fx_cf7_submit_als_button() ist der Absenden-Knopf ein echtes <button>
   und traegt das Pfeil-Icon selbst — der Text-Pfeil als ::after entfaellt. */
section.fx4_kontakt .fx4_form_submit_wrap {
	position: relative;
	display: inline-flex;
	/* Der Knopf behaelt seine Textbreite und bleibt einzeilig — schrumpfen darf
	   der Hinweis daneben (vorher brach "Termin anfragen" bis 1279px um). */
	flex: none;
}

/* Ab 768px steht der Knopf neben dem Hinweis und hat Platz fuer eine Zeile.
   Darunter ist er vollbreit, dort darf er bei 280px notfalls umbrechen. */
@media (min-width: 768px) {
	section.fx4_kontakt .fx4_form_submit {
		white-space: nowrap;
	}
}

/* ---------- 4 Custom-Dropdown (Aufgabe 25) ---------- */

/* Natives Select bleibt im DOM, im <form> und :enabled — nur unsichtbar. */
section.fx4_kontakt .fx4_form_select--ersetzt { display:none; }

section.fx4_kontakt .fx4_dropdown { position:relative; }
/* appearance:none — sonst behaelt der native <button> ca. 2px eigenes Chrome-Rendering
   und weicht dadurch minimal von der Hoehe der nativen select/date-Controls ab. */
section.fx4_kontakt .fx4_dropdown_button { appearance:none; -webkit-appearance:none;
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; width:100%; text-align:left; background:var(--fx-white); cursor:pointer; }
section.fx4_kontakt .fx4_dropdown_button::after { content:""; flex:none; width:10px; height:10px;
	border-right:2px solid var(--fx-navy); border-bottom:2px solid var(--fx-navy);
	transform:rotate(45deg) translate(-2px,-2px); }
section.fx4_kontakt .fx4_dropdown_button[aria-expanded="true"]::after { transform:rotate(-135deg) translate(-2px,-2px); }
section.fx4_kontakt .fx4_dropdown_button--platzhalter { color:var(--fx-text); }
section.fx4_kontakt .fx4_dropdown_button::-moz-focus-inner { border:0; padding:0; }

section.fx4_kontakt .fx4_dropdown_liste { position:absolute; left:0; right:0; top:calc(100% - 1px);
	z-index:20; margin:0; padding:0; list-style:none; max-height:320px; overflow-y:auto;
	background:var(--fx-white); border:1px solid var(--fx-navy);
	box-shadow:0 12px 28px var(--fx-shadow-dropdown); }
section.fx4_kontakt .fx4_dropdown_option { padding:14px 16px; min-height:44px; display:flex; align-items:center;
	color:var(--fx-navy); cursor:pointer; }
section.fx4_kontakt .fx4_dropdown_option.is-aktiv,
section.fx4_kontakt .fx4_dropdown_option:hover { background:var(--fx-tint); }
section.fx4_kontakt .fx4_dropdown_option--platzhalter { color:var(--fx-text); }
section.fx4_kontakt .fx4_dropdown_option[aria-selected="true"] { background:var(--fx-tint); }
/* Der gepunktete Fokusrahmen ist global ueber :focus{outline:none}/:focus-visible
   (project.css) und die ::-moz-focus-inner-Zeile oben erledigt — hier keine zweite Regel. */

/* ---------- 5 input[type=date] bleibt nativ (Aufgabe 26, Spec 4.2) ---------- */

section.fx4_kontakt { --fx4-kalender-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3D4F' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
section.fx4_kontakt .fx4_form_date { appearance:none; -webkit-appearance:none;
	background-color:var(--fx-white); background-repeat:no-repeat;
	background-position:right 14px center; background-size:20px 20px; padding-right:44px;
	background-image:var(--fx4-kalender-icon); }
section.fx4_kontakt .fx4_form_date::-webkit-calendar-picker-indicator { position:absolute; right:0; top:0;
	width:44px; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; }
section.fx4_kontakt .fx4_form_date::-webkit-date-and-time-value { text-align:left; margin:0; }
section.fx4_kontakt .fx4_form_date::-webkit-inner-spin-button,
section.fx4_kontakt .fx4_form_date::-webkit-clear-button { display:none; -webkit-appearance:none; }
/* Leeres Feld zeigt unvermeidbar die Locale-Maske tt.mm.jjjj — in Platzhaltergrau entschaerfen. */
section.fx4_kontakt .fx4_form_date:not(.has-value) { color:var(--fx-text); }
section.fx4_kontakt .fx4_form_date.has-value { color:var(--fx-navy); }
/* data:-SVG mit dem Literal %230F3D4F (= --fx-navy): eine background-image-URL
   kann keine CSS-Custom-Property in den SVG-Quelltext einsetzen. Dokumentierte
   Ausnahme von "keine Farbliterale im Modul-CSS" — aendert sich --fx-navy, muss
   der Hexwert hier mitgezogen werden. */

/* Fehlerflaeche wie bei den uebrigen Feldern: die Regel oben setzte sie sonst
   zurueck (gleiche Spezifitaet, spaeter im Code). */
section.fx4_kontakt .fx4_form_date.wpcf7-not-valid { background-color:var(--fx-fehler-flaeche); }

/* Firefox kennt ::-webkit-calendar-picker-indicator nicht und zeichnet einen eigenen
   Kalenderknopf — neben dem Theme-Icon standen dann zwei. Ein Aufsatz deckt ihn dort
   ab; Klicks gehen durch und oeffnen weiter den Kalender. */
@supports (-moz-appearance: none) {
	section.fx4_kontakt .wpcf7-form-control-wrap:has(> .fx4_form_date) { position:relative; }
	section.fx4_kontakt .wpcf7-form-control-wrap:has(> .fx4_form_date)::after { content:""; position:absolute;
		top:1px; right:1px; width:44px; height:calc(var(--fx4-feld-hoehe) - 2px); pointer-events:none;
		background:var(--fx-white) var(--fx4-kalender-icon) no-repeat right 13px center / 20px 20px; }
	section.fx4_kontakt .wpcf7-form-control-wrap:has(> .fx4_form_date.wpcf7-not-valid)::after { background-color:var(--fx-fehler-flaeche); }
}

/* ---------- 6 Media-Queries (zuletzt) ---------- */

/* Bis 1279px steht das Formular unter dem Intro statt daneben. Neben der
   340px-Textspalte blieben der Karte bei 992–1279px nur 500–760px, jede der drei
   Formularspalten war 113–200px schmal: Dropdowns zweizeilig, Datumsmaske im
   Kalendersymbol, Platzhalter abgeschnitten (gemessen bis einschliesslich 1279px;
   ab 1280px passen "Bitte auswaehlen" und die Platzhalter einzeilig). Volle
   Breite gibt jeder Spalte wieder 240px und mehr — derselbe Aufbau wie unter 992px. */
@media (max-width: 1279px) {
	section.fx4_kontakt .fx4_raster {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "intro" "karte" "anruf";
		gap: 36px;
	}

	section.fx4_kontakt .fx4_anruf {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	section.fx4_kontakt .fx4_karte {
		padding: 24px;
	}

	section.fx4_kontakt .fx4_form_grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	section.fx4_kontakt .fx4_form_control {
		min-height: 48px;
	}

	section.fx4_kontakt .fx4_form_fuss {
		flex-direction: column;
		align-items: stretch;
		border-top: 0;
	}

	/* inline-flex haelt sich sonst am Inhalt fest — das Submit-Element kann so
	   nicht auf die von .fx-btn (project.css, <=991px) vergebene volle Breite. */
	section.fx4_kontakt .fx4_form_submit_wrap {
		display: flex;
	}
}

@media (max-width: 359px) {
	section.fx4_kontakt .fx4_karte {
		padding: 20px;
	}

	section.fx4_kontakt .fx4_form_submit {
		padding: 18px 20px;
	}
}

/* Honeypot des Spamschutz-Plugins: der Wrapper ist 1x1px, das Input darin lief
   aber sichtbar heraus. Ein sichtbares Honeypot-Feld verwirft echte Anfragen,
   sobald ein Mensch es ausfuellt. */
section.fx4_kontakt .cf7apps-honeypot-wrap {
	overflow: hidden;
}

/* Antwortfeld erst zeigen, wenn CF7 eine Meldung hineinschreibt. */
section.fx4_kontakt .wpcf7-response-output:empty {
	display: none;
}