/* ═══════════════════════════════════════
   v3 huisstijl — diensten
   /diensten/ plus de drie dienstpagina's.

   Deze vier pagina's hadden samen 53.355 tekens aan inline CSS. Er was niets
   gedeeld tussen de index en de detailpagina's, maar de drie detailpagina's
   deelden onderling wel 81 klassen. Vandaar de tweedeling hieronder.

   De FAQ-accordeon zat er drie keer los in, met eigen JavaScript op
   max-height. Die is vervangen door .v3-faq-* uit v3-global.
═══════════════════════════════════════ */

/* ══════════════════════════════════════
   DEEL A — de drie dienstpagina's (gt-*)
══════════════════════════════════════ */

/* Dezelfde gekleurde sfeer als de hero van de homepagina, via ::before zodat
   er geen extra element in drie sjablonen bij hoeft. Zelfde opzet als
   .page-hero en .v3-vlak in v3-global.css. */

@media (max-width: 1000px) {
}

/* ── Kerncijfers ── */
.gt-stats { padding: 0 0 64px; position: relative; z-index: 1; }
/* De gedeelde hero eindigt met maar 16px onderpadding, omdat op de
   homepagina de logoband volgt die zijn eigen ruimte meeneemt. Volgt de
   statsbalk, dan moet die ruimte hier vandaan komen. */
.v3-hero + .gt-stats { padding-top: 48px; }
.gt-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gt-stat {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .10);
  border-radius: 18px; padding: 24px 22px;
}
.gt-stat-num { font: 700 var(--v3-fs-kop-xl) / 1.1 var(--v3-font); color: var(--v3-text-1); }
.gt-stat-label {
  font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-3); margin-top: 8px;
}

/* ── Standaardsectie met kop links en inhoud rechts ── */
.gt-sectie { padding: 80px 0; position: relative; z-index: 1; }
/* De achtergrond komt nu van v3-vlak in de markup, zodat de kleur uit
   een bron komt en de sectie ook de zachte lichtval meekrijgt. */
.gt-sectie-layout {
  display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 56px; align-items: start;
}
.gt-sectie-links { position: relative; }
.gt-sec-header,
.gt-sectie-links { max-width: 640px; }
.gt-sectie-label, .gt-vn-label, .gt-ni-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
  margin-bottom: 14px;
}

/* De opsomming onder een opleverpunt.
   Deze stond hierboven tussen de labels, maar het is geen label: het is een
   omhulsel met zes losse spans erin. Die erfden dus allemaal hoofdletters,
   letterspatiëring en regelhoogte 1, en plakten als inline-elementen aan
   elkaar tot één onleesbare regel. Ze zijn nu losse chips. */
.gt-del-sub {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: 12px;
}
.gt-del-sub span {
  padding: 5px 11px; border-radius: var(--v3-r-pill);
  font: 500 var(--v3-fs-klein) / 1.35 var(--v3-font);
  color: var(--v3-text-2);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
}
.gt-sectie-titel {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 0; text-wrap: balance;
}

/* ── Bewijsblok: dezelfde vraag voor en na ── */

/* ── Opleverlijst ── */
.gt-deliverables { display: grid; gap: 14px; }
.gt-del-item {
  display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: start;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  border-radius: 16px; padding: 20px 22px;
}
.gt-del-num {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(159, 211, 255, .08); border: 1px solid rgba(159, 211, 255, .13);
  font: 700 var(--v3-fs-klein) / 1 var(--v3-font); color: var(--v3-cyan);
}
.gt-del-body {
  font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2); text-wrap: pretty;
}
.gt-del-body strong { color: var(--v3-text-1); font-weight: 700; display: block; margin-bottom: 5px; }
/* De gratis eerste maand krijgt het accent. */
.gt-del-gratis { border-color: rgba(34, 211, 238, .28); background: rgba(34, 211, 238, .05); }
.gt-del-num-gratis { background: var(--v3-grad); border-color: transparent; color: var(--v3-grad-text); }

/* ── Voor en na naast elkaar ── */
.gt-voor-na { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; }
.gt-vn-blok {
  border-radius: 18px; padding: 22px 24px;
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .10);
}
.gt-vn-na { border-color: rgba(34, 211, 238, .24); background: rgba(34, 211, 238, .05); }
.gt-vn-items { display: grid; gap: 10px; font: 400 var(--v3-fs-body) / 1.6 var(--v3-font); color: var(--v3-text-2); }
.gt-vn-pijl { color: var(--v3-cyan); font-size: var(--v3-fs-kop-l); }

