/* VIT Werkplek — huisstijl.
   Eén systeem met veenstra-it.nl en staging.veenstra-it.nl: Manrope, koppen in
   bijna-zwart, warme bijna-witte banden, oranje en amber als enige kleur, veel
   lucht en pilvormige knoppen. Geen bruine vlakken: het bruin uit de oude
   opzet maakte de site zwaar en donker. */

:root {
  /* Vlakken, van licht naar donker. De site wisselt af tussen wit, room en
     crème; de enige donkere band is de afsluiting onderaan een pagina. */
  --wit: #ffffff;
  --room: #fffcf7;
  --creme: #fff9ef;
  --zand: linear-gradient(135deg, #fffdf8 0%, #fff2df 100%);
  --nacht: #0b0b0f;
  --grijs: #f5f6f8;

  /* Tekst. Koppen bijna zwart, lopende tekst koel grijs -- precies zoals op
     veenstra-it.nl. */
  --kop: #0b0b0f;
  --tekst: #4a4a56;
  /* veenstra-it.nl gebruikt hiervoor #8a8a98; dat haalt op wit maar 3,40:1 en
     blijft daarmee onder de ondergrens van 4,5:1 voor lopende tekst. Deze tint
     leest hetzelfde maar haalt 5,0:1. */
  --stil: #6b6b7a;
  --lijn: #ececf2;
  --lijn-warm: #f3e7d6;

  /* Merkkleur. */
  /* Drie oranjes, en dat is geen franje. #ff8514 is de merkkleur en werkt
     prima als vlak, maar als tékst haalt hij 2,44:1 op wit -- onder de 3:1
     die zelfs grote koppen moeten halen, en ver onder de 4,5:1 voor kleine
     tekst. Daarom: --oranje voor vlakken, --oranje-kop voor grote
     koptekst-accenten (3,8:1) en --oranje-tekst voor alles wat klein is
     (4,9:1). */
  --oranje: #ff8514;
  --oranje-diep: #e8700b;
  --oranje-kop: #cf6408;
  --oranje-tekst: #ad4f05;
  --amber: #ffba09;
  --link: #ad4f05;
  --groen: #2c6a4c;

  --ronding: 12px;
  --ronding-groot: 18px;
  --pil: 999px;
  --schaduw: 0 1px 2px rgba(11, 11, 15, 0.04), 0 12px 32px rgba(11, 11, 15, 0.06);
  --schaduw-diep: 0 24px 60px rgba(11, 11, 15, 0.1);

  --binnen: 1180px;
  --smal: 720px;
  --lucht: clamp(4rem, 2.5rem + 5vw, 7.5rem);
}

/* ---- basis ---------------------------------------------------------- */

body {
  background: var(--wit);
  color: var(--tekst);
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--kop);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-top: 0;
}

h1 { font-size: clamp(2.25rem, 1.6rem + 3.2vw, 3.625rem); letter-spacing: -0.045em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.625rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); letter-spacing: -0.025em; }
h4 { font-size: 1.125rem; letter-spacing: -0.02em; }

/* De tweede regel van een kop in oranje: het herkenningspunt van beide
   Veenstra IT-sites. */
.vit-accent { color: var(--oranje-kop); }

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover, a:focus { color: var(--oranje-kop); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--oranje-diep);
  outline-offset: 2px;
  border-radius: 6px;
}

img { max-width: 100%; height: auto; }

code {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.9em;
  background: var(--grijs);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: 0.1em 0.4em;
  color: var(--kop);
  word-break: break-word;
}
hr { border: 0; border-top: 1px solid var(--lijn); margin: 2.5rem 0; }

/* ---- opmaakraamwerk -------------------------------------------------- */

.vit-band { padding: var(--lucht) 0; background: var(--wit); }
.vit-band--room { background: var(--room); }
.vit-band--creme { background: var(--creme); }
.vit-band--zand { background: var(--zand); }
.vit-band--grijs { background: var(--grijs); }
/* Sluit aan op de band erboven, maar niet klem ertegenaan. */
.vit-band--strak { padding-top: clamp(2rem, 1rem + 2vw, 3rem); }

.vit-band--inkt {
  background: var(--nacht);
  color: rgba(255, 255, 255, 0.78);
}
.vit-band--inkt h2, .vit-band--inkt h3, .vit-band--inkt h4 { color: #ffffff; }
.vit-band--inkt a:not(.vit-knop) { color: #ffc27a; }
.vit-band--inkt .vit-bijzin { color: rgba(255, 255, 255, 0.6); }

.vit-binnen { width: min(100% - clamp(2.5rem, 6vw, 5rem), var(--binnen)); margin-inline: auto; }
.vit-smal { width: min(100%, var(--smal)); margin-inline: auto; }

.vit-band > .vit-binnen > * + * { margin-top: 1.5rem; }
.vit-band > .vit-binnen > h2 + p { margin-top: 0.85rem; }
.vit-band > .vit-binnen > .vit-eyebrow + h2 { margin-top: 0; }

/* Bovenschrift: oranje, klein, in kapitalen -- gelijk aan veenstra-it.nl. */
.vit-eyebrow {
  display: flex;
  /* Boven uitlijnen, niet centreren: een bovenschrift dat over twee regels
     valt zou anders een stip halverwege krijgen. */
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oranje-tekst);
  margin: 0 0 1rem;
}
.vit-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--oranje);
  flex: 0 0 auto;
  margin-top: 0.5em;
}

