/*
 * Kontaktformular. Alle Klassen mit kf- vorn, damit nichts mit dem Rest
 * der Seite kollidiert. Farben kommen aus den Tokens der Seite (Namen wie
 * in _VORLAGEN/arztpraxis/src/styles/marke.css), mit Rueckfall.
 * Keine style-Attribute, keine Inline-Styles: CSP style-src 'self'.
 */
.kf {
  --kf-akzent: var(--c-akzent, #1f5f5b);
  --kf-rand: var(--c-rand, #c9cfcc);
  --kf-tinte: var(--c-tinte, #1d2320);
  --kf-leise: var(--c-tinte-70, #4a524e);
  --kf-fehler: var(--c-fehler, #a4262c);
  --kf-fokus: var(--c-fokus, #1f5f5b);
  --kf-flaeche: #fff;
  --kf-radius: var(--radius-s, 6px);
  display: grid;
  gap: 1.25rem;
}

.kf-formular { display: grid; gap: 1.25rem; }
.kf-formular[hidden] { display: none; }
.kf-titel { margin: 0; }
.kf-text { margin: 0; color: var(--kf-leise); font-size: var(--fs-small); }

.kf-felder { display: grid; gap: 1rem; }
.kf-feld { display: grid; gap: .4rem; min-width: 0; }
.kf-feld label,
.kf-gruppe legend { font-weight: 600; font-size: var(--fs-small); }
.kf-hilfe { font-size: var(--fs-xs); color: var(--kf-leise); }

.kf-feld input,
.kf-feld select,
.kf-feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .9rem;
  font: inherit;
  color: var(--kf-tinte);
  background: var(--kf-flaeche);
  border: 1.5px solid var(--kf-rand);
  border-radius: var(--kf-radius);
  transition: border-color .2s, box-shadow .2s;
}
.kf-feld textarea { min-height: 8rem; resize: vertical; }
.kf-feld input[type="file"] { padding: .6rem; }
.kf-feld input:focus-visible,
.kf-feld select:focus-visible,
.kf-feld textarea:focus-visible {
  outline: 3px solid var(--kf-fokus);
  outline-offset: 2px;
  border-color: var(--kf-akzent);
}
.kf [aria-invalid="true"] { border-color: var(--kf-fehler); }

.kf-gruppe { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.kf-gruppe legend { padding: 0; margin-bottom: .4rem; }
.kf-wahl { display: flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-small); cursor: pointer; }
.kf-wahl input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--kf-akzent); }

.kf-einwilligung { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: var(--fs-small); }
.kf-einwilligung input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--kf-akzent); }
.kf-einwilligung .kf-fehlertext { grid-column: 1 / -1; }

.kf-fehlertext { margin: .2rem 0 0; color: var(--kf-fehler); font-size: var(--fs-small); font-weight: 600; }

/* Nur fuer Bots: aus dem Blick, aber nicht display:none (das ueberspringen
   manche Bots bewusst). */
.kf-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kf-knopf { justify-self: start; }
.kf-pflichtnote { margin: 0; font-size: var(--fs-xs); color: var(--kf-leise); }

/* Statuszeile im Formular (Fehler, Hinweise) */
.kf-status { margin: 0; padding: .9rem 1.1rem; border-radius: var(--kf-radius); font-weight: 500; }
.kf-status[hidden] { display: none; }
.kf-status[data-art="fehler"] { background: #f9e6e6; color: #7a1f1f; }
.kf-status[data-art="ok"] { background: #e9f3e6; color: #1f4d1f; }

/* Streifen nach dem Absenden. Ohne JavaScript per :target sichtbar
   (Server leitet auf #<formular>-ok), mit JavaScript per data-zeigen. */
.kf-meldung { display: none; padding: 1.1rem 1.25rem; border-radius: var(--kf-radius); }
.kf-meldung:target,
.kf-meldung[data-zeigen] { display: block; }
.kf-meldung--ok { background: #e9f3e6; color: #1f4d1f; }
.kf-meldung p { margin: 0; }
/* Ohne JavaScript nach dem Versand: Formular ausblenden, nur der Dank bleibt. */
.kf-meldung:target ~ .kf-formular { display: none; }
.kf-meldung:focus { outline: 3px solid var(--kf-fokus); outline-offset: 2px; }

@media (min-width: 40rem) {
  .kf-felder--zwei { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kf-feld input, .kf-feld select, .kf-feld textarea { transition: none; }
}