/* kimsen-v4-kontakt.css — Basis-Layout der Kontaktformular-Felder.
   Die statische Design-Seite lädt für die Feld-Primitive (.field/.input/.select/
   .textarea) die Flux-UI-Basis (_ds/flux-components.css); die App übernimmt diese
   Design-System-Datei bewusst nicht. Hier deshalb nur das nötige Grundlayout —
   den Papier-Look (Rahmen, Farben, Fokus, Höhe) legt kimsen-v4-unterseiten.css
   darüber. Wird nach unterseiten.css nachgeladen. */

.form-card form { margin: 0; }

.form-card .field {
  display: grid;
  gap: 6px;
  max-width: none;
}
.form-card .field .label { display: block; }
.form-card .field .description { margin: 0; }

.form-card .input,
.form-card .select,
.form-card .textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 14px;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
}

.form-card .textarea {
  padding: 12px 14px;
  min-height: 8.5rem;
  resize: vertical;
}

/* Auswahlpfeil (im Design liefert Flux ein eigenes Icon) */
.form-card .select {
  padding-right: 40px;
  cursor: pointer;
  background-image: url("../icons/arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* Fehlerliste im Danger-Callout */
.form-card .callout ul {
  margin: 6px 0 0;
  padding-left: 1.15em;
  color: var(--muted);
  font-size: 14px;
}
.form-card .callout li { margin-top: 2px; }

/* Sende-Button spannt auf schmalen Viewports über die volle Breite */
@media (max-width: 640px) {
  .form-card .btn[type="submit"] { width: 100%; justify-content: center; }
}