.vit-inleiding {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  color: var(--tekst);
  max-width: 62ch;
}
.vit-band--inkt .vit-inleiding { color: rgba(255, 255, 255, 0.78); }

/* ---- knoppen --------------------------------------------------------- */

.vit-acties { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.vit-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--oranje);
  /* Bijna-zwart op oranje in plaats van wit. Wit op #ff8514 haalt 2,44:1 en
     zakt daarmee ruim door de ondergrens van 4,5:1; dit haalt 6,9:1 zonder de
     merkkleur op te geven. */
  color: var(--kop) !important;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--pil);
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.vit-knop:hover, .vit-knop:focus {
  background: var(--amber);
  color: var(--kop) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(255, 133, 20, 0.28);
}

.vit-knop--zacht {
  background: var(--wit);
  color: var(--kop) !important;
  border-color: var(--lijn);
}
.vit-knop--zacht:hover, .vit-knop--zacht:focus {
  background: var(--wit);
  border-color: var(--oranje);
  color: var(--kop) !important;
  box-shadow: 0 8px 20px rgba(11, 11, 15, 0.07);
}
.vit-band--inkt .vit-knop--zacht {
  background: transparent;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.3);
}
.vit-band--inkt .vit-knop--zacht:hover { background: rgba(255, 255, 255, 0.08); }

.vit-bijzin {
  font-size: 0.9375rem;
  color: var(--stil);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

/* ---- hero ------------------------------------------------------------ */

.vit-hero {
  background: var(--zand);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) 0 clamp(3rem, 2rem + 3vw, 5rem);
}
.vit-hero h1 { max-width: 20ch; }
.vit-hero .vit-inleiding { margin-top: 1.5rem; }
.vit-hero .vit-acties { margin-top: 2rem; }

/* Hero met beeld ernaast. Zonder tweede kolom blijft de rechterhelft leeg en
   oogt de pagina onaf; met een stockfoto zou hij nergens over gaan. Daarom
   staat er het product zelf. */
.vit-hero--split > .vit-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.vit-hero--split > .vit-binnen > * + * { margin-top: 0; }
.vit-hero--split h1 { max-width: 18ch; }

.vit-heroblok {
  background: var(--wit);
  border: 1px solid var(--lijn-warm);
  border-radius: var(--ronding-groot);
  padding: 1.75rem;
  box-shadow: var(--schaduw-diep);
}
.vit-heroblok__kop {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stil);
}
.vit-heroblok ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.vit-heroblok li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--lijn);
}
.vit-heroblok li:last-child { border-bottom: 0; }
.vit-heroblok__naam { font-weight: 700; color: var(--kop); letter-spacing: -0.02em; }
.vit-heroblok__merk { font-size: 0.8125rem; color: var(--stil); white-space: nowrap; }
.vit-heroblok__voet {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--stil);
  border-top: 1px solid var(--lijn);
  padding-top: 1rem;
}

@media (max-width: 860px) {
  .vit-hero--split > .vit-binnen { grid-template-columns: 1fr; }
  .vit-hero--split > .vit-binnen > * + * { margin-top: 2.5rem; }
  .vit-hero--split h1 { max-width: 18ch; }
}

/* ---- tegelraster: het handtekeningelement ---------------------------- */
/* Letterlijk wat een medewerker 's ochtends voor zich heeft. Op de
   klantenpagina werkende links, op de marketingkant hetzelfde raster als
   bewijs dat de werkplek uit deze schermen bestaat en niet uit meer. */

.vit-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vit-tegel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  padding: 1.4rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--tekst);
  min-height: 9rem;
  box-shadow: 0 1px 2px rgba(11, 11, 15, 0.03);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
a.vit-tegel:hover, a.vit-tegel:focus {
  border-color: rgba(255, 133, 20, 0.5);
  transform: translateY(-3px);
  box-shadow: var(--schaduw);
  color: var(--tekst);
}
.vit-tegel__merk {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--oranje-tekst);
}
.vit-tegel__naam {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--kop);
}
.vit-tegel__uitleg { font-size: 0.9375rem; color: var(--tekst); line-height: 1.5; }
/* Onderaan de tegel geen webadres meer maar een duidelijke doorverwijzing:
   een adres als cloud.vitwerkplek.nl/apps/mail zegt de bezoeker niets en de
   tegel linkt nu naar de pagina die het onderdeel uitlegt. */
.vit-tegel__meer {
  margin-top: auto;
  padding-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--oranje-tekst);
}
.vit-tegel__meer .vit-icoon { width: 1rem; height: 1rem; transition: transform 0.15s ease; }
a.vit-tegel:hover .vit-tegel__meer .vit-icoon,
a.vit-tegel:focus .vit-tegel__meer .vit-icoon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  a.vit-tegel:hover, a.vit-tegel:focus, .vit-knop:hover { transform: none; }
}

