/* Kontaktformular – gemeinsame Gestaltung für alle ATXX-Websites.
   Farben über Variablen; Allmos überschreibt sie mit .ate-kontakt--allmos. */
.ate-kontakt {
  --kf-navy: #002649;
  --kf-akzent: #952888;
  --kf-rand: #c9d1d9;
  --kf-flaeche: #fff;
  --kf-fehler: #b3261e;
  --kf-ok: #1e6b3a;
  font-family: Roboto, Arial, sans-serif;
  color: var(--kf-navy);
  max-width: 820px;
  margin: 0 0 1.5rem;
  text-align: left;
}
.ate-kontakt--allmos { --kf-navy: #10253F; --kf-akzent: #8B3089; font-family: Calibri, Verdana, Arial, sans-serif; }

.ate-kontakt__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
@media (max-width: 640px) { .ate-kontakt__reihe { grid-template-columns: 1fr; } }

.ate-kontakt__feld { display: flex; flex-direction: column; margin-bottom: 1rem; }
.ate-kontakt__feld label { font-size: .9rem; font-weight: 700; margin-bottom: .35rem; }
.ate-kontakt input[type="text"],
.ate-kontakt input[type="email"],
.ate-kontakt input[type="tel"],
.ate-kontakt textarea {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--kf-navy);
  background: var(--kf-flaeche);
  border: 1px solid var(--kf-rand);
  border-radius: 0;
  padding: .65rem .75rem;
  margin: 0;
  box-shadow: none;
  height: auto;
}
.ate-kontakt textarea { min-height: 9rem; resize: vertical; }
.ate-kontakt input:focus,
.ate-kontakt textarea:focus { outline: 2px solid var(--kf-akzent); outline-offset: 1px; border-color: var(--kf-akzent); }

.ate-kontakt__check { display: flex; gap: .6rem; align-items: flex-start; margin: .25rem 0 1rem; font-size: .9rem; line-height: 1.45; }
.ate-kontakt__check input { margin: .2rem 0 0; width: 1.1rem; height: 1.1rem; flex: 0 0 auto; accent-color: var(--kf-akzent); }
.ate-kontakt__check a, .ate-kontakt__hinweis a { color: var(--kf-akzent); text-decoration: underline; }

.ate-kontakt__feld--fehler input,
.ate-kontakt__feld--fehler textarea { border-color: var(--kf-fehler); outline: 1px solid var(--kf-fehler); }
.ate-kontakt__check.ate-kontakt__feld--fehler { color: var(--kf-fehler); }

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet */
.ate-kontakt__hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.ate-kontakt__hinweis { font-size: .8rem; color: #4a5a6b; margin: 0 0 1rem; line-height: 1.4; }

.ate-kontakt__senden {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--kf-navy);
  border: 2px solid var(--kf-navy);
  border-radius: 0;
  padding: .75rem 1.6rem;
  cursor: pointer;
}
.ate-kontakt__senden:hover,
.ate-kontakt__senden:focus-visible { background: var(--kf-akzent); border-color: var(--kf-akzent); }
.ate-kontakt__senden:disabled { opacity: .6; cursor: wait; }

.ate-kontakt__status { min-height: 1.4em; margin: .75rem 0 0; font-size: .95rem; }
.ate-kontakt__status--fehler { color: var(--kf-fehler); font-weight: 700; }

.ate-kontakt__danke { padding: 1rem 1.25rem; border-left: 4px solid var(--kf-ok); background: #eef6f0; color: var(--kf-ok); font-weight: 700; max-width: 820px; }

.ate-kontakt__alternativ { font-size: .9rem; margin: .5rem 0 0; }
.ate-kontakt__alternativ a { color: inherit; text-decoration: underline; }