/* ═══════════════════════════════════════════════════════════════════════════
   De contactpagina.

   Twee bestanden doen al het meeste: landing.css levert de navigatie en de
   voettekst, authenticatie.css de kaart, de velden en het beeld met de
   happen. Hier staat alleen wat van deze pagina zelf is — de kop, de weg
   terug, de keuzelijst en de twee blokken eronder.

   Let op: authenticatie.css hangt zijn body-regels (ondergrond, :focus-visible,
   verklein-beweging) aan .wrl-auth, en die klasse staat hier niet op de body.
   Dat is precies de bedoeling — de pagina heeft de ondergrond van de
   landingspagina — maar de focusring en de bewegingsregel moeten hier dus
   opnieuw.
   ═══════════════════════════════════════════════════════════════════════ */

.wrl-ct-sectie {
  max-width: 1240px;
  margin: 0 auto;
  /* Onderaan lucht: de voettekst begint meteen na deze sectie, en zonder
     ruimte plakten de twee kolommen tegen de donkere rand. */
  padding: 44px 40px 76px;
}

.wrl-ct-sectie :focus-visible {
  outline: 2px solid #6C5CE7;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── De weg terug ────────────────────────────────────────────────────────── */

.wrl-ct-terug {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 14.5px;
  font-weight: 500;
  color: #5C5247;
  text-decoration: none;
  transition: color .18s ease;
}
.wrl-ct-terug:hover,
.wrl-ct-terug:focus-visible { color: #6C5CE7; }

/* ── Vaste velden ─────────────────────────────────────────────────────────
   Wie ingelogd is: naam en e-mailadres komen uit het account. Zichtbaar
   anders dan een veld om in te typen, maar wel leesbaar en te selecteren. */

.wrl-ct-sectie .wrl-auth-invoer[readonly] {
  background: #F4F1EB;
  border-color: #E6E0D4;
  color: #5C5247;
  cursor: default;
}
.wrl-ct-sectie .wrl-auth-invoer[readonly]:focus { border-color: #D8D1C2; box-shadow: none; }
.wrl-ct-uit-account { margin-top: -6px; }

/* ── De kop ──────────────────────────────────────────────────────────────── */

.wrl-ct-eyebrow {
  margin: 6px 0 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A7F70;
}

.wrl-ct-kop {
  margin: 0 0 16px;
  max-width: 17ch;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #17130E;
}

.wrl-ct-onderkop {
  margin: 0;
  max-width: 54ch;
  font-size: 18px;
  color: #5C5247;
}

/* ── De kaart ────────────────────────────────────────────────────────────── */

.wrl-ct-kaart { margin-top: 34px; }

.wrl-ct-vorm {
  flex: 999 1 520px;
  min-width: 0;
  padding: 44px 48px 46px;
}

.wrl-ct-paneel { flex: 1 1 420px; }

/* ── Wat de velden van de inlogschermen hier extra nodig hebben ──────────── */

/* Een keuzelijst in dezelfde opmaak als de invoervelden. De eigen pijl van
   het besturingssysteem gaat eruit en komt terug als onze eigen chevron,
   anders staat er op elke machine iets anders. */
.wrl-ct-keuze {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
}

.wrl-ct-chevron {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #8A7F70;
}

/* Het invoerveld is één regel hoog en heeft daarom geen verticale ruimte;
   een tekstvak wel. */
.wrl-ct-bericht {
  min-height: 150px;
  padding: 12px 14px;
  line-height: 1.6;
  resize: vertical;
}

.wrl-ct-voet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}
.wrl-ct-voet .wrl-auth-hulp { max-width: 34ch; }

/* De knop van de inlogschermen vult de hele breedte, want daar staat hij
   onder een smalle kolom. Hier staat hij naast de regel over privacy. */
.wrl-ct-knop {
  width: auto;
  padding: 0 28px;
}

.wrl-ct-knop-zacht {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #D8D1C2;
  border-radius: 999px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #17130E;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s ease;
}
.wrl-ct-knop-zacht:hover,
.wrl-ct-knop-zacht:focus-visible { border-color: #17130E; color: #17130E; }

/* Buiten beeld, maar niet verborgen: sommige bots slaan display:none over. */
.wrl-ct-lokvak {
  position: absolute;
  left: -9999px;
}

/* ── Na het versturen ────────────────────────────────────────────────────── */

.wrl-ct-klaar { padding: 20px 0 10px; }

.wrl-ct-vinkje {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #D1FAE5;
  margin-bottom: 20px;
}

.wrl-ct-klaarkop {
  margin: 0 0 8px;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #17130E;
}

.wrl-ct-klaartekst {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 15.5px;
  color: #5C5247;
}

/* ── De vaste gegevens, op het beeld ─────────────────────────────────────── */

/* KvK en btw moeten ergens staan en zijn geen nieuws. Op de rustige onderhoek
   van de foto vullen ze een plek die toch leeg was. */
.wrl-ct-gegevens {
  margin: auto 0 0;
  max-width: min(100%, 320px);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.8;
  color: #E6E1D6;
}

/* ── Twee wegen die geen formulier nodig hebben ──────────────────────────── */

/* Dezelfde vorm als "Hoe je begint" op de landingspagina: een streep links
   en verder niets. Als witte kaarten vroegen ze evenveel aandacht als de
   kaart met het formulier erboven, terwijl ze een voetnoot zijn — en twee
   kaarten onder een kaart leest als drie dingen van gelijk gewicht. */
.wrl-ct-blokken {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 42px;
}

.wrl-ct-blok {
  padding-left: 20px;
  border-left: 2px solid #D8D1C2;
}

/* De eerste is de weg die de meeste bezoekers kunnen nemen zonder ons; die
   krijgt de donkere streep, net als "Vandaag" in de stappenrij. */
.wrl-ct-blok-eerst { border-left-color: #17130E; }

.wrl-ct-bloklabel {
  margin: 0 0 11px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A7F70;
}
.wrl-ct-blok-eerst .wrl-ct-bloklabel { color: #17130E; }

.wrl-ct-blokkop {
  margin: 0 0 9px;
  font-family: 'Bricolage Grotesque', Archivo, sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #17130E;
}

.wrl-ct-bloktekst {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: #5C5247;
}
.wrl-ct-bloktekst strong { font-weight: 600; color: #17130E; }

.wrl-ct-bloklink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #4F46A8;
  text-decoration: none;
}
.wrl-ct-bloklink:hover,
.wrl-ct-bloklink:focus-visible { color: #6C5CE7; text-decoration: underline; }

/* ── Smallere schermen ───────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .wrl-ct-blokken { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

@media (max-width: 620px) {
  .wrl-ct-sectie { padding: 30px 20px 56px; }
  .wrl-ct-kaart { border-radius: 20px; }
  .wrl-ct-vorm { padding: 28px 22px 26px; }
  /* Naast elkaar past de knop niet meer; dan maar over de volle breedte. */
  .wrl-ct-knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wrl-ct-sectie *, .wrl-ct-sectie *::before, .wrl-ct-sectie *::after {
    animation: none !important;
    transition: none !important;
  }
}