/* ---- kaarten en lijsten ---------------------------------------------- */

.vit-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vit-kaart {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  padding: 2rem;
}
.vit-kaart h3 { margin: 0 0 0.6rem; }
.vit-kaart p:last-child { margin-bottom: 0; }
.vit-kaart--vlak { background: transparent; border: 0; padding: 0; }
.vit-band--room .vit-kaart,
.vit-band--creme .vit-kaart,
.vit-band--zand .vit-kaart { border-color: var(--lijn-warm); }
.vit-band--inkt .vit-kaart {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}

.vit-vinklijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vit-vinklijst li { padding-left: 2.1rem; position: relative; }
.vit-vinklijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgba(255, 133, 20, 0.14);
}
.vit-vinklijst li::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.5em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--oranje-diep);
  border-bottom: 2px solid var(--oranje-diep);
  transform: rotate(-45deg);
}
.vit-band--inkt .vit-vinklijst li::before { background: rgba(255, 133, 20, 0.2); }

.vit-kruislijst li::after {
  border: 0;
  left: 0.45rem;
  top: 0.52em;
  width: 0.5rem;
  height: 0.5rem;
  transform: none;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--stil) 44%, var(--stil) 56%, transparent 56%),
    linear-gradient(to bottom left, transparent 44%, var(--stil) 44%, var(--stil) 56%, transparent 56%);
}
.vit-kruislijst li::before { background: rgba(11, 11, 15, 0.05); }

/* ---- rekenzin: prijs als zin, niet als tabel ------------------------- */

.vit-rekenzin {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2.125rem);
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--kop);
  box-shadow: var(--schaduw);
  /* Niet over de volle breedte: een zin van vier woorden in een kaart van
     1180 px leest als een lege kaart. */
  max-width: 46rem;
}
.vit-rekenzin p { margin: 0; }
.vit-rekenzin__regel + .vit-rekenzin__regel { margin-top: 0.75rem; }

.vit-teller {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  vertical-align: baseline;
  margin: 0 0.2rem;
}
.vit-teller button {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--lijn);
  background: var(--wit);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.vit-teller button:hover { background: var(--oranje); border-color: var(--oranje); }
.vit-teller button .vit-teken { display: block; background: var(--kop); }
/* Plus en min zijn balkjes, geen letters: een letter zou meebewegen met elke
   lettergrootteregel, een balkje niet. */
.vit-teken--min { width: 0.85rem; height: 2px; }
.vit-teken--plus { width: 0.85rem; height: 2px; position: relative; }
.vit-teken--plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 0.85rem;
  margin-left: -1px;
  margin-top: -0.425rem;
  background: inherit;
}
.vit-getal {
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: center;
  color: var(--oranje-kop);
}
.vit-bedrag { color: var(--oranje-kop); font-variant-numeric: tabular-nums; }

.vit-schakel {
  display: inline-flex;
  gap: 0;
  background: var(--grijs);
  border-radius: var(--pil);
  padding: 4px;
  vertical-align: middle;
  font-size: 0.9375rem;
  font-weight: 700;
}
.vit-schakel button {
  border: 0;
  background: transparent;
  border-radius: var(--pil);
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  color: var(--tekst);
  font: inherit;
  letter-spacing: 0;
}
.vit-schakel button[aria-pressed="true"] {
  background: var(--oranje);
  color: var(--kop);
  box-shadow: 0 1px 3px rgba(11, 11, 15, 0.12);
}

/* ---- tabel ----------------------------------------------------------- */

.vit-tabelhoes {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  background: var(--wit);
}
table.vit-tabel { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0; }
table.vit-tabel th, table.vit-tabel td {
  padding: 1rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}
table.vit-tabel thead th {
  background: var(--room);
  color: var(--kop);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
table.vit-tabel tbody tr:last-child td { border-bottom: 0; }
table.vit-tabel td:first-child, table.vit-tabel th:first-child { font-weight: 700; color: var(--kop); }
.vit-ja { color: var(--groen); font-weight: 700; }
.vit-nee { color: var(--stil); }

/* ---- veelgestelde vragen --------------------------------------------- */

.vit-vragen { display: grid; gap: 0.75rem; }
.vit-vraag {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  padding: 1.15rem 1.4rem;
}
.vit-band--room .vit-vraag,
.vit-band--creme .vit-vraag,
.vit-band--zand .vit-vraag { border-color: var(--lijn-warm); }
.vit-vraag > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--kop);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.vit-vraag > summary::-webkit-details-marker { display: none; }
.vit-vraag > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--oranje);
  border-bottom: 2px solid var(--oranje);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.vit-vraag[open] > summary::after { transform: rotate(-135deg); }
.vit-vraag > *:not(summary) { margin-top: 0.85rem; }

/* ---- formulier -------------------------------------------------------- */