/* ── Tijdlijn ── */
.gt-tijdlijn { display: grid; gap: 0; }
.gt-stap { display: grid; grid-template-columns: 34px 1fr; gap: 18px; }
.gt-stap-lijn { position: relative; display: flex; flex-direction: column; align-items: center; }
.gt-stap-dot {
  width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  background: var(--v3-bg); border: 2px solid var(--v3-cyan);
}
.gt-stap-dot-gratis { background: var(--v3-grad); border-color: transparent; }
.gt-stap-line { flex: 1; width: 2px; background: rgba(159, 211, 255, .16); margin: 6px 0; }
.gt-stap-last .gt-stap-line { display: none; }
.gt-stap-body { padding-bottom: 30px; }
.gt-stap-fase {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-cyan); margin-bottom: 8px;
}
.gt-stap-body strong { display: block; font: 700 var(--v3-fs-kop) / 1.3 var(--v3-font); color: var(--v3-text-1); margin-bottom: 6px; }
.gt-stap-body p { font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2); margin: 0; text-wrap: pretty; }

/* ── Wat er niet bij zit ── */
.gt-niet-inbegrepen { padding: 80px 0; position: relative; z-index: 1; }

/* ── Verschil tussen de drie diensten ── */
.gt-verschil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gt-verschil-kaart {
  display: block; text-decoration: none; border-radius: 18px; padding: 24px 22px;
  background: var(--v3-card); border: 1px solid var(--v3-border);
  transition: transform .35s cubic-bezier(.16, .8, .3, 1), border-color .35s ease;
}
.gt-verschil-kaart:hover { transform: translateY(-4px); border-color: rgba(34, 211, 238, .35); }
.gt-verschil-actief { border-color: rgba(34, 211, 238, .4); background: rgba(34, 211, 238, .05); }
.gt-verschil-num { font: 600 13px / 1 var(--v3-font); color: var(--v3-cyan); }
.gt-verschil-naam { font: 700 var(--v3-fs-kop) / 1.3 var(--v3-font); color: var(--v3-text-1); margin-top: 12px; }
.gt-verschil-rol { font: 400 var(--v3-fs-klein) / 1.55 var(--v3-font); color: var(--v3-text-3); margin-top: 8px; }
.gt-verschil-link { font: 600 var(--v3-fs-klein) / 1 var(--v3-font); color: var(--v3-light); margin-top: 16px; display: inline-block; }

/* ── Fasenlijst binnen een kaart ── */
.fase-lijst { display: flex; flex-direction: column; }
.fase-item {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fase-item:last-child { border-bottom: none; }
.fase-num {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--v3-grad); color: var(--v3-grad-text);
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
}
.fase-body strong {
  display: block; font: 700 var(--v3-fs-klein) / 1.35 var(--v3-font);
  color: var(--v3-text-1); margin-bottom: 4px;
}
.fase-body p { font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-2); margin: 0; }

/* ── Uitlegblok op de monitoringpagina ── */
.monitoring-uitleg {
  padding: 16px 18px; border-radius: 14px;
  background: rgba(159, 211, 255, .06); border: 1px solid rgba(159, 211, 255, .13);
}
.monitoring-uitleg-titel {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
  margin-bottom: 10px;
}
.monitoring-uitleg p { font: 400 var(--v3-fs-klein) / 1.65 var(--v3-font); color: var(--v3-text-2); margin: 0; }

/* ── Lopende tekst binnen de tweekolomsblokken ── */
.gt-sectie-rechts p {
  font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2);
  margin: 0 0 16px; text-wrap: pretty;
}

/* Icoonhouders die vroeger een glyph toonden. */
.deliverable-icon, .gratis-icon, .niet-icon { font-style: normal; flex-shrink: 0; color: var(--v3-cyan); }

/* ══════════════════════════════════════
   DEEL B — /diensten/ (de indexpagina)
══════════════════════════════════════ */

/* ── Dienstblokken ── */
.dienst-sectie { padding: 72px 0; position: relative; z-index: 1; }
/* De achtergrond van dit blok stond hier met de hand op #050f20 ingetypt, wat
   toevallig precies de kleur van .v3-vlak is. Dat vlak staat nu in de markup,
   zodat de kleur uit één bron komt en de sectie ook de zachte lichtval
   meekrijgt die de homepagina overal gebruikt. */
.featured-badge-top {
  display: inline-block; margin-bottom: 18px;
  padding: 7px 14px; border-radius: var(--v3-r-pill);
  font: 600 var(--v3-fs-label) / 1 var(--v3-font);
  background: var(--v3-grad); color: var(--v3-grad-text);
}
.dienst-layout { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 56px; align-items: start; }

