/* ═══════════════════════════════════════════════════════════
   Kontaktformular — passt zum Erdmann-Designsystem
   ═══════════════════════════════════════════════════════════ */

.cf-form {
  display: flex; flex-direction: column; gap: 22px;
  margin-top: 30px;
}

.cf-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}

@media (max-width: 640px) {
  .cf-row { grid-template-columns: 1fr; }
}

.cf-field {
  display: flex; flex-direction: column; gap: 8px;
}

/* Feldbeschriftung: 12 px Versalien sind die kleinste Schrift im
   Formular und dürfen deshalb am wenigsten blass sein. Mit .55
   Deckung lag sie bei 4,14:1 — --quiet-dark (.62) bringt 4,66:1
   und ist derselbe Ton, den die Seite überall für Nebentext nutzt. */
.cf-field span {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--quiet-dark);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: #fff;
  color: var(--ink-warm);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}

.cf-field textarea {
  resize: vertical;
  min-height: 160px;
  font-family: var(--sans);
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(97, 179, 70, .18);
}

.cf-check {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.55; color: rgba(11,13,12,.72);
  cursor: pointer;
}

.cf-check input[type="checkbox"] {
  width: 20px; height: 20px; flex: none;
  margin-top: 3px;
  accent-color: var(--green);
  cursor: pointer;
}

/* Der Link zur Datenschutzerklärung steht auf Creme — dort gilt die
   abgedunkelte Fassung des Signalgrüns (--green hätte 2,27:1). */
.cf-check a { color: var(--green-text); border-bottom: 1px solid var(--green-text); }

.cf-form button {
  align-self: flex-start;
  margin-top: 8px;
}

.cf-status {
  font-size: 14.5px; line-height: 1.6;
  min-height: 1.4em;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 4px;
}

.cf-status:empty { display: none; }

.cf-status.is-ok {
  background: rgba(97, 179, 70, .13);
  color: var(--green-deep);
  border-left: 3px solid var(--green);
}

.cf-status.is-err {
  background: rgba(200, 40, 40, .08);
  color: #a02020;
  border-left: 3px solid #c82828;
}

/* ── Blogpost-Typografie (nutzt .lead__body als Container) ── */
.lead__body h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.25; letter-spacing: -.01em;
  margin-top: 2.2em; margin-bottom: .4em;
}
.lead__body h2:first-child { margin-top: 1em; }