.vit-formulier { display: grid; gap: 1.1rem; max-width: var(--smal); }
.vit-veld { display: grid; gap: 0.4rem; }
.vit-veld label { font-weight: 700; font-size: 0.9375rem; color: var(--kop); }
.vit-veld input, .vit-veld textarea, .vit-veld select {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--wit);
  font: inherit;
  color: var(--kop);
}
.vit-veld input:focus, .vit-veld textarea:focus { border-color: var(--oranje); }
.vit-veld textarea { min-height: 7.5rem; resize: vertical; }
.vit-veld small { color: var(--stil); font-size: 0.875rem; }
.vit-band--inkt .vit-veld label { color: #ffffff; }
.vit-band--inkt .vit-veld small { color: rgba(255, 255, 255, 0.6); }

.vit-melding {
  padding: 1.1rem 1.35rem;
  border-radius: var(--ronding);
  border: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--tekst);
}
.vit-melding--goed { background: #eef6f1; border-color: rgba(44, 106, 76, 0.28); }
.vit-melding--fout { background: #fdeeec; border-color: rgba(176, 42, 26, 0.28); }
.vit-melding strong { color: var(--kop); }

/* ---- handleidingen ---------------------------------------------------- */

.vit-zoek { margin-bottom: 2rem; }
.vit-zoek input {
  max-width: 26rem;
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--pil);
  background: var(--wit);
  font: inherit;
  color: var(--kop);
}
.vit-handleidingen { display: grid; gap: 2.5rem; }
.vit-groep h3 { margin-bottom: 1rem; }
.vit-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vit-lijst a {
  display: block;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--tekst);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vit-lijst a strong { color: var(--kop); display: block; }
.vit-lijst a:hover, .vit-lijst a:focus {
  border-color: rgba(255, 133, 20, 0.5);
  box-shadow: var(--schaduw);
  color: var(--tekst);
}
.vit-lijst .vit-lijst__uitleg { display: block; font-size: 0.9375rem; color: var(--stil); }

.vit-stappen { counter-reset: stap; list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
.vit-stappen > li { counter-increment: stap; padding-left: 3rem; position: relative; }
.vit-stappen > li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: -0.1em;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--oranje);
  color: var(--kop);
  font-weight: 800;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vit-notitie {
  border-left: 3px solid var(--oranje);
  background: var(--creme);
  padding: 1.15rem 1.4rem;
  border-radius: 0 var(--ronding) var(--ronding) 0;
}
.vit-band--inkt .vit-notitie { background: rgba(255, 255, 255, 0.06); }

/* ---- kop en voet ------------------------------------------------------ */

.site-header { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.main-navigation, .main-navigation .main-nav ul li a { background: transparent; }
.main-navigation .main-nav ul li a {
  color: var(--kop);
  font-weight: 600;
  font-size: 0.9375rem;
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li a:focus,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--oranje-tekst); background: transparent; }
/* De menuknop op mobiel krijgt van GeneratePress een lichte kleur op een
   lichte achtergrond (1,32:1 gemeten); hier hard gezet. */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus { color: var(--kop); background: transparent; }
.main-navigation ul ul { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--ronding); overflow: hidden; }
.main-title a, .main-title a:hover { color: var(--kop); font-weight: 800; letter-spacing: -0.03em; }
/* Een oranje stip voor de naam, hetzelfde teken als voor elk bovenschrift. */
.main-title::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--oranje);
  margin-right: 0.5rem;
  vertical-align: 0.15em;
}

.site-footer { background: var(--nacht); color: rgba(255, 255, 255, 0.7); }
/* De voet gebruikt .vit-band voor zijn ruimte, maar niet voor zijn kleur:
   sinds .vit-band standaard wit is, werd de hele voet anders wit op wit
   (gemeten contrast 1,00:1 -- volledig onleesbaar). */
