/* Kontaktformulare (haendler.html) – Felder als Tonflächen, keine Rahmen, Fokus gelb */
.form{display:grid;gap:20px;margin:0}
.form[hidden]{display:none}
.form-erfolg:focus,.form-erfolg:focus-visible{outline:none}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-feld{display:grid;gap:8px}
.form-feld label{font-weight:600;color:var(--ink);font-size:var(--step-0)}
.form-feld .opt{font-weight:400;color:var(--ink-2)}
.form input,.form textarea{width:100%;border:0;background:var(--sky);color:var(--ink);font:400 var(--step-0)/1.4 var(--text);padding:14px 16px;margin:0;appearance:none;-webkit-appearance:none;border-radius:0}
.form textarea{min-height:140px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#7A8794}
.form input:focus-visible,.form textarea:focus-visible{outline:3px solid var(--deep);outline-offset:0;box-shadow:none}
.form .is-invalid input,.form .is-invalid textarea{background:#FDEEEA}
.form-fehler{display:none;color:#A3231A;font-size:var(--step--1);font-weight:500;margin:0}
.form .is-invalid .form-fehler{display:block}
.form-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.form-check input{width:22px;height:22px;margin:3px 0 0;background:var(--sky);accent-color:var(--blue);appearance:auto;-webkit-appearance:auto;padding:0}
.form-check label{font-weight:400;color:var(--ink)}
.form-check.is-invalid input{outline:3px solid #A3231A;outline-offset:0}
.form-check .form-fehler{grid-column:2}
.form-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* taste-skill-ignore: verstecktes Spam-Schutzfeld */
.form-send{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}
.form-send .btn{font-family:var(--text)}
.form-status{margin:0;color:#A3231A;font-weight:500;display:none}
.form-status.is-on{display:block}
.form-erfolg{display:none;background:var(--paper);padding:clamp(24px,3vw,40px);color:var(--ink)}
.form-erfolg.is-on{display:block}
.form-erfolg h3{font-size:var(--step-2);margin-bottom:.3em}
.form-erfolg p{margin:0}
.form-erfolg p + p{margin-top:.6em}
/* Formular auf farbiger Fläche: Felder weiß statt sky */
.field-sky .form input,.field-sky .form textarea{background:var(--paper)}
.field-yellow .form input,.field-yellow .form textarea{background:var(--paper)}
.field-yellow .form-feld label,.field-yellow .form-check label{color:var(--yellow-ink)}
.field-sky .form-erfolg,.field-cream .form-erfolg{background:var(--paper)}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
  .form-send .btn{width:100%;text-align:center}
}