/* Rankkraft — dienstenpagina
   Alleen wat deze pagina extra nodig heeft; tokens, knoppen, kopbalk, voet en
   de bewegingsprimitieven komen uit basis.css. Alles hier krijgt dn- ervoor. */

:root{
  /* --lijn-op haalt 1,9:1 op --vlak: genoeg voor een scheidingslijn, te zwak
     voor de omtrek van iets wat je bedient. Deze haalt 3,9:1 op --vlak. */
  --dn-rand:#6C7480;
}

/* Voor schermlezers: 9/10 staat visueel als cijfer, de kop moet toch heel. */
.dn-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── Kop ──
   Diepte uit twee isometrische rasterlagen in plaats van uit een afbeelding:
   nul extra verzoeken. 60 graden, de hoek van het merkteken in de kopbalk. */
.dn-kop{position:relative;padding-block:clamp(3.5rem,9vh,6.5rem) clamp(2rem,5vh,3rem)}
.dn-kop::before{
  content:"";position:absolute;inset:-6rem 0 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 52% at 20% 4%,rgba(94,230,196,.16),transparent 70%),
    repeating-linear-gradient(60deg,rgba(232,237,242,.055) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(-60deg,rgba(232,237,242,.055) 0 1px,transparent 1px 44px);
  -webkit-mask-image:linear-gradient(#000 30%,transparent 92%);
          mask-image:linear-gradient(#000 30%,transparent 92%);
}
.dn-kop .inleiding{margin-top:1.25rem}

/* ── De drie diensten ──
   Drie kolommen pas vanaf 1080px: eerder zakt de regellengte onder de veertig
   tekens. Daartussen twee, met de derde breed. */
.dn-raster{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:760px){
  .dn-raster{grid-template-columns:1fr 1fr}
  .dn-raster>:last-child{grid-column:1/-1}
}
@media(min-width:1080px){
  .dn-raster{grid-template-columns:repeat(3,1fr)}
  .dn-raster>:last-child{grid-column:auto}
}

/* position:relative en een eigen border-radius zijn geen sier: .kantel hangt
   zijn reflectie aan ::after met border-radius:inherit, en zonder die twee
   valt die reflectie buiten de kaart. */
.dn-kaart{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  gap:.875rem;padding:clamp(1.5rem,3.4vw,2.125rem);
  border:1px solid var(--lijn);border-radius:var(--rond);
  background:linear-gradient(158deg,var(--vlak-op),var(--vlak) 62%);
  transition:border-color var(--snel) ease,box-shadow var(--traag) var(--veer);
}
/* Lichtnaad op de bovenrand: fysieke bovenkant zonder tweede kleur. */
.dn-kaart::before{
  content:"";position:absolute;top:0;left:1.25rem;right:1.25rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.45;
}
.dn-kaart:hover{border-color:var(--lijn-op);box-shadow:0 24px 48px rgba(0,0,0,.45)}
.dn-kaart .oog{margin-bottom:0}
.dn-kaart h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem)}
.dn-kaart p{color:var(--tekst-zacht);margin-bottom:0}

/* Zelf getekend in de lijnstijl van het merkteken: dun, hoekig, isometrisch. */
.dn-tekenvak{
  display:grid;place-items:center;width:4rem;height:4rem;
  border:1px solid var(--lijn);border-radius:var(--rond-klein);
  background:radial-gradient(120% 120% at 30% 10%,rgba(94,230,196,.12),transparent 70%);
}
.dn-teken{width:2.5rem;height:2.5rem;color:var(--accent)}

/* Etiketten, geen bediening: de rand hoeft geen 3:1, de tekst haalt 15,7:1. */
.dn-merken{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 0;padding:0}
.dn-merken li{font-size:.8125rem;font-weight:600;padding:.3125rem .6875rem;
  border:1px solid var(--lijn-op);border-radius:999px;color:var(--tekst)}

/* Raakvlak 44px hoog, ook bij één regel tekst. */
.dn-link{
  display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;
  margin-top:auto;padding:.5rem 0;font-weight:600;font-size:.9375rem;
  color:var(--accent);text-decoration:none;
}
.dn-link svg{width:1rem;height:1rem;transition:transform var(--snel) var(--veer)}
.dn-link:hover{text-decoration:underline}
.dn-link:hover svg{transform:translateX(.25rem)}
.dn-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

/* ── Dienst 1 ──
   Twee kolommen pas vanaf 940px; daaronder staat de lijst onder het verhaal,
   de leesvolgorde van een telefoon. */
