/* ============================================================
   formular.css - Kontaktformular
   Gleiche Haltung wie der Rest: keine Rundungen, keine Schatten,
   Haarlinien statt Kästen.
   ============================================================ */

.formular {
  margin-top: var(--raum-4);
  max-width: 44rem;
}

.formular__reihe {
  display: grid;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}

@media (min-width: 680px) {
  .formular__reihe--zwei { grid-template-columns: 1fr 1fr; }
}

.feld {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.feld__name {
  font-size: var(--text-meta);
  letter-spacing: var(--sperr-meta);
  text-transform: uppercase;
  color: var(--farbe-tinte-leise);
}

.feld__optional {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-meta);
}

.feld input,
.feld textarea {
  font-family: var(--schrift-grotesk);
  font-size: var(--text-body);
  line-height: var(--zeile-text);
  color: var(--farbe-tinte);
  background-color: transparent;
  border: 1px solid var(--linie-stark);
  border-radius: 0;
  padding: .7em .85em;
  width: 100%;
  transition: border-color var(--dauer-schnell) var(--kurve),
              background-color var(--dauer-schnell) var(--kurve);
  -webkit-appearance: none;
  appearance: none;
}

.feld textarea {
  min-height: 11rem;
  resize: vertical;
}

.feld input:hover,
.feld textarea:hover {
  background-color: var(--farbe-flaeche-leicht);
}

.feld input:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--farbe-tinte);
  background-color: var(--farbe-flaeche-leicht);
}

.feld input:focus-visible,
.feld textarea:focus-visible {
  outline: 2px solid var(--farbe-signal);
  outline-offset: 2px;
}

/* ---- Fehlermeldungen ---------------------------------------
   Werden von js/formular.js eingeblendet. Ohne JavaScript
   übernimmt die Browser-Validierung.
------------------------------------------------------------- */
.feld__fehler {
  font-size: var(--text-klein);
  color: var(--farbe-signal);
  line-height: 1.45;
  min-height: 1.45em;
  margin: 0;
  max-width: none;
}

/* In der Einwilligungszeile läuft die Meldung über beide Spalten.
   Ohne diese Regel landet sie in der schmalen Kästchenspalte und
   drückt den Text daneben zusammen. */
.einwilligung .feld__fehler {
  grid-column: 1 / -1;
}

.feld--fehlerhaft input,
.feld--fehlerhaft textarea {
  border-color: var(--farbe-signal);
}

/* ---- Einwilligung ------------------------------------------ */
.einwilligung {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  margin-bottom: var(--raum-3);
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
  max-width: 54ch;
}

.einwilligung input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .32em;
  accent-color: var(--farbe-tinte);
}

.einwilligung a { color: var(--farbe-tinte); }

/* ---- Honigtopf gegen Formular-Spam -------------------------
   Für Menschen unsichtbar. Wird das Feld ausgefüllt, war es
   ein Bot und die Nachricht wird verworfen.
------------------------------------------------------------- */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Absenden ---------------------------------------------- */
.formular__absenden {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-3);
}

.formular__hinweis {
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
}

/* ---- Rückmeldung nach dem Absenden ------------------------- */
.formular__meldung {
  margin-top: var(--raum-3);
  padding: var(--raum-2);
  border-left: 2px solid var(--farbe-tinte);
  font-size: var(--text-klein);
  max-width: 54ch;
}

.formular__meldung--fehler { border-left-color: var(--farbe-signal); }