/* Contacto — an der Live-Site gemessen (1440 und 390 px, 17.08.2026).
   Farben am 19.08.2026 auf das Kit umgestellt; der Sektionsgrund liegt
   jetzt als Preset "marfim-quente" im Pattern statt als Literal hier.

   Die frueher EINE Variable --mayor-feld-linie hatte ZWEI Jobs: sie
   faerbte die Unterstriche der Felder (ein Bedienelement, 3:1 gefordert)
   UND den Hinweistext in .mayor-form__row (12.48 px Text, 4.5:1
   gefordert). Ein Wert kann beides nicht erfuellen — #969088 auf dem
   alten Grund lag bei ~2.8:1 und ist an BEIDEN Anforderungen
   gescheitert. Darum getrennte Variablen.

   NACHTRAG 19.08.2026: der Sektionsgrund ist von Marfim quente auf
   Areia quente #E8D5B7 gewechselt, weil #F5F0E8 sich vom Seitengrund
   #FAF6EF praktisch nicht abhob (1.05:1) — die Kontakt-Sektion war als
   eigener Abschnitt nicht mehr erkennbar. Der dunklere Grund macht aber
   die Linienfarbe neu berechnungspflichtig, und Latao faellt durch:
     Latao envelhecido #A67C3D auf #E8D5B7 = 2.63:1  ZU SCHWACH
     Latao            #B8934A auf #E8D5B7 = 2.00:1  ZU SCHWACH
   Beide reissen die 3:1 fuer ein Bedienelement. Darum tragen Linie und
   Text jetzt denselben Ton:
     Linie + Text -> Castanho quente #6B4226 auf #E8D5B7 = 6.02:1
   Merke: eine Vordergrundfarbe ohne ihren Hintergrund ist keine
   Entscheidung. Aendert sich der Grund, ist jede Farbe darauf neu zu
   pruefen — auch die, die vorher bestanden hat. */

.mayor-kontakt {
  --mayor-feld-label: var(--wp--preset--color--castanho-quente);
  --mayor-feld-linie: var(--wp--preset--color--castanho-quente);
  --mayor-feld-text:  var(--wp--preset--color--castanho-quente);
}

/* max-width 62ch = gemessene 600.5px bei 14.72px Montserrat */
.mayor-kontakt__inner {
  max-width: 62ch;
  margin-inline: auto;
}

.mayor-kontakt .mayor-eyebrow { margin-block: 0 1.1rem; }
.mayor-kontakt__title { margin-block: 0 1.75rem; }

.mayor-form {
  display: grid;
  gap: 1rem;                 /* gemessen 16px */
  max-width: 560px;
  margin: 0;
}

.mayor-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 760px) {
  .mayor-form__row { grid-template-columns: 1fr; }
}

.mayor-form__field { display: grid; gap: 7px; }

.mayor-form__field label {
  font-size: .7rem;          /* gemessen 11.2px */
  letter-spacing: .16em;     /* gemessen 1.792px */
  text-transform: uppercase;
  font-weight: 300;
  color: var(--mayor-feld-label);
}

.mayor-form__field input,
.mayor-form__field textarea {
  font-family: var(--wp--preset--font-family--body);
  font-size: .95rem;         /* gemessen 15.2px */
  font-weight: 300;
  color: var(--wp--preset--color--castanho);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mayor-feld-linie);
  border-radius: 0;
  padding: .7em .2em;        /* gemessen 10.64px / 3.04px */
  width: 100%;
  transition: border-color .3s cubic-bezier(.16, 1, .3, 1);
}
.mayor-form__field textarea { min-height: 74px; resize: vertical; }

/* Sichtbarer Fokus ist Teil des Designsystems, nicht Zierde. */
.mayor-form__field input:focus-visible,
.mayor-form__field textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--wp--preset--color--terracota);
}

/* Honeypot: fuer Menschen unerreichbar, fuer Bots verlockend.
   Bewusst nicht display:none — manche Bots ignorieren solche Felder. */
.mayor-form__hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  overflow: hidden;
}

/* Absendeknopf: gleiche Werte wie der Kernblock-Button, aber als
   echtes <button type="submit"> — ein wp:button kann das nicht sein. */
.mayor-formbtn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  /* kein gap: der Pfeil hinter der Beschriftung ist entfernt
     (Stefan, 18.08.2026), ein Abstand ohne zweites Kind waere sinnlos */
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--button);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Handlungston, gleich wie elements.button in der theme.json:
     Weiss auf Azul noite = 15.56:1. Terracota escuro lag mit Marfim bei
     4.01:1 und mit Weiss bei 3.59:1 — beides zu schwach fuer 13-px-Text. */
  color: #FFFFFF;
  background: var(--wp--preset--color--azul-noite);
  border: 0;
  border-radius: 2px;
  padding: 1.05em 2.1em;
  cursor: pointer;
}
.mayor-formbtn[disabled] { opacity: .55; cursor: progress; }

.mayor-form__note {
  font-size: .78rem;         /* gemessen 12.48px */
  color: var(--mayor-feld-text);
  margin: 0;
}

.mayor-form__status { margin: 0; font-size: .86rem; }
.mayor-form__status:empty { display: none; }
.mayor-form__status[data-zustand="ok"]     { color: var(--wp--preset--color--castanho); }
/* BEWUSSTE AUSNAHME vom Kit (Stefan, 19.08.2026). Das Kit kennt keine
   Fehlerfarbe, weil Fehlerfarben funktional sind und nicht zur Marke
   gehoeren. Eine Fehlermeldung in Terracota liest sich nicht als Fehler,
   sondern als Zierde — und dieses Formular ist der einzige Weg, auf dem
   Maria Anfragen bekommt. Darum bleibt Rot. */
.mayor-form__status[data-zustand="fehler"] { color: #A8322A; }