/* Stoll Kontakt-Formular — einspaltig, Labels immer sichtbar, Standort als
 * Pills, Live-Validierung (Haekchen/Shake), Button aktiviert sich erst wenn
 * gueltig. Herleitung: Formular-Vorschlag-Artifact 29.07.2026 (Baymard/Stripe).
 * Bewusst --ink-600/--sand-200/--gold-* statt --text-body/--border-default:
 * letztere kollidieren mit von Elementor selbst generierten CSS-Variablen
 * gleichen Namens (siehe Leistungs-Icons-Fund, R19). */

.pst-kf { max-width:560px; }
.pst-kf__field { margin-bottom:22px; }
/* FIX 03.08 (Joe, Mobile-Spacing-Bruch 46/28/6px): last-of-type greift PRO
 * ELTERNELEMENT — das letzte Feld JEDER .pst-kf__row verlor sein margin
 * (6px vor "Ihr Anliegen"). Nur das letzte DIREKTE Formular-Kind wird
 * entlueftet; Felder in Rows behalten den globalen 22px-Rhythmus. */
.pst-kf__form > .pst-kf__field:last-of-type { margin-bottom:0; }

/* M9 (Handoff 01.08.2026): statisches Label 700 15px UEBER dem Feld;
 * Input-Rahmen --border-control statt sand-200 (17.2, WCAG 1.4.11);
 * Fokus gold-700 + Ring; Input 17px, Padding 14/16. */
