/* 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;
  --knop: 12px;
  --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(--knop);
  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, met schuifjes voor wat erbij kan --------- */

.rekenzin {
  display: grid;
  gap: 1.125rem;
  padding: clamp(1.375rem, 1rem + 1.5vw, 2rem);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  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;
}
.rekenzin p { margin: 0; }
.rekenzin .zin {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--kop);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.rekenzin .kl { font-size: 0.8125rem; color: var(--stil); line-height: 1.55; }
.rekenzin .uitleg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--lijn);
}
.rekenzin .uitleg div { display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--stil); line-height: 1.55; }
.rekenzin .uitleg strong { color: var(--kop); font-weight: 600; }

/* Per maand of per jaar. Een jaar vooruit betalen kost elf maanden. */
.periode {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--lijn);
  border-radius: var(--pil);
  background: var(--creme);
  justify-self: start;
}
.periode button {
  padding: 9px 16px;
  min-height: 44px;
  border: 0;
  border-radius: var(--pil);
  background: none;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--stil);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.periode button[aria-pressed="true"] {
  background: var(--wit);
  color: var(--kop);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(11, 11, 15, 0.12);
}
.periode button span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--oranje-tekst);
  background: var(--creme);
  padding: 2px 8px;
  border-radius: var(--pil);
}
.periode button[aria-pressed="true"] span { background: var(--oranje); color: #2a1a0a; }

.teller {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--lijn-warm);
  border-radius: var(--pil);
  overflow: hidden;
  vertical-align: middle;
}
.teller button {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--kop);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.teller button:hover { background: var(--creme); }
.teller output { min-width: 40px; text-align: center; font-weight: 700; font-size: 1.125rem; }

.schakel {
  display: inline-flex;
  border: 1px solid var(--lijn-warm);
  border-radius: var(--pil);
  padding: 3px;
  font-size: 0.875rem;
  font-weight: 600;
}
.schakel button {
  padding: 10px 14px;
  min-height: 44px;
  border: 0;
  background: none;
  font: inherit;
  border-radius: var(--pil);
  color: var(--stil);
  cursor: pointer;
}
.schakel button[aria-pressed="true"] { background: var(--oranje); color: #2a1a0a; }

.rekenzin .bedrag {
  font-size: clamp(2.6rem, 1.6rem + 3vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--oranje-kop);
}

@media (max-width: 560px) {
  .rekenzin .uitleg { grid-template-columns: 1fr; }
  .rekenzin .zin { font-size: 1.35rem; }
  .periode { display: grid; grid-template-columns: 1fr 1fr; width: 100%; justify-self: stretch; }
  .periode button { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 6px; font-size: 0.875rem; white-space: nowrap; }
  .periode button span { font-size: 0.6875rem; padding: 1px 7px; }
}

/* ---- 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; }
  .rekenzin .zin { 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 --------------------------- */

/* De accentband was eerst een oranje kleurvlak van rand tot rand en daarna een
   zwarte band met witte velden: allebei te luid naast de rest van de site. Nu
   verschilt hij alleen met een warme tint en een haarlijn, en zit het oranje
   uitsluitend op de knop. */
.vit-band--merk {
  background: var(--creme);
  color: var(--tekst);
  border-block: 1px solid var(--lijn-warm);
}
.vit-band--merk h2, .vit-band--merk h3 { color: var(--kop); }
.vit-band--merk .vit-eyebrow { color: var(--oranje-tekst); }
.vit-band--merk .vit-eyebrow::before { background: var(--oranje); }
.vit-band--merk .vit-inleiding { color: var(--tekst); }
.vit-band--merk .vit-bijzin { color: var(--stil); }
/* Het formulier staat op een eigen wit vlak, zodat de velden niet als losse
   witte blokken op de band liggen. */
.vit-band--merk .vit-formulier {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--ronding-groot);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  box-shadow: var(--schaduw);
  max-width: var(--smal);
}
.vit-band--merk .vit-kaart .vit-formulier {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  max-width: none;
}
.vit-band--merk .vit-formulier input,
.vit-band--merk .vit-formulier textarea,
.vit-band--merk .vit-formulier select {
  background: var(--wit);
  border: 1px solid var(--lijn);
  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(--knop);
  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%;
  /* Een staande foto op volle breedte wordt anderhalf scherm hoog. Begrensd op
     een band, zodat hij bij de tekst hoort in plaats van hem te overstemmen. */
  max-height: clamp(16rem, 12rem + 14vw, 24rem);
  height: auto;
  display: block;
  border-radius: var(--ronding-groot);
  object-fit: cover;
  object-position: center 30%;
  box-shadow: var(--schaduw);
}
/* In een smalle kolom loopt beeld al door tot de paginabreedte; daar mag hij
   iets hoger zijn. */