.site-footer .vit-band { background: transparent; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.vit-voet { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2.5rem; }
.vit-voet h4 { color: #ffffff; margin: 0 0 0.8rem; font-size: 0.9375rem; letter-spacing: 0.02em; }
.vit-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.vit-voet a { color: rgba(255, 255, 255, 0.7); text-decoration: none; display: inline-block; min-height: 1.75rem; padding: 0.15rem 0; }
.vit-voet a:hover, .vit-voet a:focus { color: #ffc27a; }
.vit-voet__slot {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---- klein scherm ----------------------------------------------------- */

@media (max-width: 480px) {
  .vit-acties { flex-direction: column; align-items: stretch; }
  .vit-knop { justify-content: center; }
  .vit-rekenzin { font-size: 1.25rem; }
  .vit-kaart { padding: 1.5rem; }
}

/* ---- volle breedte ----------------------------------------------------- */
/* Elke pagina levert zijn eigen .vit-band/.vit-binnen, dus GeneratePress hoeft
   er geen container omheen te zetten. Zonder dit staat elke sectie in een witte
   kaart met marge eromheen en loopt de achtergrondkleur van een band niet door
   tot de rand. */
.vit-site .site.grid-container { max-width: 100%; padding: 0; }
.vit-site .site-content { padding: 0; }
.vit-site .content-area { width: 100%; margin: 0; }
.vit-site.separate-containers .site-main { margin: 0; }
.vit-site.separate-containers .inside-article { padding: 0; }
.vit-site .entry-content { margin: 0; }
.vit-site article.page { background: transparent; border: 0; box-shadow: none; }
.vit-site .entry-content > :first-child { margin-top: 0; }
.vit-site .inside-header.grid-container,
.vit-site .inside-navigation.grid-container { max-width: var(--binnen); }

/* Op de donkere band is de merkkleur zelf goed leesbaar (ruim 6:1), dus daar
   hoeft de tekstvariant niet. */
.vit-band--inkt .vit-eyebrow { color: var(--oranje); }
.vit-band--inkt .vit-eyebrow::before { background: var(--oranje); }
.vit-band--inkt .vit-accent { color: var(--oranje); }

/* ====================================================================== */
/* Beeldtaal                                                              */
/* ====================================================================== */

/* ---- iconen ---------------------------------------------------------- */

.vit-icoon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }

.vit-icoonvlak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(255, 133, 20, 0.16), rgba(255, 186, 9, 0.12));
  color: var(--oranje-tekst);
}
.vit-icoonvlak .vit-icoon { width: 1.35rem; height: 1.35rem; }

/* ---- venster: de schets van een scherm -------------------------------- */
/* Geen schermafdruk maar een tekening in HTML: een echte afdruk bevat
   klantgegevens en veroudert bij elke wijziging aan de omgeving. */

.vit-venster {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  box-shadow: var(--schaduw-diep);
  overflow: hidden;
}
.vit-venster__balk {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.1rem;
  background: var(--grijs);
  border-bottom: 1px solid var(--lijn);
}
.vit-venster__balk > span:not(.vit-venster__adres) {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d9d9e2;
}
.vit-venster__balk > span:first-child { background: #ffbfae; }
.vit-venster__adres {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--stil);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--pil);
  padding: 0.2rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vit-venster__binnen { padding: 1.5rem 1.6rem 1.4rem; }
.vit-venster__kop {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--stil);
}
.vit-venster ul { list-style: none; margin: 0; padding: 0; display: grid; }
.vit-venster li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--lijn);
}
.vit-venster li:last-child { border-bottom: 0; }
.vit-venster__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: rgba(255, 133, 20, 0.12);
  color: var(--oranje-tekst);
}
.vit-venster__icoon .vit-icoon { width: 1.1rem; height: 1.1rem; }
.vit-venster__naam { font-weight: 700; color: var(--kop); letter-spacing: -0.02em; line-height: 1.3; }
.vit-venster__merk { font-size: 0.75rem; color: var(--stil); white-space: nowrap; }
.vit-venster__voet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--lijn);
  font-size: 0.875rem;
  color: var(--stil);
}
.vit-venster__voet .vit-icoon { color: var(--groen); }

/* ---- bewijsbalk ------------------------------------------------------- */

.vit-bewijs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem 2rem;
}
.vit-bewijs li { display: flex; gap: 0.9rem; align-items: flex-start; }
.vit-bewijs__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: rgba(255, 133, 20, 0.14);
  color: var(--oranje-tekst);
  flex: 0 0 auto;
}
.vit-bewijs__icoon .vit-icoon { width: 1.2rem; height: 1.2rem; }
.vit-bewijs strong { display: block; color: var(--kop); font-size: 1rem; letter-spacing: -0.02em; }
.vit-bewijs__uitleg { display: block; font-size: 0.9375rem; color: var(--stil); line-height: 1.45; }

/* ---- kenmerkrij: tekst naast een schets ------------------------------- */

.vit-kenmerk > .vit-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.vit-kenmerk > .vit-binnen > * + * { margin-top: 0; }
.vit-kenmerk--gedraaid > .vit-binnen > *:first-child { order: 2; }
.vit-kenmerk h2 { max-width: 15ch; }
.vit-kenmerk .vit-vinklijst { margin-top: 1.5rem; }
.vit-kenmerk .vit-acties { margin-top: 2rem; }

@media (max-width: 900px) {
  .vit-kenmerk > .vit-binnen { grid-template-columns: 1fr; }
  .vit-kenmerk > .vit-binnen > * + * { margin-top: 2.5rem; }
  .vit-kenmerk--gedraaid > .vit-binnen > *:first-child { order: 0; }
  .vit-kenmerk h2 { max-width: none; }
}

/* ---- merkband: het enige echt kleurige vlak --------------------------- */