.dn-duo{display:grid;gap:2.5rem}
@media(min-width:940px){.dn-duo{grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start}}
.dn-ruimte{margin-top:1.25rem}
.dn-platforms{display:grid;gap:1rem;margin-top:1.75rem}
@media(min-width:520px){.dn-platforms{grid-template-columns:1fr 1fr}}

/* .gloed zet zijn lichtrand op ::before (z-index:-1) plus isolation:isolate,
   dus die laag blijft binnen het element en schijnt door de achtergrond heen.
   Daarom staat de dekking op ::after, óók op -1: later in de boomvolgorde, en
   dekt dus alles af behalve de rand. */
.dn-platform,.dn-blok{
  background:transparent;border:1px solid var(--lijn);border-radius:var(--rond);
  padding:1.25rem 1.375rem;
}
.dn-platform::after,.dn-blok::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--vlak);
}
.dn-platform h3,.dn-blok h3{font-size:1.0625rem;margin-bottom:.5rem}
.dn-platform p,.dn-blok p{color:var(--tekst-zacht);font-size:.9375rem}
.dn-blok{padding:1.5rem}
.dn-blok h3{font-size:1.1875rem}

.dn-lijstvak{border:1px solid var(--lijn);border-radius:var(--rond);
  background:var(--vlak);padding:clamp(1.5rem,3vw,2rem)}
.dn-lijstvak h3{margin-bottom:1.125rem}