.vit-smal > .vit-foto img { max-height: clamp(18rem, 13rem + 16vw, 28rem); }
.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%;
  /* Zonder grens wordt een staande afdruk anderhalf scherm hoog en overstemt
     hij de tekst waar hij bij hoort. */
  max-height: clamp(17rem, 12rem + 16vw, 27rem);
  height: auto;
  object-fit: cover;
  object-position: top center;
}

/* 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); }

/* ---- erbij te nemen: schuifjes in het rekenmodel ----------------------- */

.uitb-blok { padding-top: 1rem; border-top: 1px solid var(--lijn); }
.uitb-kop { font-weight: 600; margin: 0 0 0.625rem; color: var(--kop); }
.uitb-kop span { display: block; font-weight: 400; font-size: 0.875rem; color: var(--stil); margin-top: 2px; }
.uitb-lijst { display: grid; gap: 6px; }
.uitb-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 52px;
  border: 1px solid var(--lijn);
  border-radius: var(--ronding);
  background: var(--wit);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.uitb-rij:hover { border-color: var(--lijn-warm); }
.uitb-rij[aria-pressed="true"] { border-color: var(--oranje); background: var(--creme); }
.uitb-naam { flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--kop); line-height: 1.3; }
.uitb-naam small { display: block; font-weight: 400; font-size: 0.8125rem; color: var(--stil); margin-top: 2px; }
.uitb-bedrag { font-weight: 600; color: var(--stil); white-space: nowrap; font-size: 0.9375rem; }
.uitb-rij[aria-pressed="true"] .uitb-bedrag { color: var(--oranje-tekst); }
.uitb-vink {
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  border-radius: var(--pil);
  background: var(--lijn-warm);
  position: relative;
  transition: background 0.2s ease;
}
.uitb-vink::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 11, 15, 0.28);
  transition: transform 0.2s ease;
}
.uitb-rij[aria-pressed="true"] .uitb-vink { background: var(--oranje); }
.uitb-rij[aria-pressed="true"] .uitb-vink::after { transform: translateX(20px); }
.uitb-noot { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--stil); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .uitb-vink, .uitb-vink::after { transition: none; }
}
@media (max-width: 520px) {
  .uitb-rij { flex-wrap: wrap; }
  .uitb-bedrag { order: 3; }
}

/* ---- beeld in een smalle tekstkolom ------------------------------------ */

/* Lopende tekst leest prettig op 720px, maar een schermafdruk is daar te
   klein voor: details verdwijnen. Beeld breekt daarom uit de smalle kolom en
   loopt door tot de breedte van de rest van de pagina. */
.vit-smal > .vit-venster,
.vit-smal > .vit-foto {
  width: min(100vw - clamp(2.5rem, 6vw, 5rem), var(--binnen));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ---- hero met foto ----------------------------------------------------- */
/* De hero opent met een foto of met het scherm waar de pagina over gaat. De
   sluier is licht en ligt alleen achter de tekst: daar staat donkere letter op
   papierkleur, en de rest van het beeld blijft vol in kleur. `--herosluier` is
   per pagina op te hogen als een foto zo donker is dat de tekst in de knel komt. */

.vit-hero--foto {
  --herosluier: 0.9;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 54rem;
  background: var(--zand);
  padding: clamp(3.5rem, 2.5rem + 5vw, 7rem) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem);
  overflow: hidden;
}
.vit-hero--foto > .vit-binnen { width: min(100% - clamp(2.5rem, 6vw, 5rem), var(--binnen)); }

.vit-hero--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  border-radius: 0;
  background-image: var(--herofoto, url("/wp-content/uploads/beeld/VIT-werkplek-2.webp"));
  background-size: cover;
  background-position: var(--heropositie, center right);
  background-repeat: no-repeat;
  filter: brightness(1.06) saturate(1.04);
}
.vit-hero--foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-mask-image: none;
  mask-image: none;
  background:
    linear-gradient(to right,
      rgba(255, 252, 247, calc(var(--herosluier) + 0.06)) 0%,
      rgba(255, 252, 247, var(--herosluier)) 44%,
      rgba(255, 252, 247, calc(var(--herosluier) * 0.45)) 60%,
      rgba(255, 252, 247, calc(var(--herosluier) * 0.12)) 78%,
      rgba(255, 252, 247, 0) 92%),
    /* Een dunne lichte strook onder de menubalk: daar staat donkere menutekst
       en die mag niet op een donker stuk foto vallen. */
    linear-gradient(to bottom,
      rgba(255, 252, 247, 0.92) 0%,
      rgba(255, 252, 247, 0.7) 9%,
      rgba(255, 252, 247, 0.18) 18%,
      rgba(255, 252, 247, 0) 28%);
}

