/* ==========================================================================
   Kanreki – Ergänzungen für das Kontaktformular
   --------------------------------------------------------------------------
   Bewusst eine eigene Datei: assets/kanreki.css wird im Nachbarprojekt von
   build/build_website.py erzeugt und beim nächsten Build überschrieben.
   Was hier steht, überlebt das.

   Farbe wird sparsam eingesetzt (siehe CLAUDE.md): Die Meldungen tragen den
   Akzent nur als schmale Kante links, der Text bleibt in Sumi. So ist der
   Kontrast in jedem Fall ausreichend und die Fläche bleibt ruhig.
   ========================================================================== */

/* -- Honigtopf --------------------------------------------------------------
   Für Bots sichtbar, für Menschen nicht. Nicht display:none verwenden –
   manche Bots erkennen das und lassen das Feld dann leer. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -- Rückmeldung über dem Formular ---------------------------------------- */
.form-meldung {
  margin: 0 0 var(--sp-3);
  padding: 14px 16px;
  background: var(--weiss);
  border: 1px solid var(--hai);
  border-left: 3px solid var(--kiri);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.55;
  color: var(--sumi);
}

.form-meldung b {
  display: block;
  margin-bottom: 2px;
}

/* Matcha für die Bestätigung, Shu Tief für den Fehler – beide aus der Palette. */
.form-meldung--erfolg { border-left-color: var(--matcha); }
.form-meldung--fehler { border-left-color: var(--shu-tief); }

/* Beim Sprung aus der Weiterleitung keinen zusätzlichen Fokusrahmen zeigen –
   die Meldung ist ohnehin deutlich sichtbar. */
.form-meldung:focus { outline: none; }
.form-meldung:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }

/* -- Fehler am einzelnen Feld --------------------------------------------- */
.feldfehler {
  font-size: 13px;
  line-height: 1.45;
  /* Shu Tief statt Shu: 5,98:1 auf hellem Grund, siehe Brand Guide. */
  color: var(--shu-tief);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--shu-tief);
}

/* -- Einwilligung mit Fehler ---------------------------------------------- */
.form .consent .feldfehler {
  display: block;
  margin-top: 4px;
}