.vit-band--merk {
  background: linear-gradient(135deg, var(--oranje) 0%, var(--amber) 100%);
  color: var(--kop);
}
.vit-band--merk h2, .vit-band--merk h3 { color: var(--kop); }
.vit-band--merk .vit-eyebrow { color: rgba(11, 11, 15, 0.7); }
.vit-band--merk .vit-eyebrow::before { background: var(--kop); }
.vit-band--merk .vit-inleiding { color: rgba(11, 11, 15, 0.82); }
.vit-band--merk .vit-knop { background: var(--kop); color: #ffffff !important; }
.vit-band--merk .vit-knop:hover { background: #23232c; box-shadow: 0 8px 20px rgba(11, 11, 15, 0.22); }
.vit-band--merk .vit-knop--zacht {
  background: rgba(255, 255, 255, 0.9);
  color: var(--kop) !important;
  border-color: transparent;
}
.vit-band--merk .vit-vinklijst li::before { background: rgba(255, 255, 255, 0.55); }
.vit-band--merk .vit-vinklijst li::after { border-color: var(--kop); }

/* ---- hero met diepte -------------------------------------------------- */

.vit-hero {
  position: relative;
  overflow: hidden;
}
/* Een zachte gloed rechtsboven in plaats van een vlak verloop: dat geeft de
   hero diepte zonder dat er een foto nodig is. */
.vit-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 55rem;
  height: 55rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 186, 9, 0.28) 0%, rgba(255, 133, 20, 0.1) 45%, transparent 70%);
  pointer-events: none;
}
.vit-hero > .vit-binnen { position: relative; }

/* ---- tegels met icoon ------------------------------------------------- */

.vit-tegel__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(255, 133, 20, 0.16), rgba(255, 186, 9, 0.1));
  color: var(--oranje-tekst);
  margin-bottom: 0.6rem;
}
.vit-tegel__icoon .vit-icoon { width: 1.2rem; height: 1.2rem; }

/* ---- kaart met icoon --------------------------------------------------- */

.vit-kaart .vit-icoonvlak { margin-bottom: 1.1rem; }

/* ---- cijferrij --------------------------------------------------------- */

.vit-cijfers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 2rem;
}
.vit-cijfers strong {
  display: block;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--kop);
}
.vit-cijfers span { display: block; margin-top: 0.5rem; font-size: 0.9375rem; color: var(--stil); }

/* ---- gecentreerde band ------------------------------------------------- */

.vit-midden { text-align: center; }
.vit-midden .vit-eyebrow { justify-content: center; }
.vit-midden .vit-inleiding { margin-inline: auto; }
.vit-midden .vit-acties { justify-content: center; }

/* ---- kop: telefoon en knop rechts ------------------------------------- */

.vit-site .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
}

.main-navigation .main-nav ul li.vit-menu-bellen > a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--kop);
  font-weight: 700;
}
.vit-menu-bellen .vit-icoon { color: var(--oranje-tekst); width: 1.05rem; height: 1.05rem; }

.main-navigation .main-nav ul li.vit-menu-knop > a {
  background: var(--oranje);
  color: var(--kop);
  border-radius: var(--pil);
  padding: 0.6rem 1.15rem;
  margin: 0 0 0 0.4rem;
  line-height: 1.2;
  font-weight: 700;
}
.main-navigation .main-nav ul li.vit-menu-knop > a:hover,
.main-navigation .main-nav ul li.vit-menu-knop > a:focus {
  background: var(--amber);
  color: var(--kop);
}

@media (max-width: 1100px) {
  .vit-menu-bellen { display: none; }
}

/* De naam mag nooit afbreken en het menu moet op één regel passen naast het
   telefoonnummer en de knop. */
.main-title { white-space: nowrap; }
.vit-site .main-navigation .main-nav > ul { flex-wrap: nowrap; }
.vit-site .main-navigation .main-nav ul li a { padding-left: 0.85rem; padding-right: 0.85rem; }
@media (max-width: 1250px) {
  .vit-menu-bellen { display: none; }
}
.vit-site .main-navigation .main-nav ul li a { white-space: nowrap; }
.vit-site .main-navigation .main-nav ul ul li a { white-space: normal; }
.vit-site .site-branding { margin-right: 2.5rem; }
.vit-site .inside-header #site-navigation { margin-left: auto; }

/* ---- logo en merken --------------------------------------------------- */

.vit-logo::before { display: none; }
.vit-logo a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
}
/* Alleen het logo in de kop, wat groter. Het woordmerk draagt de naam al. */
.vit-logo img { height: 3.25rem; width: auto; display: block; }
.vit-logo a { align-items: center; }
@media (max-width: 480px) {
  .vit-logo img { height: 2.4rem; }
}

/* Merken waarmee vergeleken wordt: klein en grijs, nooit als keurmerk. */
.vit-merkenrij {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn-warm);
}
.vit-merkenrij__kop {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stil);
}
.vit-merkenrij__merk { opacity: 0.75; filter: grayscale(1); }
.vit-merkenrij__merk--vierkant { height: 1.5rem; width: auto; }
.vit-merkenrij__merk--breed { height: 1.1rem; width: auto; }
.vit-merkenrij__naam {
  font-weight: 700;
  color: var(--stil);
  font-size: 0.9375rem;
  margin-right: 0.5rem;
}

/* Merk in een tabelkop. */
.vit-tabelmerk { display: inline-flex; align-items: center; gap: 0.45rem; }
.vit-tabelmerk img { height: 1.15rem; width: auto; filter: grayscale(1); opacity: 0.8; }
.vit-tabelmerk img.breed { height: 0.85rem; }

/* ---- foto's ------------------------------------------------------------ */