/* Zonder tweede kolom loopt de tekst verder naar rechts. */
.vit-hero--foto:not(.vit-hero--split)::after {
  background:
    linear-gradient(to right,
      rgba(255, 252, 247, calc(var(--herosluier) + 0.06)) 0%,
      rgba(255, 252, 247, var(--herosluier)) 62%,
      rgba(255, 252, 247, calc(var(--herosluier) * 0.42)) 78%,
      rgba(255, 252, 247, calc(var(--herosluier) * 0.12)) 92%,
      rgba(255, 252, 247, 0) 100%),
    linear-gradient(to bottom,
      rgba(255, 252, 247, 0.92) 0%,
      rgba(255, 252, 247, 0.7) 9%,
      rgba(255, 252, 247, 0.18) 18%,
      rgba(255, 252, 247, 0) 28%);
}
.vit-hero--foto:not(.vit-hero--split) .vit-inleiding,
.vit-hero--foto:not(.vit-hero--split) .vit-bijzin { max-width: 48rem; }
.vit-hero--foto.vit-hero--split .vit-inleiding,
.vit-hero--foto.vit-hero--split .vit-bijzin { max-width: 33rem; }

/* De tekst is donker, zoals overal op de site. */
.vit-hero--foto .vit-eyebrow { color: var(--oranje-tekst); }
.vit-hero--foto h1 { color: var(--kop); }
.vit-hero--foto h1 .vit-accent { color: var(--oranje-kop); }
.vit-hero--foto .vit-inleiding { color: var(--tekst); }
.vit-hero--foto .vit-bijzin { color: var(--tekst); }
.vit-hero--foto .vit-vertrouwen { gap: 0.6rem 1rem; max-width: 40rem; }
.vit-hero--foto .vit-vertrouwen li {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--lijn-warm);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  align-items: center;
  backdrop-filter: blur(6px);
}
.vit-hero--foto .vit-vertrouwen .vit-icoon { color: var(--oranje-tekst); margin-top: 0; }
.vit-hero--foto .vit-vertrouwen strong { color: var(--kop); }
.vit-hero--foto .vit-vertrouwen li > span > span { color: var(--stil); }
.vit-hero--foto .vit-vinklijst li::before { background: rgba(11, 11, 15, 0.06); }
.vit-hero--foto .vit-vinklijst li::after { border-color: var(--oranje-kop); }
.vit-hero--foto .vit-merkenrij { border-top-color: var(--lijn-warm); }
.vit-hero--foto .vit-venster {
  box-shadow: 0 40px 90px -30px rgba(11, 11, 15, 0.45), 0 0 0 1px rgba(11, 11, 15, 0.06);
}

/* Een achtergrond uit het product zelf: het scherm waar de pagina over gaat. */
.vit-hero--scherm::before {
  filter: blur(2px) brightness(1.02) saturate(0.98);
  background-position: var(--heropositie, right -4% top 16%);
  background-size: var(--heroformaat, 70%);
}

@media (max-width: 860px) {
  .vit-hero--foto { min-height: 0; }
  .vit-hero--foto::before { background-position: center; }
  .vit-hero--foto::after,
  .vit-hero--foto:not(.vit-hero--split)::after {
    background: linear-gradient(to bottom,
      rgba(255, 252, 247, 0.95), rgba(255, 252, 247, 0.9));
  }
}

/* ---- koptekst over de hero -------------------------------------------- */
/* De foto loopt door tot achter het menu: de balk is daar doorzichtig met witte
   menutekst. Zodra er gescrold wordt zet kop.js de klasse weg en is de balk
   weer wit met de gewone letters. */

