/* ── Kontakt & Beratung, Welle 2 (12.10.2026) – Claus' finale Shopabnahme 07.10.2026, Teilplan 10 ──
   Wird nach temana.css geladen. Farben aus den Theme-Variablen, nicht aus der Vorschau-HTML. */

/* 2.6 – vier gleichwertige Karten (S. 3, 5): gleich hoch, Knöpfe auf einer Linie und nur einzeilig.
   Ab 1100 px vier Spalten, 600–1099 px 2 × 2, darunter eine. Klasse steht im Seiteninhalt. */
.temana-spalten--kontakt{grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.temana-spalten--kontakt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.temana-spalten--kontakt{grid-template-columns:repeat(4,minmax(0,1fr))}}
.temana-spalten--kontakt .temana-karte{display:flex; flex-direction:column}
.temana-spalten--kontakt .temana-karte > p:last-of-type{margin-bottom:12px}
.temana-spalten--kontakt .temana-karte__knopf{margin-top:auto; align-self:flex-start; white-space:nowrap}
/* Adresse darf umbrechen statt aus der Karte zu ragen (so auch in Claus' Mockup S. 3). */
.temana-spalten--kontakt .temana-karte__detail{margin-top:6px; overflow-wrap:anywhere}

/* 3.1 – Einstieg über die Seitenbreite (S. 4); greift nur im Abschnitt mit dem Formular. */
.temana-sektion:has(.temana-formular) > .wp-block-group__inner-container > p{max-width:none}

/* 3.3/3.10 – Formular als breiter Querformat-Block (S. 4): Name | E-Mail | Telefon, dann Anliegen | Termin,
   Nachricht über die volle Breite, darunter Häkchen links und Knopf rechts. */
#kontaktformular{scroll-margin-top:110px} /* Sprungziel unter einem (künftig) mitlaufenden Kopf, Teilplan 01 Z. 1.1 */
.temana-formular{
	margin:clamp(24px,3vw,34px) 0; padding:clamp(20px,3vw,30px);
	background:var(--weiss); border:1px solid var(--linie); border-radius:14px;
	box-shadow:0 7px 24px rgba(65,57,35,.06);
}
.temana-formular__kopf{margin:0 0 22px}
.temana-formular__kopf h3{margin:0 0 4px; font-size:clamp(1.3rem,2.2vw,1.6rem); color:var(--text)}
.temana-formular__kopf p{margin:0; font-size:15px; color:var(--text-sek)}
.temana-formular__form{margin:0}
.temana-formular__raster{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; align-items:start}
.temana-formular__feld{display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; grid-column:1 / -1}
.temana-formular__feld--drittel{grid-column:span 4}
.temana-formular__feld--haelfte{grid-column:span 6}
.temana-formular__feld > label{font-size:14.5px; font-weight:600; line-height:1.35; color:var(--text)}
.temana-formular__pflicht{color:var(--gruen)}
/* Eingabefelder: 16 px Schrift (kein Zoom unter iOS), Trefferfläche ≥ 48 px, Rand mit 3 : 1 zu Weiß. */
.temana-formular input[type="text"],
.temana-formular input[type="email"],
.temana-formular input[type="tel"],
.temana-formular select,
.temana-formular textarea{
	display:block; width:100%; min-height:48px; margin:0; padding:11px 13px;
	font:inherit; font-size:16px; line-height:1.4; color:var(--text);
	background:var(--weiss); border:1.5px solid #8E8B82; border-radius:8px; box-shadow:none;
}
.temana-formular textarea{min-height:150px; resize:vertical}
.temana-formular ::placeholder{color:#767676; opacity:1}
.temana-formular input:focus,
.temana-formular select:focus,
.temana-formular textarea:focus{border-color:var(--gruen); outline:3px solid rgba(43,114,61,.35); outline-offset:0}
.temana-formular [aria-invalid="true"]{border-color:#8A1C1C}

.temana-formular__abschluss{grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px 24px; align-items:center}
.temana-formular__zustimmung{display:flex; align-items:flex-start; gap:10px; margin:0; max-width:48rem}
.temana-formular__zustimmung input{flex:0 0 auto; width:20px; height:20px; margin:2px 0 0; accent-color:var(--gruen); cursor:pointer}
.temana-formular__zustimmung label{font-size:14px; font-weight:400; line-height:1.5; color:var(--text-sek); cursor:pointer}
.temana-formular__zustimmung.is-fehler label{color:#8A1C1C}
.temana-formular__senden{margin:0}
.temana-formular__senden .wp-element-button{min-height:48px; min-width:190px; white-space:nowrap; cursor:pointer}

.temana-formular__meldung{margin:0 0 18px; padding:12px 16px; border-radius:8px; font-weight:600; line-height:1.5}
.temana-formular__meldung--fehler{background:#FBEAEA; color:#8A1C1C}
.temana-formular__meldung--erfolg{margin:0; background:#EEF5E8; color:var(--gruen-dunkel)}

/* Honigtopf: für Menschen unsichtbar, für Bots ein gewöhnliches Feld. */
.temana-formular__falle{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

@media(max-width:980px){
	.temana-formular__feld--drittel{grid-column:span 6}
	.temana-formular__feld--haelfte{grid-column:1 / -1}
	.temana-formular__abschluss{grid-template-columns:minmax(0,1fr)}
	.temana-formular__senden .wp-element-button{width:100%}
}
@media(max-width:640px){
	.temana-formular__raster{grid-template-columns:minmax(0,1fr)}
	.temana-formular__feld--drittel,
	.temana-formular__feld--haelfte{grid-column:1 / -1}
}

/* 4.1 – Produktfinder als sekundäre Alternative (S. 5): als Zeile, Text links und Knopf rechts;
   mobil gestapelt, Knopf über die volle Breite. Klasse steht im Seiteninhalt. */
.temana-finderleiste{display:grid; gap:4px 24px; align-items:center}
.temana-finderleiste .temana-karte__knopf{margin-top:0; white-space:nowrap}
@media(min-width:641px){
	.temana-finderleiste{grid-template-columns:minmax(0,1fr) auto}
	.temana-finderleiste > h3,
	.temana-finderleiste > p{grid-column:1}
	.temana-finderleiste > .wp-block-button{grid-column:2; grid-row:1 / span 2}
}
@media(max-width:640px){
	.temana-finderleiste > .wp-block-button{margin-top:14px}
	.temana-finderleiste .wp-block-button__link{width:100%}
}