/* ============================================================
   CLARIX, gedeelde stijl voor de tekstpagina's
   (diensten, aanpak, contact, algemene voorwaarden, privacybeleid)

   De home (index.html) heeft zijn eigen stijl in de pagina zelf en laadt dit
   bestand NIET. Dat is bewust: die pagina is een scroll-animatie met een
   3D-model en mocht bij deze verbouwing niet veranderen. De ontwerpwaarden
   hieronder (kleuren, lettertype, maten, rondingen) zijn daarom letterlijk
   overgenomen uit index.html en niet opnieuw bedacht. Wijzigt er een waarde,
   dan moet hij op beide plekken mee.

   Deze pagina's hebben bewust GEEN 3D-model en GEEN deeltjesanimatie:
   ze zijn rustiger en tekstgericht (besluit Ali, 24 augustus 2026).
   ============================================================ */

/* ---- zelf gehost Sarabun, letterlijk gelijk aan index.html ---- */
@font-face{
  font-family:'Sarabun';
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url('../assets/sarabun-200-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sarabun';
  font-style:normal;
  font-weight:200;
  font-display:swap;
  src:url('../assets/sarabun-200-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sarabun';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/sarabun-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sarabun';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../assets/sarabun-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Sarabun';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/sarabun-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Sarabun';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../assets/sarabun-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- ontwerpwaarden, letterlijk uit index.html ---- */
:root{
  --gl-bg:#ffffff;
  --gl-bg-alt:#f6fafe;             /* de kleur die de bezoeker op de home ziet */
  --gl-surface:rgba(255,255,255,0.4);
  --gl-ink:#000000;
  --gl-accent:#0091ff;
  --gl-accent-ink:#ffffff;
  --gl-line:rgba(0,0,0,0.1);
  --gl-glow:#ff0099;

  /* de holografische reeks: zelfde vijf kleuren als het model en de deeltjes */
  --c-blue:#0091ff;
  --c-cyan:#00aaff;
  --c-purple:#8000ff;
  --c-pink:#ff0099;
  --c-peach:#ff0000;

  --gl-font-display:'Sarabun', ui-sans-serif, system-ui, sans-serif;
  --gl-font-body:'Sarabun', ui-sans-serif, system-ui, sans-serif;
  --gl-tracking-display:-0.02em;
  --gl-weight-display:200;
  --gl-weight-body:400;

  --gl-radius:2.5rem;              /* pillen: knoppen, invoervelden, badges */
  --gl-radius-lg:2rem;             /* panelen: de glazen voettekst */
  --gl-border:1px;

  --gl-duration-fast:0.2s;
  --gl-duration:0.8s;
  --gl-duration-slow:1.6s;
  --gl-ease:cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Ondergrens in px, niet alleen een rem-maat. De root-lettergrootte is
     clamp(12px, 0.833333vw, 24px), dus op een telefoon is 1rem gelijk aan 12px
     en werd --gl-text-xs letterlijk 9 px. Gemeten op alle acht pagina's, onder
     andere op de taalknop NL | EN. Onder de 12 px wordt tekst voor de meeste
     mensen slecht leesbaar, en dat hoort niet af te hangen van hoe breed het
     scherm toevallig is. Op een groot scherm wint de rem-maat gewoon weer. */
  --gl-text-xs:max(12px, 0.75rem);
  --gl-text-sm:max(13px, 0.875rem);
  --gl-text-base:1rem;
  --gl-text-md:1.125rem;
  --gl-text-lg:1.5rem;
  --gl-text-xl:2rem;
  --gl-text-2xl:clamp(2.5rem, 5.5vw, 4rem);
  --gl-text-hero:clamp(2.5rem, 7vw, 7rem);
  --gl-leading-tight:1.05;
  --gl-leading-snug:1.3;
  --gl-leading-normal:1.6;
  --gl-tracking-label:0.08em;
  --gl-space-1:0.5rem;
  --gl-space-2:1rem;
  --gl-space-3:1.5rem;
  --gl-space-4:2rem;
  --gl-space-6:3rem;
  --gl-space-8:4rem;
  --gl-space-12:6rem;
  --gl-radius-sm:0.75rem;
  --gl-danger:#b3261e;
  --gl-success:#0f7a4d;

  /* Alleen voor deze pagina's: de breedte van de leeskolom en van de
     paginabak. 46rem lopende tekst is ongeveer 75 tekens per regel bij deze
     lettergrootte; daarboven wordt lezen meetbaar trager. */
  --pg-kolom:46rem;
  --pg-bak:82rem;
  --pg-marge:3.125rem;             /* zelfde zijmarge als de home */
}
/* Ultrabreed, punt van Ali op 25 aug 2026: "hij is nu niet geoptimaliseerd voor
   ultra". Gemeten op zijn scherm (3440 x 1440): de bak was 2118 px breed met
   661 px marge aan elke kant, dus 38 procent van het scherm bleef leeg. Op 1440
   en 2560 is dat 13 procent.
   De oorzaak is de bovengrens van 24 px op de root-lettergrootte, die er sinds
   A6 staat: boven ongeveer 2880 px groeit geen enkele rem-maat nog mee, dus ook
   de bak niet. Die grens blijft, want zonder plafond wordt de tekst op een
   34-inch monitor absurd groot.
   Daarom groeit de BAK hier los van rem, in vw. De leeskolom doet dat NIET en
   blijft op 46rem: lopende tekst breder maken dan ongeveer 75 tekens maakt
   lezen meetbaar trager, en dat verandert niet omdat het scherm groter is.
   De grens ligt op 2600 px zodat er aan 2560 en alles daaronder niets verandert. */
@media (min-width:2600px){
  :root{
    --pg-bak:min(112rem, 72vw);
  }
  /* Op een ultrabreed scherm blijft er naast de leeskolom ruimte over die met
     niets gevuld is. Op de juridische pagina's zetten we de inhoudsopgave daar
     neer in plaats van erboven, en laten we hem meelopen. Dat maakt de leegte
     nuttig: in een document van dertig artikelen zie je zo waar je bent, en de
     lijst scrollt niet meer weg zodra je begint te lezen.
     Alleen hier, want alleen deze pagina's hebben een inhoudsopgave; `:has`
     zorgt dat de andere pagina's geen grid worden. */
  /* Met een grid lukte dit niet: een element dat alle rijen overspant, verdeelt
     zijn eigen hoogte over die rijen, en de titel zakte er 512 px door naar
     beneden. `grid-auto-rows: min-content` hielp niet. Een float valt wel
     buiten de rijstroom en houdt sticky-gedrag, dus dat is het geworden. De
     tekstblokken eronder lopen er netjes langs omdat ze zelf al op de
     leeskolom begrensd zijn en dus nooit tot onder de opgave reiken. */
  .pagina > .inhoudsopgave{
    float:right;
    box-sizing:border-box;
    width:26rem;
    max-width:26rem;
    /* Een float lijnt rechts uit in de bak, en dat zette de opgave 716 px van
       de tekst af tegen de rand van het scherm. Deze rechtermarge duwt hem
       terug tot vlak naast de leeskolom: wat overblijft van de bak, min de
       kolom, min de tussenruimte, min zijn eigen breedte. Zo schaalt hij mee
       als de bak verandert. */
    margin:0 calc(100% - var(--pg-kolom) - 4rem - 26rem) 2rem 4rem;
    position:sticky;
    top:5rem;
  }
  /* Naast elkaar is een kolom logischer dan twee smalle. */
  .pagina > .inhoudsopgave ol{ columns:1; }
}

/* Zelfde bovengrens op de root-lettergrootte als de home (punt A6): zonder
   plafond groeit elke rem-maat door op een breed scherm. */
html{
  font-size: clamp(12px, 0.833333vw, 24px);
  /* Enige decoratie op deze pagina's: een zachte kleurgloed rechtsboven, ver
     van de lopende tekst vandaan. Geen beweging, geen canvas.
     Bewust een ACHTERGROND en geen element: een gekleurd blok dat met een
     negatieve marge buiten het scherm hangt, maakt de pagina breder dan het
     venster. Gemeten voor deze wijziging: 426 px op een venster van 390 en
     2645 px op 2560, op elke pagina. Een achtergrond kan dat per definitie
     niet, want die wordt afgeknipt in plaats van meegeteld.
     De kleur ligt op html en niet op body, anders schildert de body-kleur er
     overheen. */
  background-color: var(--gl-bg-alt);
  background-image:
    radial-gradient(60rem 34rem at 88% 6%, rgba(0,145,255,0.16), rgba(0,145,255,0) 62%),
    radial-gradient(42rem 26rem at 96% 2%, rgba(128,0,255,0.10), rgba(128,0,255,0) 60%);
  background-repeat: no-repeat, no-repeat;
  background-position: right -6rem top -8rem, right -3rem top -5rem;
  background-size: 60rem 34rem, 42rem 26rem;
  scroll-behavior: smooth;
  /* Anker-sprongen (bijvoorbeeld diensten.html#dashboards) landen anders onder
     de kop van de pagina. */
  scroll-padding-top: 6rem;
}
/* De home verbergt de schuifbalk; deze pagina's doen dat ook, zodat de site
   overal hetzelfde oogt. */
::-webkit-scrollbar{ display:none; }
body{
  margin:0;
  /* GEEN achtergrondkleur hier: die staat op html, samen met de kleurgloed. */
  color: var(--gl-ink);
  font-family: var(--gl-font-body);
  font-weight: var(--gl-weight-body);
  font-size: 1rem;
  line-height: var(--gl-leading-normal);
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{ font-size: inherit; font-weight: inherit; margin: 0; }
img{ display:block; }

/* Overslaan-link, gelijk aan de home. */
.skip-link{
  position:absolute; left:1rem; top:-100vh; z-index:10000;
  padding:0.75rem 1.25rem;
  background:var(--gl-bg); color:var(--gl-ink);
  font-family:var(--gl-font-body); font-size:1rem;
  border:2px solid var(--gl-accent); border-radius:0.5rem;
  text-decoration:none;
}
.skip-link:focus{ top:1rem; }
:focus-visible{ outline:3px solid var(--gl-accent); outline-offset:3px; }

/* ============================================================
   KOP VAN DE PAGINA: logo links, menu rechts.
   Zelfde plaatsing als op de home (2.5rem van boven, 3.125rem opzij), maar
   hier binnen een header in de gewone tekststroom in plaats van absoluut over
   een canvas.
   ============================================================ */
.paginakop{
  position:relative;
  min-height:13rem;                /* ruimte voor de vier gestapelde links */
}
/* Het logo is hier een link naar de home. De plaatsing zit op de link zelf,
   niet op de afbeelding: anders is de link een leeg blokje van nul pixels. */
.hero-logo-link{
  position:absolute;
  top:2.5rem;
  left:var(--pg-marge);
  z-index:5;
  display:block;
  line-height:0;
}
.hero-logo{
  height:1.75rem;
  width:auto;
}
.hero-nav{
  position:absolute;
  top:2.5rem;
  right:var(--pg-marge);
  z-index:5;
  font-family:var(--gl-font-body);
  font-weight:400;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.75rem;
}
.hero-nav a{
  color:var(--gl-ink);
  text-decoration:none;
  font-size:1.1rem;
  font-weight:400;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:0.5rem;
  opacity:1;
  transition:transform 0.2s ease;
  cursor:pointer;
}
.hero-nav a:hover{ transform:translateX(-4px); }
.hero-nav a .nav-arrow{ font-size:1.2rem; font-weight:400; line-height:1; }
/* De pagina waar je nu bent: iets zwaarder, met een streep eronder in de
   kleur van het merk. Wordt gezet door gedeeld/site.js. */
.hero-nav a[aria-current="page"]{
  font-weight:500;
  box-shadow: inset 0 -2px 0 0 var(--gl-accent);
}
.lang-switch{
  display:flex; align-items:center; gap:0.35rem;
  margin-top:0.6rem; font-size:max(12px, 0.95rem);
  text-transform:uppercase; color:var(--gl-ink); user-select:none;
}
.lang-switch button{
  background:none; border:none; padding:0; font:inherit; color:inherit;
  text-decoration:none; opacity:0.45; cursor:pointer; transition:opacity 0.2s ease;
}
.lang-switch button:hover{ opacity:0.8; }
.lang-switch button.is-active{ opacity:1; font-weight:500; }
.lang-switch .lang-sep{ opacity:0.3; }

/* ============================================================
   INHOUD
   ============================================================ */
.pagina{
  max-width:var(--pg-bak);
  margin:0 auto;
  padding:0 var(--pg-marge) 6rem;
}
/* Klein label boven de titel, zelfde ritme als ( A ) [ 001 /003 ] op de home. */
.pagina-label{
  display:flex;
  justify-content:space-between;
  max-width:var(--pg-kolom);
  font-size:1.1rem;
  font-weight:400;
  text-transform:uppercase;
  margin-bottom:1.5rem;
}
.pagina-titel{
  font-family:var(--gl-font-body);
  font-weight:200;
  font-size:clamp(2.25rem, 4.6vw, 4rem);
  line-height:1.05;
  letter-spacing:var(--gl-tracking-display);
  margin:0 0 1.5rem;
  max-width:20ch;
}
.pagina-titel .nadruk{ font-weight:400; }
/* De kleurlijn die op de home onder de knoppen en de voortgangsbalk staat. */
.kleurlijn{
  height:2px;
  width:100%;
  max-width:var(--pg-kolom);
  background:linear-gradient(to right, var(--c-blue), var(--c-cyan), var(--c-purple), var(--c-pink), var(--c-peach));
  opacity:0.6;
  margin-bottom:2.5rem;
}
.pagina-intro{
  max-width:var(--pg-kolom);
  font-size:1.25rem;
  line-height:1.5;
  font-weight:200;
  margin:0 0 3.5rem;
}
.pagina-datum{
  font-size:var(--gl-text-sm);
  opacity:0.55;
  margin:-1.5rem 0 2.5rem;
}

/* Regel die alleen in de Engelse modus verschijnt: deze pagina staat alleen in
   het Nederlands. In het Nederlands is het element leeg en dus weg; site.js
   vult hem pas bij het wisselen naar Engels. */
.juridisch-taal{
  font-size:var(--gl-text-sm);
  line-height:1.6;
  max-width:var(--pg-kolom);
  margin:-1rem 0 2.5rem;
  padding:0.9rem 1.1rem;
  border-left:2px solid var(--gl-accent, #0091ff);
  background:rgba(0,145,255,0.05);
  border-radius:0 8px 8px 0;
}
.juridisch-taal:empty{ display:none; }

/* Lopende tekst. */
.tekst{ max-width:var(--pg-kolom); }
.tekst h2{
  font-size:clamp(1.375rem, 2vw, 1.75rem);
  font-weight:500;
  line-height:1.25;
  margin:3rem 0 1rem;
  scroll-margin-top:6rem;
}
.tekst h2:first-child{ margin-top:0; }
.tekst h3{
  font-size:1.125rem;
  font-weight:500;
  margin:2rem 0 0.5rem;
}
.tekst p{
  margin:0 0 1.25rem;
  font-size:1.0625rem;
  line-height:1.65;
  opacity:0.78;
}
.tekst ul{ margin:0 0 1.5rem; padding-left:1.25rem; }
.tekst li{
  margin-bottom:0.6rem;
  font-size:1.0625rem;
  line-height:1.6;
  opacity:0.78;
}
.tekst li::marker{ color:var(--gl-accent); }
.tekst strong{ font-weight:500; opacity:1; }
.tekst a{ color:var(--gl-ink); text-decoration:underline; text-underline-offset:0.2em; }
.tekst a:hover{ color:var(--gl-accent); }
/* Een artikelnummer in de algemene voorwaarden hoort bij de alinea, niet
   ervoor: daarom gewone alinea's met het nummer in de tekst. */
.tekst .lid{ margin-bottom:0.9rem; }

/* Invulveld dat Ali nog moet vervangen, bijvoorbeeld [KVK-NUMMER]. Zichtbaar
   gemarkeerd zodat niemand er overheen leest. */
.invulveld{
  background:rgba(255,0,153,0.10);
  border-bottom:1px dashed rgba(255,0,153,0.55);
  padding:0 0.15em;
  font-weight:500;
  opacity:1;
}

/* Inhoudsopgave boven een lange juridische tekst. */
.inhoudsopgave{
  max-width:var(--pg-kolom);
  margin:0 0 3rem;
  padding:1.5rem 1.75rem;
  background:rgba(255,255,255,0.7);
  border:var(--gl-border) solid var(--gl-line);
  border-radius:var(--gl-radius-lg);
}
.inhoudsopgave h2{
  font-size:var(--gl-text-sm);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:var(--gl-tracking-label);
  margin:0 0 0.75rem;
  opacity:0.6;
}
.inhoudsopgave ol{
  margin:0; padding-left:1.2rem;
  columns:2; column-gap:2rem;
}
.inhoudsopgave li{ margin-bottom:0.35rem; break-inside:avoid; }
.inhoudsopgave a{
  color:var(--gl-ink); text-decoration:none; opacity:0.75;
  font-size:var(--gl-text-sm);
}
.inhoudsopgave a:hover{ opacity:1; color:var(--gl-accent); }

/* ============================================================
   KAARTEN (diensten) en STAPPEN (aanpak)
   ============================================================ */
.kaartraster{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(20rem, 1fr));
  gap:1.5rem;
  max-width:var(--pg-bak);
  margin:0 0 4rem;
}
.kaart{
  position:relative;
  overflow:hidden;
  padding:2rem 2rem 2.25rem;
  background:rgba(255,255,255,0.75);
  border:var(--gl-border) solid var(--gl-line);
  border-radius:var(--gl-radius-lg);
  scroll-margin-top:6rem;
  transition:transform var(--gl-duration-fast) var(--gl-ease), background var(--gl-duration-fast);
}
.kaart:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.92); }
.kaart::after{
  content:'';
  position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:linear-gradient(to right, var(--c-blue), var(--c-cyan), var(--c-purple), var(--c-pink), var(--c-peach));
  opacity:0.45;
  transition:opacity 0.35s ease, height 0.35s ease;
}
.kaart:hover::after{ opacity:1; height:3px; }
.kaart-nummer{
  font-size:var(--gl-text-sm);
  letter-spacing:var(--gl-tracking-label);
  opacity:0.45;
  margin:0 0 0.75rem;
}
.kaart h2{
  font-size:1.375rem;
  font-weight:500;
  line-height:1.25;
  margin:0 0 0.75rem;
}
.kaart p{
  margin:0 0 0.75rem;
  font-size:1.0625rem;
  line-height:1.6;
  opacity:0.78;
}
.kaart p:last-of-type{ margin-bottom:0; }
.kaart ul{ margin:0.75rem 0 0; padding-left:1.1rem; }
.kaart li{ font-size:max(12px, 0.95rem); line-height:1.5; opacity:0.7; margin-bottom:0.35rem; }
.kaart li::marker{ color:var(--gl-accent); }

/* De regels voor .stap stonden hier: nummer links, tekst rechts, de opzet van
   de aanpak-pagina voordat die het aanpakblok kreeg. Sinds 25 aug 2026 gebruikt
   geen enkele pagina die klassen nog; ze staan in de git-historie. */

/* ============================================================
   OPROEP ONDERAAN EEN PAGINA
   ============================================================ */
.cta-blok{
  max-width:var(--pg-bak);
  margin:4rem 0 0;
  padding:2.5rem 3rem 3rem;
  background:rgba(255,255,255,0.75);
  border:var(--gl-border) solid var(--gl-line);
  border-radius:var(--gl-radius-lg);
  scroll-margin-top:6rem;
}
.cta-blok h2{
  font-size:clamp(1.5rem, 2.4vw, 2rem);
  font-weight:200;
  line-height:1.2;
  margin:0 0 0.75rem;
}
.cta-blok p{
  margin:0 0 1.75rem;
  max-width:var(--pg-kolom);
  font-size:1.0625rem;
  line-height:1.6;
  opacity:0.78;
}

/* Groot, rustig e-mailadres op de contactpagina. */
.contactregel{
  display:block;
  font-size:clamp(1.5rem, 3vw, 2.25rem);
  font-weight:200;
  letter-spacing:var(--gl-tracking-display);
  color:var(--gl-ink);
  text-decoration:none;
  margin:0 0 0.5rem;
  word-break:break-word;
}
.contactregel:hover{ color:var(--gl-accent); }
.contact-bij{ font-size:1.0625rem; opacity:0.7; margin:0 0 2.5rem; }

/* ============================================================
   VOETTEKST
   Zelfde glazen paneel als op de home, maar in de gewone tekststroom in
   plaats van vast onder in beeld.
   ============================================================ */
.voettekst-bak{ padding:0 0 var(--pg-marge); }
.glass-footer{
  position:relative;
  margin:0 var(--pg-marge);
  padding:3rem;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  border-radius:var(--gl-radius-lg);
  border:var(--gl-border) solid rgba(255,255,255,0.5);
  box-shadow:0 8px 32px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  color:var(--gl-ink);
  font-family:var(--gl-font-body);
}
.footer-top{ display:flex; justify-content:space-between; }
.footer-left{ width:35%; display:flex; flex-direction:column; }
.footer-heading{ font-size:1rem; font-weight:500; margin-bottom:1.5rem; }
.footer-cta{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  width:100%;
  max-width:24rem;
  margin-left:calc(-1.25rem - var(--gl-border));
  margin-bottom:1rem;
  padding:1rem 1.25rem;
  min-height:44px;
  box-sizing:border-box;
  font-family:var(--gl-font-body);
  font-size:1rem;
  font-weight:400;
  text-align:left;
  color:var(--gl-ink);
  background:rgba(255,255,255,0.5);
  border:var(--gl-border) solid var(--gl-line);
  /* Was een harde 2rem, precies dezelfde waarde als --gl-radius-lg. Nu de
     variabele, zodat een wijziging aan de schaal hier ook aankomt. */
  border-radius:var(--gl-radius-lg);
  cursor:pointer;
  transition:background 0.25s ease;
}
/* De accentlijn stond op left:0, width:100%, bottom:0 en liep dus kaarsrecht
   van rand tot rand, terwijl deze knop een volle pilronding heeft. Aan beide
   uiteinden stak hij daardoor buiten die ronding uit en oogde hij als een
   streep die er los onder hing. Gemeten en op beeld vastgelegd, 26 aug 2026.
   Nu blijft hij binnen het rechte deel, met ronde uiteinden. */
.footer-cta::after{
  content:'';
  position:absolute;
  left:calc(var(--gl-radius) * 0.55);
  right:calc(var(--gl-radius) * 0.55);
  bottom:2px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(to right, var(--c-blue), var(--c-cyan), var(--c-purple), var(--c-pink), var(--c-peach));
  opacity:0.5;
  transform-origin:left center;
  transition:opacity 0.35s ease, height 0.35s ease;
}
.footer-cta:hover{ background:rgba(255,255,255,0.85); }
.footer-cta:hover::after{ opacity:1; height:3px; }
.footer-cta .cta-arrow{ font-size:1.1rem; line-height:1; opacity:0.6; transition:opacity 0.25s ease, transform 0.25s ease; }
.footer-cta:hover .cta-arrow{ opacity:1; transform:translateX(3px); }
.footer-subtext{ font-size:max(12px, 0.75rem); opacity:0.6; line-height:1.4; max-width:22rem; }
.footer-right{ display:flex; gap:5rem; padding-right:2rem; }
.footer-col{ display:flex; flex-direction:column; gap:1rem; }
.footer-col-title{ font-size:max(12px, 0.9rem); font-weight:500; margin-bottom:0.5rem; }
.footer-col a{
  color:var(--gl-ink); opacity:0.7; text-decoration:none;
  font-size:max(12px, 0.85rem); transition:opacity 0.2s;
}
.footer-col a:hover{ opacity:1; }
.footer-line{ height:1px; background:var(--gl-line); margin-top:3rem; margin-bottom:1.5rem; }
.footer-bottom{ text-align:center; font-size:max(12px, 0.8rem); opacity:0.6; }
.footer-company{ display:block; }

/* ============================================================
   TABLET (769 t/m 1024): zelfde knip als de home
   ============================================================ */
@media (min-width:769px) and (max-width:1024px){
  :root{ --pg-marge:2.5rem; }
  .pagina-titel{ font-size:clamp(2rem, 4.2vw, 2.75rem); }
  .glass-footer{ padding:2.5rem; }
}
/* Vier voettekstkolommen passen pas vanaf ongeveer 900px. */
@media (min-width:769px) and (max-width:900px){
  .footer-right{ display:grid; grid-template-columns:1fr 1fr; gap:2rem 2.5rem; padding-right:0; }
}

/* ============================================================
   TELEFOON (tot 768): zelfde knip en zelfde keuzes als de home
   ============================================================ */
@media (max-width:768px){
  :root{ --pg-marge:1.5rem; }
  .paginakop{ min-height:8.5rem; }
  /* Kleinere gloed op een telefoon; zie de toelichting bij html hierboven. */
  html{
    background-position: right -4rem top -5rem, right -2rem top -3rem;
    background-size: 34rem 20rem, 24rem 15rem;
  }
  .hero-logo-link{ top:1.5rem; left:1.5rem; }
  .hero-logo{ height:1.5rem; }
  /* Een rij in plaats van een kolom, van marge tot marge: vier gestapelde
     links plus de taalschakelaar is op 390px een blok van ~150px hoog. */
  .hero-nav{
    top:4.1rem; left:1.5rem; right:1.5rem;
    flex-direction:row; flex-wrap:nowrap;
    align-items:center; justify-content:space-between;
    gap:0.4rem;
  }
  /* A1: het raakvlak van deze links was 14 px hoog, gemeten op alle acht
     pagina's. Apple en Google houden allebei 44 px aan als ondergrens voor een
     vinger; 24 px is het absolute minimum dat nog als toegankelijk telt.
     De padding zit VERTICAAL en wordt met een negatieve marge weer opgevangen,
     zodat het raakvlak groeit maar de balk niet hoger wordt en de tekst op
     dezelfde plek blijft staan. */
  .hero-nav a{
    font-size:var(--gl-text-xs); letter-spacing:0.06em; gap:0; white-space:nowrap;
    padding:0.9rem 0.35rem;
    margin:-0.9rem -0.35rem;
  }
  .hero-nav a .nav-arrow{ display:none; }
  .hero-nav a:hover{ transform:none; }
  .lang-switch{ margin-top:0; font-size:var(--gl-text-xs); white-space:nowrap; }
  /* Zelfde verhaal als bij de menulinks hierboven: de knop was 14 px hoog. */
  .lang-switch button{
    padding:0.9rem 0.3rem;
    margin:-0.9rem -0.3rem;
  }
  /* De links in de voettekst waren 16 px hoog. Ze staan onder elkaar in een
     kolom, dus hier kan de padding gewoon blijven staan zonder negatieve marge:
     de kolom wordt iets ruimer en dat leest op een telefoon beter. */
  .footer-col a{ padding:0.55rem 0; display:block; }
  .footer-col{ gap:0.35rem; }

  .pagina{ padding:0 1.25rem 4rem; }
  .pagina-label{ font-size:max(12px, 0.95rem); margin-bottom:1rem; }
  .pagina-intro{ font-size:1.0625rem; margin-bottom:2.5rem; }
  .kleurlijn{ margin-bottom:2rem; }
  .inhoudsopgave{ padding:1.25rem; }
  .inhoudsopgave ol{ columns:1; }
  /* De links in de inhoudsopgave hadden een raakvlak van 17 px. Ze staan onder
     elkaar in een lijst, dus padding erbij en de tussenruimte iets kleiner,
     zodat het blok niet veel langer wordt maar elke regel wel te raken is. */
  .inhoudsopgave a{ padding:0.5rem 0; display:inline-block; }
  .inhoudsopgave li{ margin-bottom:0; }
  .kaartraster{ grid-template-columns:1fr; gap:1rem; }
  .kaart{ padding:1.5rem 1.25rem 1.75rem; }
  .stap{ grid-template-columns:1fr; gap:0.5rem; padding:2rem 0; }
  .stap-nummer{ font-size:1.5rem; }
  .cta-blok{ padding:1.75rem 1.25rem 2rem; }
  .knop{ width:100%; min-width:0; padding:0.9rem 1.5rem; }

  .voettekst-bak{ padding:0 0 1rem; }
  .glass-footer{ margin:0 1rem; padding:1.5rem; }
  .footer-top{ flex-direction:column; gap:1.25rem; }
  .footer-left{ width:100%; }
  .footer-right{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; padding-right:0; }
  .footer-line{ margin-top:1.5rem; }
}

/* Minder beweging: zelfde regel als op de home. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    transition-duration:0.01ms !important;
    transition-delay:0ms !important;
    animation-duration:0.01ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
  }
}