/* Schermafbeelding boven de kaart in de rechterkolom, zodat je per dienst ziet
   wat je krijgt in plaats van er alleen over te lezen.
   Zelfde kaderopmaak als de hero op de homepagina: dezelfde rand, dezelfde
   diepe schaduw en dezelfde cyaan zoom, plus een blauwe halo eromheen.
   Wel vlak in plaats van gekanteld: in de hero is dat beeld decoratief, hier
   staat er leesbare interface in en dan werkt kantelen tegen je.

   De opnames waren uitsneden van rond de 970 pixels breed en pasten daarom in
   de rechterkolom van 606. De huidige dashboardschermen zijn 1900 breed en
   komen daar uit op 32 procent; dan valt er niets meer af te lezen. Daarom
   staat het beeld nu over de volle breedte van de container, net als op de
   drie detailpagina's, en houdt het zijn eigen verhouding. */
.dienst-shot {
  position: relative; margin-bottom: 22px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--v3-image-plane);
  border: 1px solid rgba(159, 211, 255, .34);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(34, 211, 238, .10),
    0 0 60px -18px rgba(43, 127, 255, .32);
}
.dienst-shot img { width: 100%; height: auto; display: block; }

/* Over de volle breedte, onder de twee kolommen. */
.dienst-shot-breed { margin: 44px 0 0; }
.dienst-bijschrift { display: block; margin-top: 12px; max-width: 76ch; }
.dienst-num-badge {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(159, 211, 255, .08); border: 1px solid rgba(159, 211, 255, .13);
  font: 700 var(--v3-fs-klein) / 1 var(--v3-font); color: var(--v3-cyan);
}
.dienst-num-featured { background: var(--v3-grad); border-color: transparent; color: var(--v3-grad-text); }
.dienst-titel {
  font: 700 var(--v3-fs-sectie) / 1.1 var(--v3-font);
  letter-spacing: -.02em; color: var(--v3-text-1); margin: 20px 0 0; text-wrap: balance;
}
.dienst-intro,
.dienst-voor { font: 400 var(--v3-fs-body) / 1.7 var(--v3-font); color: var(--v3-text-2); margin: 18px 0 0; text-wrap: pretty; }
.dienst-prijs { font: 700 var(--v3-fs-kop-xl) / 1 var(--v3-font); color: var(--v3-text-1); margin-top: 22px; }
.dienst-prijs-note { font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-3); margin-top: 8px; }
.dienst-gratis-maand {
  margin-top: 16px; padding: 12px 16px; border-radius: 12px;
  background: rgba(34, 211, 238, .07); border: 1px solid rgba(34, 211, 238, .22);
  font: 500 var(--v3-fs-klein) / 1.55 var(--v3-font); color: #cfdcee;
}
.dienst-card {
  background: var(--v3-card-alt); border: 1px solid rgba(159, 211, 255, .12);
  border-radius: 20px; padding: 28px 26px 30px;
}
.dienst-card-featured { border-color: rgba(34, 211, 238, .28); }
.dienst-card-titel {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
}
.dienst-card-divider { height: 1px; background: rgba(255, 255, 255, .09); margin: 20px 0; }
.dienst-deliverables,
.dienst-lijst { display: grid; gap: 11px; }
/* De items in .dienst-lijst zijn kale <li>. Zonder deze regel blijven de
   bolletjes van de browser staan en krijgt de tekst geen vinkje. */
.dienst-lijst { list-style: none; margin: 0; padding: 0; }
.dienst-lijst li {
  position: relative; padding-left: 28px;
  font: 400 var(--v3-fs-body) / 1.55 var(--v3-font); color: var(--v3-text-2); text-wrap: pretty;
}
.dienst-lijst li::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--v3-cyan); border-bottom: 2px solid var(--v3-cyan);
  transform: rotate(-45deg);
}
.dienst-deliverable {
  position: relative; padding-left: 28px;
  font: 400 var(--v3-fs-body) / 1.55 var(--v3-font); color: var(--v3-text-2); text-wrap: pretty;
}
.dienst-deliverable::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--v3-cyan); border-bottom: 2px solid var(--v3-cyan);
  transform: rotate(-45deg);
}
.dienst-niet-inbegrepen {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .09);
  font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-3);
}
/* De link hierin had geen enkele opmaak en viel dus terug op het standaard
   blauw van de browser: een contrast van 2,0 op deze ondergrond, waar 4,5 de
   ondergrens is. Praktisch onleesbaar. Het vangnet in v3-global.css pakt
   alleen links binnen p, li, td en dergelijke, en deze staat in een div. */
