/* ==========================================================================
   SGS Kontaktformular — nur die Zustände, die im Entwurf fehlten
   ==========================================================================

   Das Formular selbst trägt die Klassen des Themes: `.row`, `.consent`,
   `.formnote`, `.btn`. Die stehen in `style.css` und werden hier bewusst nicht
   wiederholt — sonst gäbe es zwei Quellen für dasselbe Aussehen.

   Hier steht ausschließlich, was ein Entwurf nicht zeigen kann: der Kasten
   über dem Formular, ein Feld mit Fehler, das Köderfeld.

   Warum jede Regel mit `.sgs-kontakt` beginnt:
   Das Formular steht im Inhaltsbereich, und der trägt `.prose`. Dessen Regeln
   sind spezifischer als eine einzelne Klasse — `.prose p` (eine Klasse, ein
   Element) schlägt `.formnote` (eine Klasse). Ohne die Hülle wäre die Fußnote
   unter dem Knopf so groß wie der Fließtext. Mit ihr gewinnt jede Regel hier
   sauber, ohne ein einziges `!important`.

   Die Farbwerte kommen aus dem Theme (`--pine`, `--fresh`, `--copy`) mit
   Ersatzwert dahinter. Fällt das Theme weg, sieht das Formular trotzdem
   ordentlich aus statt unformatiert.

   Angelegt 24.08.2026.
   ========================================================================== */

/* Ein Rotton gehört nicht zur Palette der Stiftung und steht deshalb nur hier.
   Gewählt ist ein gedecktes Ziegelrot, das neben dem Tannengrün nicht schreit
   und auf Weiß rund 6,4:1 Kontrast erreicht (WCAG AA verlangt 4,5:1). */
.sgs-kontakt {
  --sgs-warn: #9a3324;
}

/* --- Kasten über dem Formular ------------------------------------------- */

.sgs-kontakt .sgs-hinweis {
  border-radius: var(--r-sm, 14px);
  padding: 18px 20px;
  margin-bottom: 24px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--copy, #49503f);
}

.sgs-kontakt .sgs-zeile {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: inherit;
}

.sgs-kontakt .sgs-zeile:last-child {
  margin-bottom: 0;
}

.sgs-kontakt .sgs-hinweis strong {
  color: var(--pine-deep, #013220);
}

.sgs-kontakt .sgs-liste {
  margin: 0;
  padding-left: 20px;
  font-size: 14.5px;
  list-style: disc;
}

.sgs-kontakt .sgs-punkt {
  margin: 0 0 4px;
  line-height: 1.55;
}

.sgs-kontakt .sgs-punkt:last-child {
  margin-bottom: 0;
}

.sgs-kontakt .sgs-hinweis a {
  color: var(--pine, #275141);
  font-weight: 600;
}

.sgs-kontakt .sgs-hinweis-fehler {
  background: #fdf3f1;
  border-left: 4px solid var(--sgs-warn);
}

.sgs-kontakt .sgs-hinweis-fehler strong {
  color: var(--sgs-warn);
}

.sgs-kontakt .sgs-hinweis-gut {
  background: var(--fresh, #dce8d2);
  border-left: 4px solid var(--pine, #275141);
}

/* --- Feld mit Fehler ----------------------------------------------------- */

/* Die Farbe allein trägt die Aussage nicht — daneben steht immer ein Satz.
   WCAG 1.4.1: Bedeutung darf nie ausschließlich an Farbe hängen. */
.sgs-kontakt .sgs-feld-fehler {
  border-color: var(--sgs-warn);
}

.sgs-kontakt .sgs-fehlertext {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--sgs-warn);
}

/* --- Fußnote im Inhaltsbereich ------------------------------------------- */

/* Ohne diese Zeile gewinnt `.prose p` und die Fußnote wird so groß wie der
   Fließtext. Die Werte sind dieselben wie in `.formnote` im Theme. */
.sgs-kontakt .formnote {
  margin-bottom: 0;
  font-size: 12.5px;
  color: var(--soft, #727669);
}

/* --- Köderfeld ----------------------------------------------------------- */

/* Nicht `display:none`: Ein Teil der Bots überspringt Felder, die sichtbar
   ausgeblendet sind. Aus dem Bild geschoben bleibt das Feld im Quelltext ein
   ganz normales Eingabefeld — genau das ist der Zweck. */
.sgs-kontakt .sgs-falle {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}