/* Kontaktformular der Website. Baut auf app.css auf (Farben, Schrift, .legal, .btn). Kein Inline-Stil:
   CSP der Website erlaubt nur style-src 'self'. Alle Bedienelemente mindestens 44 px hoch (Finger), Schrift 16 px in den
   Feldern (sonst vergroessert iOS beim Antippen). */
.kf-seite{--kf-fehler:#B42318;--kf-fehler-bg:#FEF3F2;--kf-fehler-line:#F4B5AE;}
.kf{display:grid;gap:20px;margin:28px 0 8px;}
.kf__feld{display:grid;gap:6px;}
.kf__feld > label{font:600 15px/1.4 var(--f-sans);color:var(--ink);}
.kf input[type=text],.kf input[type=email],.kf textarea{
  width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--field-line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:400 16px/1.5 var(--f-sans);box-shadow:none;-webkit-appearance:none;appearance:none;}
.kf textarea{min-height:176px;resize:vertical;}
.kf input[type=text]:focus-visible,.kf input[type=email]:focus-visible,.kf textarea:focus-visible{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand-strong);}
/* nach den Feldregeln und gleich spezifisch, damit die Fehlerfarbe gewinnt */
.kf input[aria-invalid=true],.kf textarea[aria-invalid=true]{border-color:var(--kf-fehler);}
.legal .kf__fehler{margin:0;color:var(--kf-fehler);font-size:14.5px;line-height:1.5;}
.legal .kf__hinweis{margin:0;color:var(--dim);font-size:14px;line-height:1.5;}
.kf__feld--check{grid-template-columns:auto 1fr;align-items:start;column-gap:12px;}
.kf__feld--check input{width:24px;height:24px;margin:10px 0 0;accent-color:var(--brand-strong);cursor:pointer;}
.kf__feld--check > label{font:400 15.5px/1.55 var(--f-sans);color:var(--text);padding:10px 0;cursor:pointer;}
.kf__feld--check > label a{color:var(--brand-strong);}
.kf__feld--check .kf__fehler{grid-column:1 / -1;}
/* Honigtopf: für Menschen unsichtbar und nicht erreichbar (aria-hidden, tabindex -1), für einfache Bots ein normales Feld */
.kf__hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
.legal .kf__status{margin:0;padding:12px 14px;border:1px solid var(--kf-fehler-line);border-radius:var(--r);background:var(--kf-fehler-bg);color:var(--ink);font-size:15px;line-height:1.55;}
.kf__status a{color:var(--brand-strong);}
.kf__senden{justify-self:start;min-height:50px;}
.kf__senden[disabled]{opacity:.7;cursor:progress;}
.legal .kf__klein{margin:0;color:var(--dim);font-size:14px;line-height:1.5;}
.kf__danke{margin:28px 0 8px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ok-bg);}
.legal .kf__danke h2{margin:0 0 8px;}
.kf__danke h2:focus{outline:none;}
.kf__danke h2:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
@media (max-width:600px){
  .kf__senden{justify-self:stretch;width:100%;}
  .kf__danke .btn{width:100%;}
}