.vit-foto { margin: 0; }
.vit-foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--ronding-groot);
  object-fit: cover;
  box-shadow: var(--schaduw);
}
.vit-foto figcaption {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--stil);
}

/* Venster met een echte schermafdruk erin. */
.vit-venster--beeld { margin: 0; }
.vit-venster--beeld img {
  display: block;
  width: 100%;
  height: auto;
}

/* De naam met logo mag zijn eigen breedte houden. Zonder dit klapte de
   titelbox dicht tot 112 px terwijl het logo en het woord "Werkplek" breder
   zijn, en liep het menu er dwars overheen. */
.vit-site .site-branding,
.vit-site .main-title {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
}
.vit-site #site-navigation { margin-left: auto; }

/* ====================================================================== */
/* Hero, voet en conversie — tweede ronde                                 */
/* ====================================================================== */

/* ---- grotere hero ------------------------------------------------------ */

.vit-hero--groot { padding: clamp(3.5rem, 2rem + 5vw, 7rem) 0 clamp(3.5rem, 2rem + 4vw, 6rem); }
html, body { overflow-x: clip; }

/* Een fijn puntenraster over het verloop. Nauwelijks zichtbaar, maar het haalt
   de vlakke indruk van een egaal kleurvlak weg. */
.vit-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11, 11, 15, 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.55), transparent 60%);
  mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.55), transparent 60%);
  pointer-events: none;
}

.vit-hero h1 { margin-bottom: 0; }

/* ---- hero-compositie --------------------------------------------------- */

.vit-heroshow { position: relative; padding-bottom: 4.5rem; }
.vit-heroshow .vit-venster { transform: rotate(-0.6deg); }

.vit-heroshow__prijs {
  position: absolute;
  top: -1.1rem;
  right: -0.75rem;
  z-index: 3;
  background: var(--wit);
  border: 1px solid var(--lijn-warm);
  border-radius: var(--pil);
  padding: 0.5rem 1.1rem;
  font-size: 0.875rem;
  color: var(--tekst);
  box-shadow: var(--schaduw);
  white-space: nowrap;
}
.vit-heroshow__prijs strong { color: var(--oranje-tekst); font-size: 1rem; }

.vit-heroshow__kaart {
  position: absolute;
  left: -2.5rem;
  bottom: -0.5rem;
  z-index: 3;
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--schaduw-diep);
  max-width: 17rem;
}
.vit-heroshow__kaart ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.vit-heroshow__kaart li { display: flex; gap: 0.7rem; align-items: flex-start; }
.vit-heroshow__kaart strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--kop);
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.vit-heroshow__kaart li > span > span { font-size: 0.8125rem; color: var(--stil); }
.vit-heroshow__icoon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 9px;
  background: rgba(44, 106, 76, 0.12);
  color: var(--groen);
  flex: 0 0 auto;
}
.vit-heroshow__icoon .vit-icoon { width: 1rem; height: 1rem; }

@media (max-width: 860px) {
  .vit-heroshow { padding-bottom: 0; }
  .vit-heroshow .vit-venster { transform: none; }
  .vit-heroshow__kaart { position: static; max-width: none; margin-top: 1.25rem; }
  .vit-heroshow__prijs { top: -0.8rem; right: 0.5rem; }
}

/* ---- vertrouwenspunten ------------------------------------------------- */

.vit-vertrouwen {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
}
.vit-vertrouwen li { display: flex; align-items: flex-start; gap: 0.55rem; }
.vit-vertrouwen .vit-icoon { color: var(--oranje-tekst); margin-top: 0.15em; }
.vit-vertrouwen strong { display: block; font-size: 0.9375rem; color: var(--kop); letter-spacing: -0.015em; }
.vit-vertrouwen li > span > span { font-size: 0.8125rem; color: var(--stil); }

/* ---- lichte voet -------------------------------------------------------- */
/* Was bijna zwart (#0b0b0f). Dat gaf een zwart blok van een halve schermhoogte
   onder een verder lichte pagina, en trok de aandacht naar het minst
   belangrijke deel van de site. */

.site-footer.vit-voet {
  background: var(--creme);
  color: var(--tekst);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--oranje), var(--amber)) 1;
}
.site-footer.vit-voet .vit-band { background: transparent; padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }

.vit-voet__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.vit-voet__bedrijf { max-width: 26rem; }
.vit-voet__logo { height: 3rem; width: auto; display: block; margin-bottom: 1.1rem; }
.vit-voet__zin { font-size: 0.9375rem; color: var(--tekst); margin: 0 0 1.25rem; }

.vit-voet__contact { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.vit-voet__contact li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; }
.vit-voet__contact .vit-icoon { color: var(--oranje-tekst); flex: 0 0 auto; }
.vit-voet__contact a { color: var(--kop); font-weight: 700; text-decoration: none; }
.vit-voet__contact a:hover, .vit-voet__contact a:focus { color: var(--oranje-kop); text-decoration: underline; }