/* Ruitvormig opsommingsteken: volgt de hoekige lijn, kost geen byte beeld. */
.dn-lijst{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.dn-lijst li{position:relative;padding-left:1.75rem;color:var(--tekst)}
.dn-lijst li::before{content:"";position:absolute;left:.125rem;top:.6em;
  width:.5rem;height:.5rem;border:1px solid var(--accent);transform:rotate(45deg)}
.dn-lijst-klein{gap:.5rem;margin-top:1rem}
.dn-lijst-klein li{font-size:.875rem;color:var(--tekst-zacht)}

/* ── Dienst 2 ── op 640px twee kolommen, dan blijven de lijstjes leesbaar. */
.dn-drie{display:grid;gap:1.25rem;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:640px){.dn-drie{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.dn-drie{grid-template-columns:repeat(3,1fr)}}

/* ── Het cijfer ──
   Groot in beeld, en via .dn-vh in de kop opgenomen voor de schermlezer. */
.dn-cijfervak{
  display:grid;gap:1.5rem;align-items:center;
  padding:clamp(1.75rem,4vw,2.75rem);border:1px solid var(--lijn);border-radius:var(--rond);
  background:radial-gradient(80% 140% at 6% 0%,rgba(94,230,196,.14),transparent 62%),var(--vlak);
}
@media(min-width:820px){.dn-cijfervak{grid-template-columns:auto 1fr;gap:3rem}}
.dn-cijfer{font-family:var(--kop);font-weight:600;line-height:.9;letter-spacing:-.04em;
  font-size:clamp(4.5rem,3rem + 9vw,8rem);color:var(--accent);margin:0}
.dn-cijfer span span{font-size:.32em;color:var(--tekst-zacht);letter-spacing:-.01em}
.dn-cijfervak h2{font-size:clamp(1.375rem,1.1rem + 1.3vw,2rem);margin-bottom:.875rem}
.dn-cijfervak p{color:var(--tekst-zacht)}

/* ── Dienst 3 ── genummerd met een CSS-teller en niet met cijfers in de HTML:
   de nummering klopt dan nog als er ooit een stap tussenuit valt. */
.dn-midden{width:100%;max-width:760px;margin-inline:auto}
.dn-stappen{counter-reset:dn;margin:2rem 0 0;padding:0;display:grid;gap:.75rem}
.dn-stap{
  counter-increment:dn;position:relative;padding:1.25rem 1.375rem 1.25rem 4.25rem;
  border:1px solid var(--lijn);border-radius:var(--rond);background:var(--vlak);
  transition:border-color var(--snel) ease;
}
.dn-stap:hover{border-color:var(--lijn-op)}
.dn-stap::before{content:counter(dn,decimal-leading-zero);
  position:absolute;left:1.375rem;top:1.3rem;font-family:var(--kop);
  font-size:.875rem;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.dn-stap dt{font-family:var(--kop);font-weight:600;font-size:1.0625rem;margin-bottom:.375rem}
.dn-stap dd{margin:0;color:var(--tekst-zacht);font-size:.9375rem}
.dn-knoprij{display:flex;flex-wrap:wrap;gap:.75rem;margin:2.25rem 0 0}
.dn-midden .dn-knoprij{justify-content:center}

/* ── Vergelijking ──
   Een echte tabel: vier kenmerken over drie diensten. Rij- én kolomkoppen
   hebben scope, zodat een schermlezer bij elke cel weet waar hij staat. */
.dn-vergelijk{
  padding:clamp(1.75rem,4vw,3rem);border:1px solid var(--lijn);border-radius:var(--rond);
  background:radial-gradient(70% 120% at 92% 0%,rgba(94,230,196,.10),transparent 60%),var(--vlak);
}
.dn-vergelijk .inleiding{margin-top:1rem}
.dn-veeg{display:flex;align-items:center;gap:.5rem;margin:1.75rem 0 .625rem;
  font-size:.8125rem;font-weight:600;color:var(--tekst-zacht)}
.dn-veeg::before{content:"";width:1.25rem;height:1px;background:var(--dn-rand)}
@media(min-width:1120px){.dn-veeg{display:none}}

/* De tabel schuift in zijn eigen kader, de pagina nooit. De twee "local"
   verlopen schuiven mee met de inhoud, de twee vaste blijven aan de rand: zo
   licht alleen de kant op waar nog inhoud zit. tabindex is voor het
   toetsenbord. */
.dn-schuif{
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  border:1px solid var(--dn-rand);border-radius:var(--rond-klein);
  background-color:var(--vlak);
  background-image:
    linear-gradient(90deg,var(--vlak),rgba(17,21,28,0)),
    linear-gradient(90deg,rgba(17,21,28,0),var(--vlak)),
    linear-gradient(90deg,rgba(94,230,196,.30),rgba(94,230,196,0)),
    linear-gradient(90deg,rgba(94,230,196,0),rgba(94,230,196,.30));
  background-position:left center,right center,left center,right center;
  background-size:2.5rem 100%,2.5rem 100%,.75rem 100%,.75rem 100%;
  background-repeat:no-repeat;
  background-attachment:local,local,scroll,scroll;
}
.dn-schuif:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.dn-tabel{border-collapse:separate;border-spacing:0;width:100%;min-width:46rem;font-size:.9375rem}
.dn-tabel th,.dn-tabel td{padding:1rem 1.125rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--lijn)}
.dn-tabel thead th{font-family:var(--kop);font-size:.9375rem;font-weight:600;
  color:var(--tekst);background:var(--vlak-op);border-bottom-color:var(--lijn-op)}
/* De kenmerkkolom blijft staan tijdens het schuiven, anders weet je halverwege
   niet meer welke rij je leest. Daarvoor is een dekkende achtergrond nodig. */
.dn-tabel th[scope="row"]{position:sticky;left:0;z-index:1;width:11rem;
  background:var(--vlak-op);border-right:1px solid var(--lijn-op);
  font-family:var(--kop);font-weight:600;color:var(--tekst)}
.dn-tabel thead th:first-child{position:sticky;left:0;z-index:2}
.dn-tabel td{color:var(--tekst-zacht);min-width:15rem}
/* Op een telefoon eet 11rem het halve venster op; smaller toont meer dienst. */
@media(max-width:640px){
  .dn-tabel{min-width:38rem;font-size:.875rem}
  .dn-tabel th,.dn-tabel td{padding:.875rem}
  .dn-tabel th[scope="row"]{width:8rem}
  .dn-tabel td{min-width:13rem}
}
.dn-tabel tbody tr:last-child th,.dn-tabel tbody tr:last-child td{border-bottom:0}
.dn-tabel tbody tr:hover td{color:var(--tekst)}
.dn-tabel a{display:inline-flex;align-items:center;min-height:2.75rem;
  font-weight:600;color:var(--accent);text-underline-offset:.25em}
.dn-tabel a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* De rand van .knop-lijn haalt 1,9:1 en dat is te weinig voor de omtrek van
   een bedieningselement; hier op 4,2:1 gezet. */
.dn-vergelijk .knop-lijn{border-color:var(--dn-rand)}

/* ── Rustige weergave ──
   Twee keer opgeschreven, net als in basis.css: een browser die de media-query
   niet kent mag de klasse-variant niet meeslepen in dezelfde selectorlijst. */
@media(prefers-reduced-motion:reduce){
  .dn-link svg{transition:none;transform:none !important}
  .dn-kaart,.dn-stap{transition:none}
}
html.rustig .dn-link svg{transition:none;transform:none !important}
html.rustig .dn-kaart,html.rustig .dn-stap{transition:none}