.dienst-niet-inbegrepen a {
  color: var(--v3-cyan); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(34, 211, 238, .45);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.dienst-niet-inbegrepen a:hover { color: #7ce7f7; text-decoration-color: #7ce7f7; }
.dienst-cta { margin-top: 24px; }

/* ── Vergelijkingstabel ── */
.vergelijking-sectie { padding: 72px 0; position: relative; z-index: 1; }
/* Slotzin onder de vergelijkingstabel. Verving het afsluitende oproepblok:
   dezelfde inhoud, maar als zin met twee links in plaats van een kaart met
   twee knoppen. */
.vergelijking-slot {
  margin: 30px 0 0; max-width: 78ch;
  font: 400 var(--v3-fs-body) / 1.75 var(--v3-font); color: var(--v3-text-2);
}
.vergelijking-tabel {
  margin-top: 40px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(159, 211, 255, .12); background: var(--v3-card-alt);
}
.vt-header, .vt-rij, .vt-prijs-rij, .vt-cta-rij {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center;
}
.vt-header { border-bottom: 1px solid rgba(159, 211, 255, .12); }
.vt-rij { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.vt-rij:nth-child(even) { background: rgba(255, 255, 255, .015); }
.vt-kenmerk {
  padding: 15px 22px;
  font: 400 var(--v3-fs-body) / 1.5 var(--v3-font); color: var(--v3-text-2);
}
.vt-col { padding: 15px 18px; text-align: center; }
.vt-col-header {
  font: 700 var(--v3-fs-kop) / 1.3 var(--v3-font); color: var(--v3-text-1); padding: 22px 18px;
}
.vt-col-featured { background: rgba(34, 211, 238, .05); }
.vt-ja { color: var(--v3-cyan); font-weight: 700; }
.vt-nee { color: var(--v3-text-3); }
.vt-val { font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-2); }
.vt-prijs-rij { border-top: 1px solid rgba(159, 211, 255, .12); }
.vt-prijs { font: 700 var(--v3-fs-kop) / 1 var(--v3-font); color: var(--v3-text-1); }
.vt-cta-rij { padding-bottom: 22px; }

@media (max-width: 1000px) {
.gt-sectie-layout, .dienst-layout { grid-template-columns: 1fr; gap: 32px; }
  .gt-stats-grid { grid-template-columns: repeat(2, 1fr); }
.gt-verschil-grid { grid-template-columns: 1fr; }
  .gt-voor-na { grid-template-columns: 1fr; }
  .gt-vn-pijl { transform: rotate(90deg); justify-self: center; }
  /* De vergelijkingstabel wordt te smal voor vier kolommen; laat hem
     zijwaarts schuiven in plaats van de tekst onleesbaar te persen. */
  .vergelijking-tabel { overflow-x: auto; }
  .vt-header, .vt-rij, .vt-prijs-rij, .vt-cta-rij { min-width: 620px; }
}
@media (max-width: 700px) {
.gt-sectie, .gt-niet-inbegrepen, .dienst-sectie, .vergelijking-sectie { padding: 56px 0; }
  .gt-stats-grid { grid-template-columns: 1fr; }
  .gt-hero-ctas .v3-btn { width: 100%; justify-content: center; }
}

/* ── Dashboardbeeld met uitleg ──────────────────────────────────────────
   De dienstpagina's hadden negen secties en één afbeelding, tegenover elf
   secties en negen afbeeldingen op de homepagina. Daar zat het verschil:
   dezelfde opbouw, maar niets te zien.

   Dit blok koppelt een schermafbeelding aan de uitleg wat je erop ziet en
   waarom dat ertoe doet. Bewust over de volle breedte van de container en
   niet in een kolom: het zijn schermen van bijna 1900px breed, en in een
   halve kolom is er niets meer van te lezen. */
.gt-toon { margin-top: 34px; }
.gt-toon-intro {
  margin: 0 0 4px; max-width: 66ch;
  font: 400 var(--v3-fs-lead) / 1.65 var(--v3-font);
  color: var(--v3-text-2); text-wrap: pretty;
}
.gt-toon-beeld {
  margin: 26px 0 0; border-radius: 16px; overflow: hidden;
  background: var(--v3-image-plane);
  border: 1px solid rgba(159, 211, 255, .22);
  box-shadow:
    0 44px 90px -46px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(34, 211, 238, .08),
    0 0 70px -22px rgba(43, 127, 255, .26);
}
.gt-toon-beeld img { width: 100%; height: auto; display: block; }

/* Bijschrift onder het beeld: benoemt wat er te zien is, zodat het beeld
   niet alleen decoratie is. Ook bruikbaar voor wie het beeld niet ziet. */
.gt-toon-bijschrift {
  display: block; margin: 12px 2px 0;
  font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font);
  color: var(--v3-text-3); max-width: 76ch;
}

.gt-toon-paar .gt-toon-beeld { margin-top: 0; }
@media (max-width: 1000px) {
}

/* -- Ritme in de beeldsecties --------------------------------------------
   Vijf keer dezelfde opbouw onder elkaar leest als een lijst. Deze drie
   varianten wisselen dat af. Ze staan naast elkaar en niet in plaats van
   elkaar: een dichtbedrukt scherm hoort nog steeds over de volle breedte,
   want daar valt anders niets meer van af te lezen.

   Ze werken alleen samen met de vergrootweergave uit v3-gedeeld.js. Zonder
   die klik zou een beeld op halve breedte informatie kosten in plaats van
   ruimte opleveren. */

/* Twee punten in plaats van drie of vier: dan hoort het een rij van twee te
   zijn en geen rij van drie met een gat erin. */
.gt-afleesbaar-paar { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* Een beeld over de volle breedte van de container, met de gloed van de
   hero-shot eronder. Dat geeft diepte zonder aan de vorm te komen.

   Hier stond eerst een variant die het beeld tot voorbij de vensterrand
   liet doorlopen. Dat werkt bij de hero omdat die geen kader heeft, maar
   een gt-toon-beeld heeft een rand en afgeronde hoeken rondom: die werd aan
   de vensterrand doormidden gesneden, en dan mist er zichtbaar een kant.
   Bovendien schoot het beeld steeds verder naar buiten naarmate het scherm
   breder werd. Teruggedraaid op 03-09-2026. */
.gt-toon-vol { position: relative; }
.gt-toon-vol::before {
  content: ""; position: absolute; z-index: 0;
  left: 8%; right: 8%; top: 22%; bottom: -8%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(34, 211, 238, .22), rgba(43, 127, 255, .12) 48%, transparent 76%);
  filter: blur(72px);
  pointer-events: none;
}
.gt-toon-vol .gt-toon-beeld { position: relative; z-index: 1; }

/* Onder de 1000px vervalt alles naar een kolom over de volle breedte. Een
   beeld van 1900px op een halve telefoonbreedte heeft geen zin, en een
   uitloper naar de schermrand is daar precies wat de container al doet. */
@media (max-width: 1000px) {
  /* De gloed heeft op een telefoon geen ruimte om te vervagen en wordt
     dan een vlek achter het beeld. */
  .gt-toon-vol::before { display: none; }
}

/* -- Aanwijzing dat het beeld vergroot kan worden ------------------------
   Alleen de zoom-in cursor is te subtiel op een pagina waar bijna alles
   klikbaar lijkt. Op een aanraakscherm bestaat hover niet, dus daar staat
   het label meteen aan. */
.gt-toon-beeld { position: relative; }
/* dienst-shot staat op de dienstenpagina en heeft al position: relative. */
.gt-toon-beeld::after,
.dienst-shot::after {
  content: "Bekijk groter";
  position: absolute; right: 14px; bottom: 14px;
  padding: 9px 15px; border-radius: var(--v3-r-pill);
  background: rgba(7, 17, 36, .88);
  border: 1px solid rgba(159, 211, 255, .26);
  font: 500 var(--v3-fs-klein) / 1 var(--v3-font); color: var(--v3-light);
  opacity: .72;
  transition: opacity .22s ease, background .22s ease;
  pointer-events: none;
}
.gt-toon-beeld:hover::after,
.gt-toon-beeld:focus-within::after,
.dienst-shot:hover::after,
.dienst-shot:focus-within::after {
  opacity: 1; background: rgba(12, 30, 58, .95);
}
@media (prefers-reduced-motion: reduce) {
  .gt-toon-beeld::after,
  .dienst-shot::after { transition: none; }
}

/* Losse punten onder een beeld: wat je op dit scherm kunt aflezen. */
.gt-afleesbaar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px; margin-top: 26px;
}
.gt-aflees-item {
  padding: 16px 18px; border-radius: 13px;
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--v3-border);
}
.gt-aflees-item strong {
  display: block; margin-bottom: 6px;
  font: 600 var(--v3-fs-kop) / 1.35 var(--v3-font); color: var(--v3-text-1);
}
.gt-aflees-item span {
  font: 400 var(--v3-fs-body) / 1.65 var(--v3-font); color: var(--v3-text-2);
}