.vit-voet__kolom h4 { color: var(--kop); margin: 0 0 0.9rem; font-size: 0.8125rem; letter-spacing: 0.09em; text-transform: uppercase; }
.vit-voet__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: 0.9375rem; }
.vit-voet__kolom a { color: var(--tekst); text-decoration: none; display: inline-block; min-height: 1.75rem; padding: 0.1rem 0; }
.vit-voet__kolom a:hover, .vit-voet__kolom a:focus { color: var(--oranje-kop); text-decoration: underline; }

.vit-voet__slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  border-top: 1px solid var(--lijn-warm);
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  padding-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--stil);
}

@media (max-width: 900px) {
  .vit-voet__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vit-voet__bedrijf { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .vit-voet__raster { grid-template-columns: 1fr; }
}

/* ---- vaste balk op de telefoon ------------------------------------------ */

.vit-mobielbalk { display: none; }
@media (max-width: 768px) {
  .vit-mobielbalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--lijn);
  }
  .vit-mobielbalk a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--kop);
    text-decoration: none;
    padding: 0.75rem 1rem;
    border-radius: var(--pil);
    border: 1px solid var(--lijn);
  }
  .vit-mobielbalk__knop { background: var(--oranje); border-color: var(--oranje); }
  .vit-mobielbalk .vit-icoon { color: var(--oranje-tekst); }
  .vit-mobielbalk__knop .vit-icoon { color: var(--kop); }
  /* Ruimte onder de pagina, anders dekt de balk de laatste regel af. */
  body { padding-bottom: 4.5rem; }
}

/* ---- knoppen in de voet ------------------------------------------------ */
/* Stonden als los oranje blokje onder de contactregels geplakt. Nu twee
   knoppen naast elkaar met lucht erboven, en de hoofdknop met een pijl. */

.vit-voet__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.vit-voet__acties .vit-knop { padding: 0.85rem 1.4rem; }
.vit-voet__acties .vit-knop .vit-icoon { width: 1rem; height: 1rem; transition: transform 0.15s ease; }
.vit-voet__acties .vit-knop:hover .vit-icoon { transform: translateX(3px); }
.vit-voet__acties .vit-knop--zacht { background: transparent; border-color: var(--lijn-warm); }
.vit-voet__acties .vit-knop--zacht:hover { background: var(--wit); border-color: var(--oranje); }

/* ---- afsprakenmodule --------------------------------------------------- */
/* De module komt van veenstra-it.nl en heeft zijn eigen opmaak. Hieronder
   alleen wat nodig is om hem dezelfde taal te laten spreken als de rest van
   deze site: onze letter, onze ronding, ons oranje. */

.vitb-wrap {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  color: var(--tekst);
}
.vitb-wrap .vitb-step-title { color: var(--kop); letter-spacing: -0.025em; }
.vitb-wrap .vitb-step-num {
  background: var(--oranje);
  color: var(--kop);
  font-weight: 800;
}
.vitb-wrap .vitb-item {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.vitb-wrap .vitb-item:hover {
  border-color: rgba(255, 133, 20, 0.5);
  box-shadow: var(--schaduw);
  transform: translateY(-2px);
}
.vitb-wrap .vitb-item-name { color: var(--kop); font-weight: 700; letter-spacing: -0.02em; }
.vitb-wrap .vitb-item-desc { color: var(--tekst); }
.vitb-wrap .vitb-item-arrow { color: var(--oranje-tekst); }
.vitb-wrap .vitb-badge {
  background: rgba(255, 133, 20, 0.12);
  color: var(--oranje-tekst);
  border: 0;
  border-radius: var(--pil);
  font-weight: 700;
}
.vitb-wrap .vitb-group > *:first-child,
.vitb-wrap .vitb-group-title {
  color: var(--oranje-tekst);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.vitb-wrap .vitb-slot {
  border: 1px solid var(--lijn);
  border-radius: var(--pil);
  background: var(--wit);
  color: var(--kop);
  font-weight: 700;
}
.vitb-wrap .vitb-slot:hover { border-color: var(--oranje); background: var(--room); }
.vitb-wrap .vitb-slot.vitb-selected { background: var(--oranje); border-color: var(--oranje); color: var(--kop); }
.vitb-wrap .vitb-cal-day { border-radius: 10px; color: var(--kop); }
.vitb-wrap .vitb-cal-day:hover { background: var(--room); }
.vitb-wrap .vitb-btn {
  background: var(--oranje);
  color: var(--kop);
  border: 0;
  border-radius: var(--pil);
  font-weight: 700;
  padding: 0.95rem 1.6rem;
}
.vitb-wrap .vitb-btn:hover { background: var(--amber); }
.vitb-wrap .vitb-back { color: var(--link); font-weight: 700; }
.vitb-wrap input, .vitb-wrap textarea, .vitb-wrap select {
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  font: inherit;
  color: var(--kop);
}
.vitb-wrap input:focus, .vitb-wrap textarea:focus, .vitb-wrap select:focus { border-color: var(--oranje); }
.vitb-wrap .vitb-info-box { border-radius: var(--ronding); }
.vitb-wrap .vitb-info-orange { background: var(--creme); border-color: var(--lijn-warm); }