/* Kontaktformular – Aussehen.
   Farben und Abstände über Variablen anpassbar, z. B. in der eigenen style.css:
   .kf { --kf-akzent: #8C499E; --kf-feld-grund: #1a1a1a; --kf-widget-grund: #1a1a1a; --kf-widget-text: #FAF0D9; } */
.kf {
  --kf-akzent: #3b5bdb;          /* Knopf, Fokusrahmen */
  --kf-knopf-text: #ffffff;
  --kf-text: inherit;
  --kf-leise: color-mix(in srgb, currentColor 65%, transparent);
  --kf-feld-grund: transparent;
  --kf-rand: color-mix(in srgb, currentColor 40%, transparent);
  --kf-fehler: #c0392b;
  --kf-flaeche: color-mix(in srgb, currentColor 7%, transparent);
  --kf-radius: 6px;
  --kf-widget-grund: #ffffff;    /* Hintergrund des Kästchens „Ich bin kein Roboter“ */
  --kf-widget-text: #1a1a1a;
  max-width: 40rem;
  color: var(--kf-text);
}
.kf-ueberschrift { margin: 0 0 1rem; }
.kf-hinweis { margin-bottom: 1.25rem; }
.kf-feld { margin-bottom: 1.1rem; }
.kf-feld label { display: block; margin-bottom: .3rem; font-weight: 700; }
.kf-zusatz { font-weight: 400; color: var(--kf-leise); }
.kf-feld input,
.kf-feld textarea {
  display: block; width: 100%; box-sizing: border-box;
  padding: .6rem .75rem; font: inherit; color: inherit;
  background: var(--kf-feld-grund); border: 1px solid var(--kf-rand); border-radius: var(--kf-radius);
}
.kf-feld textarea { min-height: 9rem; resize: vertical; }
.kf-feld input:focus-visible,
.kf-feld textarea:focus-visible { outline: 3px solid var(--kf-akzent); outline-offset: 1px; }
.kf [aria-invalid="true"] { border: 2px solid var(--kf-fehler); }
.kf-fehler { margin: .3rem 0 0; font-size: .92em; color: var(--kf-fehler); }
.kf-meldung { margin: 0 0 1.25rem; padding: .8rem 1rem; border-left: 4px solid var(--kf-fehler); background: var(--kf-flaeche); }
.kf-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kf-knopf {
  padding: .7rem 1.4rem; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--kf-knopf-text); background: var(--kf-akzent); border: 0; border-radius: var(--kf-radius);
}
.kf-knopf:disabled { opacity: .6; cursor: wait; }
.kf-datenschutz { margin-top: 1rem; font-size: .92em; color: var(--kf-leise); }
.kf-datenschutz p { margin: 0; }
.kf-erfolg { padding: 1rem 1.25rem; border-left: 4px solid var(--kf-akzent); background: var(--kf-flaeche); }
.kf altcha-widget {
  --altcha-max-width: 100%;
  --altcha-border-radius: var(--kf-radius);
  --altcha-color-primary: var(--kf-akzent);
  --altcha-color-base: var(--kf-widget-grund);
  --altcha-color-base-content: var(--kf-widget-text);
  --altcha-border-color: var(--kf-rand);
}