/**
 * Kontaktformular-Optionen – Breiten der Feldzeilen
 * (C) 2026 Muster Webdesign – GPL v2 or later
 *
 * Klasse in der Feldeinstellung „Feld-Klasse“ (Reiter Darstellung):
 *   basis-w-1-2, basis-w-1-3, basis-w-2-3, basis-w-1-4, basis-w-3-4  Anteil an der Zeile
 *   basis-input-1-3, basis-input-1-2                                 Feld volle Zeile, Eingabe schmal
 * Unter 576 px steht jedes Feld in einer eigenen Zeile.
 *
 * Abstände kompakt und einheitlich: --basis-cf-row-gap zwischen den Zeilen, --basis-cf-label-gap unter der Beschriftung.
 * Templates setzen sonst Ränder an jede Feldzeile und jedes fieldset (Cassiopeia: 1em bzw. 2em), die sich im Raster addieren.
 */
.contact-form {
  --basis-cf-gap: var(--ui-space-4, 1.25rem);
  --basis-cf-row-gap: var(--ui-space-3, 0.875rem);
  --basis-cf-label-gap: 0.25rem;
}

/* Abschnitte, Captcha und Knopf untereinander mit demselben Abstand wie die Feldzeilen */
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: var(--basis-cf-row-gap);
}

.contact-form form > * {
  margin: 0;
}

.contact-form fieldset:has(> .control-group) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--basis-cf-row-gap) var(--basis-cf-gap);
  margin: 0;
}

.contact-form fieldset > legend {
  flex: 0 0 100%;
  margin: var(--basis-cf-row-gap) 0 0;
}

.contact-form fieldset > .control-group {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}

/* Beschriftung dicht am Feld */
.contact-form .control-group > .control-label {
  margin: 0 0 var(--basis-cf-label-gap);
  padding: 0;
}

.contact-form .control-group > .control-label label {
  margin: 0;
}

/* Checkbox- und Radiogruppen im Feld: keine eigenen Ränder */
.contact-form .controls > fieldset {
  margin: 0;
}

.contact-form .controls .form-check:last-child {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .contact-form fieldset > .basis-w-1-2 { flex: 0 0 calc(50% - var(--basis-cf-gap) / 2); }
  .contact-form fieldset > .basis-w-1-3 { flex: 0 0 calc(33.333% - var(--basis-cf-gap) * 2 / 3); }
  .contact-form fieldset > .basis-w-2-3 { flex: 0 0 calc(66.667% - var(--basis-cf-gap) / 3); }
  .contact-form fieldset > .basis-w-1-4 { flex: 0 0 calc(25% - var(--basis-cf-gap) * 3 / 4); }
  .contact-form fieldset > .basis-w-3-4 { flex: 0 0 calc(75% - var(--basis-cf-gap) / 4); }

  .contact-form .basis-input-1-3 .controls { max-width: calc(33.333% - var(--basis-cf-gap) * 2 / 3); }
  .contact-form .basis-input-1-2 .controls { max-width: calc(50% - var(--basis-cf-gap) / 2); }
}