.site-header.vit-kop--open {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Alleen de bovenste laag wit maken. De uitklapmenu's staan op een witte
   achtergrond; die links moeten donker blijven, anders lijkt het submenu leeg. */
/* De sluier onder de balk is licht, dus de menutekst blijft gewoon donker. */

/* De hero schuift onder de balk door; de ruimte die dat kost komt er als
   binnenmarge weer bij. Soortelijkheid moet hoger dan
   `.vit-site .entry-content > :first-child`. */
.vit-site .entry-content > .vit-hero--foto {
  margin-top: calc(-1 * var(--kophoogte, 66px));
  padding-top: calc(var(--kophoogte, 66px) + clamp(3rem, 2rem + 4vw, 5.5rem));
}

/* ---- uitklapmenu: de regel onder de muis kleurt op --------------------- */

.main-navigation .main-nav ul ul li > a {
  transition: background-color 0.12s ease, color 0.12s ease;
}
/* De selector moet die van het thema verslaan, anders zet GeneratePress er zijn
   eigen hoverkleur overheen en wordt de tekst donkerblauw. */
.vit-site .main-navigation .main-nav ul ul li:hover > a,
.vit-site .main-navigation .main-nav ul ul li > a:hover,
.vit-site .main-navigation .main-nav ul ul li > a:focus,
.vit-site .main-navigation .main-nav ul ul li > a:focus-visible,
.vit-site .main-navigation .main-nav ul ul li.sfHover > a,
.vit-site .main-navigation .main-nav ul ul li.current-menu-item > a:hover {
  background: var(--oranje);
  /* Bijna-zwart op #ff8514, net als op de knoppen: wit haalt daar 2,4:1 en is
     dus onleesbaar, dit haalt 6,9:1 met dezelfde merkkleur. */
  color: var(--kop);
}

/* Het uitklapmenu heeft ronde hoeken maar staat op `overflow: visible`; de
   gekleurde regel liep daardoor over de hoek heen. Eerste en laatste regel
   krijgen daarom zelf de ronding, één pixel kleiner vanwege de rand. */
.main-navigation .main-nav ul ul li:first-child > a {
  border-top-left-radius: 11px;
  border-top-right-radius: 11px;
}
.main-navigation .main-nav ul ul li:last-child > a {
  border-bottom-left-radius: 11px;
  border-bottom-right-radius: 11px;
}

/* ---- lees ook: kruisverwijzingen tussen de kernpagina's ---------------- */
.vit-kruislinks { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.vit-kruislinks a {
  display: inline-block;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--lijn);
  border-radius: var(--knop);
  color: var(--kop);
  font-weight: 600;
  text-decoration: none;
  background: var(--wit);
}
.vit-kruislinks a:hover { border-color: var(--oranje); }


/* ---- voorkeursbron in Google ------------------------------------------ */
.vit-voorkeursbron {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--lijn);
  border-radius: var(--knop);
  background: var(--wit);
  color: var(--kop);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.vit-voorkeursbron:hover { border-color: var(--oranje); }
.site-footer .vit-voorkeursbron { margin-left: auto; }

/* Twee brede kaarten naast elkaar: voor lange koppen die in vier kolommen afbreken. */
.vit-kaarten.vit-kaarten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .vit-kaarten.vit-kaarten--2 { grid-template-columns: 1fr; } }

/* Kennisbank: kaarten met soort en datum, nieuwste eerst. */
.vit-artikelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.vit-artikelkaart { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; }
.vit-artikelkaart .vit-eyebrow { margin: 0; }
.vit-artikelkaart h3 { margin: 0; }
.vit-artikelkaart p:not(.vit-eyebrow) { margin: 0; flex: 1; }
.vit-artikelkaart__lees { color: var(--oranje); font-weight: 700; margin-top: 0.5rem; }
.vit-artikelkaart:hover h3 { color: var(--oranje); }
.vit-artikel h2 { margin-top: 2.25rem; }
.vit-artikel time { font-weight: 500; }

/* Overstapscan: één vraag per scherm, keuzes als grote knoppen. */
.vit-scan { background: var(--wit, #fff); border: 1px solid var(--lijn, #e8e3dc); border-radius: 18px; padding: 2rem clamp(1.25rem, 4vw, 2.5rem); }
.vit-scan__voortgang { margin: 0 0 1rem; }
.vit-scan__stap h3 { margin: 0 0 0.35rem; font-size: 1.5rem; }
.vit-scan__stap > p { margin: 0 0 1.25rem; }
.vit-scan__keuzes { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0 0 1.5rem; padding: 0; list-style: none; }
.vit-scan__keuzes label { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid var(--lijn, #e8e3dc); border-radius: 12px; cursor: pointer; background: var(--papier, #fdfaf7); }
.vit-scan__keuzes label:has(:checked) { border-color: var(--oranje); background: #fff5ea; }
.vit-scan__keuzes input { margin-top: 0.3rem; accent-color: var(--oranje); }
.vit-scan__keuzes span small { display: block; opacity: 0.75; font-weight: 400; }
.vit-scan__aantal { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; }
.vit-scan__aantal input { width: 6rem; font-size: 1.5rem; padding: 0.5rem 0.75rem; border: 1px solid var(--lijn, #e8e3dc); border-radius: 12px; text-align: center; }
.vit-scan__melding { color: #b42318; margin: -0.75rem 0 1rem; }
.vit-scan__uitkomst { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.vit-scan__uitkomst li { padding: 0.8rem 1rem; border-left: 4px solid var(--oranje); background: var(--papier, #fdfaf7); border-radius: 0 12px 12px 0; }
.vit-scan__oordeel { display: flex; gap: 0.75rem; align-items: center; font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; }
.vit-scan__oordeel::before { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #1f9d55; flex: none; }
.vit-scan__reden { padding: 0.8rem 1rem; background: #fff5ea; border-radius: 12px; margin: 0 0 1.5rem; }
.vit-scan .vit-formulier { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn, #e8e3dc); }
.vit-scan .vit-acties { margin-bottom: 0; }