/* lead.css — Kontaktformular, Demo-Anschluss, Newsletter.
 *
 * 🔴 EINE Datei statt Kopien in elf Seiten. Der Newsletter-Block steht auf
 * jeder Seite; wer ihn inline einbaut, pflegt ihn elfmal und vergisst beim
 * naechsten Mal zwei davon.
 *
 * Die Variablen (--dark, --accent, …) kommen aus der jeweiligen Seite. Diese
 * Datei definiert KEINE Farben neu — sonst driftet sie vom Seitenstil weg,
 * sobald dort etwas geaendert wird.
 */

/* ── Rueckrufformular ───────────────────────────────────────────────────── */
.lead-kontakt{max-width:760px;margin:0 auto;background:var(--white,#fff);
  border:1px solid var(--border,#E2E8F0);border-radius:var(--radius,14px);padding:32px}
.lead-kontakt h3{font-family:'Instrument Serif',serif;font-size:26px;font-weight:400;
  letter-spacing:-.5px;margin-bottom:8px;color:var(--dark,#142B3D)}
.lead-kontakt .lead-lead{font-size:15px;color:var(--mid,#475569);margin-bottom:24px}
.lead-reihe{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.lead-reihe{grid-template-columns:1fr}}
.lead-feld{margin-bottom:16px}
.lead-kontakt label{display:block;font-size:13px;font-weight:500;
  color:var(--dark,#142B3D);margin:0 0 6px}
.lead-kontakt label .lead-opt{font-weight:400;color:var(--light,#5C7284)}
.lead-kontakt input[type=text],.lead-kontakt input[type=tel],.lead-kontakt textarea{
  width:100%;padding:11px 14px;font-family:inherit;font-size:15px;color:var(--dark,#142B3D);
  background:var(--bg,#F7FAFD);border:1.5px solid var(--border,#E2E8F0);border-radius:10px;
  transition:border-color .15s}
.lead-kontakt input:focus,.lead-kontakt textarea:focus{outline:none;border-color:var(--accent,#2F6DF6)}
.lead-kontakt textarea{resize:vertical;min-height:84px}

/* 🔴 Der Honigtopf. `display:none` waere falsch — manche Bots pruefen genau
 * darauf und lassen solche Felder aus. Ausserhalb des Sichtfelds und aus dem
 * Tab-Fluss genommen wirkt fuer Menschen gleich und faengt mehr. */
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lead-dsgvo{display:flex;gap:10px;align-items:flex-start;margin:18px 0 22px;
  font-size:13px;color:var(--mid,#475569);line-height:1.5}
.lead-dsgvo input{margin-top:3px;flex-shrink:0;width:16px;height:16px;accent-color:var(--accent,#2F6DF6)}
.lead-dsgvo a{color:var(--accent,#2F6DF6)}
.lead-senden{background:var(--dark,#142B3D);color:var(--white,#fff);border:none;padding:13px 30px;
  border-radius:100px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s}
.lead-senden:hover{background:var(--dark-soft,#24455F)}
.lead-senden[disabled]{opacity:.55;cursor:default}
.lead-fuss{font-size:12.5px;color:var(--light,#5C7284);margin-top:16px}

/* Rueckmeldung. `aria-live` sorgt dafuer, dass ein Screenreader sie vorliest —
 * eine Bestaetigung, die nur sichtbar ist, kommt bei manchen nie an. */
.lead-meldung{margin-top:16px;font-size:14px;padding:12px 16px;border-radius:10px;display:none}
.lead-meldung.ok{display:block;background:#DCFCE7;color:#14532D;border:1px solid #86EFAC}
.lead-meldung.fehler{display:block;background:#FEE2E2;color:#7F1D1D;border:1px solid #FCA5A5}

/* ── Anschluss unter der Live-Demo ──────────────────────────────────────── */
.lead-demo{border-top:1px solid var(--border,#E2E8F0);padding-top:22px;margin-top:26px;text-align:center}
.lead-demo p.lead-frage{font-size:16px;color:var(--dark,#142B3D);margin-bottom:14px;font-weight:500}
.lead-zeile{display:flex;gap:10px;max-width:420px;margin:0 auto}
@media(max-width:560px){.lead-zeile{flex-direction:column}}
.lead-zeile input{flex:1;padding:11px 14px;font-family:inherit;font-size:15px;
  background:var(--white,#fff);border:1.5px solid var(--border,#E2E8F0);border-radius:10px}
.lead-zeile input:focus{outline:none;border-color:var(--accent,#2F6DF6)}
.lead-zeile button{background:var(--accent,#2F6DF6);color:#fff;border:none;padding:11px 24px;
  border-radius:10px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.lead-zeile button[disabled]{opacity:.55;cursor:default}

/* ── Newsletter in der Fusszeile ────────────────────────────────────────── */
.lead-news{border-top:1px solid rgba(255,255,255,.10);margin-top:8px;padding:28px 0 4px}
.lead-news-inner{max-width:1100px;margin:0 auto;padding:0 48px}
@media(max-width:640px){.lead-news-inner{padding:0 24px}}
.lead-news h3{font-family:'Instrument Serif',serif;font-size:20px;font-weight:400;
  margin-bottom:6px;color:inherit}
.lead-news p{font-size:13.5px;margin-bottom:16px;max-width:460px;opacity:.85}
.lead-news-zeile{display:flex;gap:10px;max-width:460px}
@media(max-width:560px){.lead-news-zeile{flex-direction:column}}
.lead-news-zeile input{flex:1;padding:10px 14px;font-family:inherit;font-size:15px;
  border:1.5px solid var(--border,#E2E8F0);background:var(--white,#fff);
  color:var(--dark,#142B3D);border-radius:10px}
.lead-news-zeile input:focus{outline:none;border-color:var(--accent,#2F6DF6)}
.lead-news-zeile button{background:var(--dark,#142B3D);color:#fff;border:none;padding:10px 22px;
  border-radius:10px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.lead-news-zeile button[disabled]{opacity:.55;cursor:default}
.lead-news .lead-klein{font-size:12px;margin:12px 0 0;max-width:460px;opacity:.7}