.pst-kf__field label {
	display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700;
	color:var(--ink-800, #333); margin-bottom:8px; font-family:inherit;
}
.pst-kf__req { color:var(--gold-800, #7D6529); }
.pst-kf__opt { color:var(--text-muted); font-weight:400; }

.pst-kf__wrap { position:relative; }
.pst-kf input[type=text], .pst-kf input[type=email],
.pst-kf input[type=tel]:not(.pst-telrow__num), .pst-kf textarea, .pst-kf select:not(.pst-telrow__dial) {
	width:100%; font-family:inherit; font-size:17px; color:var(--ink-900, #262626);
	background:var(--white, #fff); border:1px solid var(--border-control, #8A857B); border-radius:var(--pst-radius-sm, 4px);
	padding:14px 42px 14px 16px; transition:border-color .15s ease, background-color .15s ease;
}
.pst-kf select:not(.pst-telrow__dial) {
	appearance:none; -webkit-appearance:none; cursor:pointer;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2355524B' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 15px center;
}
.pst-kf select:has(option[value=""]:checked) { color:var(--text-muted); }
.pst-kf textarea { padding-right:15px; min-height:110px; resize:vertical; line-height:1.5; }
.pst-kf input::placeholder, .pst-kf textarea::placeholder { color:var(--text-muted); }
.pst-kf input:focus, .pst-kf textarea:focus {
	outline:none; border-color:var(--focus-border, #93783D); background:#fff;
	box-shadow:var(--focus-ring, 0 0 0 3px rgba(147,120,61,.22));
}
.pst-kf__field.is-valid input, .pst-kf__field.is-valid textarea { border-color:var(--success, #4E7A3A); }
.pst-kf__field.is-invalid input, .pst-kf__field.is-invalid textarea { border-color:var(--error, #A8442F); }
.pst-kf__field.is-invalid { animation:pst-kf-shake .32s ease; }
@keyframes pst-kf-shake {
	10%,90%{ transform:translateX(-1px); } 20%,80%{ transform:translateX(2px); }
	30%,50%,70%{ transform:translateX(-4px); } 40%,60%{ transform:translateX(4px); }
}
@media (prefers-reduced-motion:reduce) { .pst-kf__field.is-invalid { animation:none; } }

.pst-kf__ok, .pst-kf__err {
	position:absolute; right:14px; top:50%; transform:translateY(-50%) scale(.4); width:20px; height:20px;
	opacity:0; transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.pst-kf__field.is-valid .pst-kf__ok { opacity:1; transform:translateY(-50%) scale(1); }
.pst-kf__field.is-invalid .pst-kf__err { opacity:1; transform:translateY(-50%) scale(1); }
.pst-kf textarea ~ .pst-kf__ok, .pst-kf textarea ~ .pst-kf__err { top:24px; transform:translateY(0) scale(.4); }
.pst-kf__field.is-valid textarea ~ .pst-kf__ok { transform:translateY(0) scale(1); }

.pst-kf__errmsg {
	font-size:14px; color:var(--error, #A8442F); margin-top:6px; max-height:0; overflow:hidden;
	transition:max-height .18s ease, margin-top .18s ease;
}
.pst-kf__field.is-invalid .pst-kf__errmsg { max-height:44px; margin-top:6px; }

.pst-kf__consent { margin-top:4px; margin-bottom:6px; }
.pst-kf__consent label { display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--ink-800, #333); cursor:pointer; line-height:1.5; }
.pst-kf__consent input[type=checkbox] {
	flex-shrink:0; width:20px; height:20px; margin-top:1px; accent-color:var(--ink-800, #333); cursor:pointer;
}
.pst-kf__consent a { color:var(--ink-900, #262626); text-decoration:underline; text-underline-offset:2px; }

.pst-kf__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* Submit-Button: .stoll-btn.stoll-btn--primary uebernimmt die eigentliche
 * Optik (Gold, scharfe Kanten, 17px/30px Padding, Carnas-Font) -- exakt
 * dieselbe Komponente wie jeder andere primaere Button auf der Seite,
 * statt einer eigenen abweichenden Formular-Button-Optik (Fund 01.08.2026,
 * Joe: "grobe UX-Fehler... entspricht ueberhaupt nicht der CI"). Hier nur
 * noch die formular-spezifischen Zustaende (disabled/loading). */
.pst-kf__submitrow { margin-top:28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.pst-kf__submit[disabled] { opacity:.4; cursor:not-allowed; }
.pst-kf__submit.is-loading { cursor:progress; }
.pst-kf__spinner {
	width:15px; height:15px; border-radius:50%; border:2px solid rgba(38,38,38,.25); border-top-color:var(--ink-900, #262626);
	animation:pst-kf-spin .7s linear infinite; display:none;
}
.pst-kf__submit.is-loading .pst-kf__spinner { display:inline-block; }
.pst-kf__submit.is-loading .pst-kf__submitlabel { display:none; }
@keyframes pst-kf-spin { to { transform:rotate(360deg); } }

.pst-kf__hint { font-size:14px; color:var(--text-muted); }
.pst-kf__apierr {
	margin-top:14px; font-size:13px; color:var(--error, #A8442F); background:rgba(168,68,47,.08);
	border:1px solid rgba(168,68,47,.25); border-radius:8px; padding:10px 14px;
}

.pst-kf__success { text-align:center; padding:40px 20px; }
/* B-03 (05/M9b): Anamnese-Block NUR im Erfolgspanel. Begleit-Icons 32px
 * (17.5-Mindestgroesse), gold-600 auf sand-50-Box. */
.pst-kf__anamnese { margin-top:28px; padding:22px 24px; background:var(--sand-50, #FBF9F5); border:1px solid var(--border-decor, #EAE3D3); text-align:left; }
.pst-kf__anamnese-title { margin:0 0 4px; font-size:15px; font-weight:700; color:var(--ink-800, #333); font-family:inherit; }
.pst-kf__anamnese-sub { margin:0 0 14px; font-size:14px; color:var(--ink-600, #55524B); line-height:1.5; }
.pst-kf__anamnese-link { display:flex; align-items:center; gap:12px; padding:9px 0; color:var(--ink-900, #262626); font-size:15px; font-weight:600; text-decoration:none; }
.pst-kf__anamnese-link + .pst-kf__anamnese-link { border-top:1px solid var(--border-decor, #EAE3D3); }
.pst-kf__anamnese-link:hover span { color:var(--gold-800, #7D6529); text-decoration:underline; text-underline-offset:2px; }
.pst-kf__anamnese-ico { flex:none; width:32px; height:32px; background:var(--gold-600, #B3954F); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; }
/* B-06 (16/M9b): eckiges grad-gold-Quadrat 64px + weisser Haken — Kreise nur Hero-Dots */
.pst-kf__successicon {
	width:64px; height:64px; border-radius:0; background:var(--grad-gold, linear-gradient(135deg, #D6BF88 0%, #CBAE6B 55%, #B3954F 100%)); color:#fff;
	display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px; font-weight:700;
}
.pst-kf__success h3 { font-size:19px; font-weight:700; color:var(--ink-900, #262626); margin:0 0 8px; font-family:inherit; }
.pst-kf__success p { font-size:14px; color:var(--ink-600, #55524B); margin:0; line-height:1.55; }

@media (max-width:480px) {
	.pst-kf__submitrow { flex-direction:column; align-items:stretch; }
	.pst-kf__submit { justify-content:center; }
}


/* ── M9b (Task #13): Reihen, Anliegen-Chips, bedingte Bloecke, Kontakt-Zeile ── */
.pst-kf__row { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.pst-kf__contactrow { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:560px) { .pst-kf__row, .pst-kf__contactrow { grid-template-columns:1fr; } }
.pst-kf__chips { display:flex; flex-wrap:wrap; gap:8px; }
/* Joe 03.08 (Live): kompakter als Artboard-2a (10/18/44) — "viel zu fett,
 * muss in EINE Zeile passen"; bewusste Joe-Korrektur nach Go-Live. */
.pst-kf__chip { border:1px solid var(--border-control, #8A857B); border-radius:0; background:var(--white, #fff); color:var(--ink-800, #333); font:400 14px/1 var(--font-brand, inherit); padding:8px 13px; min-height:38px; white-space:nowrap; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease; }
.pst-kf__chip:focus { outline:none; }
.pst-kf__chip:focus-visible { outline:2px solid var(--gold-700, #93783D); outline-offset:2px; }
.pst-kf__chip:hover { border-color:var(--gold-700, #93783D); background:var(--sand-50, #FAF8F4); }
.pst-kf__chip.is-active { background:var(--gold-500, #CBAE6B); border-color:var(--gold-700, #93783D); color:var(--ink-900, #262626); font-weight:700; }
.pst-kf__alert { margin:0 0 22px; padding:16px 20px; background:var(--sand-50, #FBF9F5); border-left:3px solid var(--gold-500, #CBAE6B); font-size:15px; line-height:1.55; color:var(--ink-800, #333); }
.pst-kf__alert a { color:var(--ink-900, #262626); font-weight:700; white-space:nowrap; }
.pst-kf__wunschtermin { margin-top:12px; }
.pst-kf__hintline { margin:-8px 0 22px; font-size:14px; color:var(--text-muted); }
.pst-kf__reset { margin-top:18px; border:1px solid var(--border-control, #8A857B); border-radius:0; background:transparent; color:var(--ink-800, #333); font:700 15px/1 var(--font-brand, inherit); padding:13px 22px; cursor:pointer; }
.pst-kf__reset:hover { border-color:var(--gold-500, #CBAE6B); color:var(--gold-800, #7D6529); }
[data-stoll-theme="dark"] .pst-kf__chip { background:transparent; color:#fff; }
[data-stoll-theme="dark"] .pst-kf__chip.is-active { background:var(--gold-500, #CBAE6B); color:#262626; }
[data-stoll-theme="dark"] .pst-kf__alert { color:#fff; background:rgba(255,255,255,.07); }
[data-stoll-theme="dark"] .pst-kf__alert a { color:#fff; }
[data-stoll-theme="dark"] .pst-kf__reset { color:#fff; }

/* ── M9c Terminanfrage-Kurzform (Modal, Artboard 3b) ── */
.pst-kf--termin { max-width:560px; }
.pst-kf__modaltitle { margin:0 0 6px; font:800 24px/1.2 var(--font-brand, inherit); color:var(--ink-900, #262626); }
.pst-kf__modalintro { margin:0 0 24px; font-size:15px; line-height:1.5; color:var(--ink-600, #55524B); }
.pst-kf__submit--full { width:100%; justify-content:center; }
.pst-kf__hintline a { color:var(--gold-800, #7D6529); font-weight:600; }

/* ── Kontaktseite (562): Wrap-Gutter — Elementor-4-Container-Default (10px)
 * liess H1/Formular am Viewport-Rand kleben (Fund 03.08). ── */
.elementor-562 .e-con-boxed > .e-con-inner { padding-inline: 32px; }

/* ── Wunschzeitraum-Segmente (03.08, Claude-Design-Referenzbild Termin-Modal):
 * aktiv = Ink-Flaeche mit weissem Text — bewusst ANDERS als die goldenen
 * Anliegen-Chips (zwei verschiedene Auswahl-Typen). ── */
.pst-kf__chip[data-wunsch].is-active { background: var(--ink-800, #333); border-color: var(--ink-800, #333); color: #fff; }