/* ==========================================================================
   vp/contact-formulier.css — het tweede formulier op contact/index.html.

   Dit is het formulier voor wie niet door de vragenstroom heen wil klikken:
   één scherm, alle velden zichtbaar, geen stappen. Het deelt zijn velden,
   labels, foutmeldingen en verstuurknop met vp/contact.css; hier staat
   het paneel eromheen, de kop erboven, en sinds 30 augustus 2026 de
   bedrijfsgegevens die het formulier afsluiten (.vp-form-gegevens,
   helemaal onderaan dit bestand).

   WAAROM EEN EIGEN KLASSE EN NIET .vp-form. vp/contact-stappen.js pakt
   document.querySelector('form.vp-form') en maakt daar een stroom van. Dat
   moet de eerste blijven. Met een eigen klasse kan dit formulier nooit per
   ongeluk de stroom worden, ook niet als de volgorde op de pagina ooit
   verandert.

   VERZENDEN. Dit formulier staat op method="dialog" en heeft geen action.
   Een formulier met method="dialog" dat niet in een <dialog> staat breekt
   het versturen af zonder te navigeren: de browser doet zijn eigen
   veldcontrole nog wel, vuurt nog wel het submit-event, en gaat daarna
   nergens heen. Dat is sinds 4 september 2026 de terugval voor een bezoeker
   zonder JavaScript; met JavaScript vangt vp/contact-verzenden.js het
   submit-event op en post het naar api.vastpilot.nl/marketing-chat/contact.
   Zo komt de bezoeker in geen van beide gevallen op de 501-foutpagina van de
   statische server.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sectiemaat. .section geeft van zichzelf de volle sectie-afstand boven en
   onder; hier mag het krapper, want dit blok hoort bij de stroom erboven en
   is een tweede deur naar dezelfde kamer, geen nieuw hoofdstuk.
   -------------------------------------------------------------------------- */

#formulier {
  padding-top: clamp(28px, 3.4vw, 56px);
  padding-bottom: clamp(28px, 3.4vw, 56px);
}

.vp-snelform-kop {
  display: flex;
  flex-flow: column;
  gap: 12px;
  max-width: 640px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}

.vp-snelform-kop p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Het paneel. Zelfde vlak en radius als .vp-form in vp/contact.css, met een
   rand erbij zodat de twee formulieren op de pagina niet als één lap lezen.
   De rand is decoratie en geen bedieningsomtrek, dus hij mag licht zijn.
   -------------------------------------------------------------------------- */

.vp-snelform {
  border: 1px solid var(--color--gray-200);
  border-radius: var(--_spacing---radius--24px);
  background-color: var(--color--gray-50);
  display: flex;
  flex-flow: column;
  gap: 24px;
  padding: 32px;
  margin: 0;
  max-width: 760px;
}

@media (max-width: 767px) {
  .vp-snelform {
    padding: 24px 20px;
  }
}

@media (max-width: 479px) {
  .vp-snelform {
    padding: 20px 16px;
  }
}

/* --------------------------------------------------------------------------
   De bedrijfsgegevens die dit formulier afsluiten, verplaatst 30 augustus
   2026 uit de kolom naast de vragenstroom (contact/index.html, sectie
   #aanvraag). .vp-contact-gegevens zelf (het vlak, de rand erboven, het
   adres) is en blijft van vp/contact.css; dat blok kreeg alleen een nieuwe
   plek in de HTML. Deze klasse doet uitsluitend de breedte en de marge tot
   het paneel erboven, op dezelfde maat als .vp-snelform-kop hierboven in dit
   bestand: 760px, gelijk aan .vp-snelform, zodat de linkerrand van het
   afsluitende blok recht onder de linkerrand van het paneel valt.
   -------------------------------------------------------------------------- */

.vp-form-gegevens {
  max-width: 760px;
  margin-top: clamp(20px, 2.4vw, 32px);
}