/* ============================================================================
   VIPSZ — ontwerpsysteem
   Eén stylesheet voor alle publieke pagina's. Tokens komen uit landing.html;
   één accentkleur (champagne). Kobalt is uit het systeem.

   Insluiten met:  <link rel="stylesheet" href="/vipsz.css">
   ========================================================================= */

/* --- lettervijlen, zelf gehost (ITF Free Font License, Fontshare) ---
   Latijn: Clash Display voor koppen, Satoshi voor tekst. Arabisch komt van
   Google Fonts (Reem Kufi, Readex Pro), zie de link in de pagina's. */
@font-face{font-family:'Clash Display';font-weight:500;font-display:swap;src:url('/fonts/clash-display-500.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-weight:600;font-display:swap;src:url('/fonts/clash-display-600.woff2') format('woff2')}
@font-face{font-family:'Clash Display';font-weight:700;font-display:swap;src:url('/fonts/clash-display-700.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:400;font-display:swap;src:url('/fonts/satoshi-400.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:500;font-display:swap;src:url('/fonts/satoshi-500.woff2') format('woff2')}
@font-face{font-family:'Satoshi';font-weight:700;font-display:swap;src:url('/fonts/satoshi-700.woff2') format('woff2')}

:root{
  /* --- vlakken en tekst --- */
  --bg:#071522;  --vlak-1:#0C1D2B;  --vlak-2:#0E2130;  --vlak-3:#142A3C;
  --tekst:#F4F7FA;  --tekst-2:#96A2AF;  --tekst-3:#8A96A3;
  --accent:#E0B970;  --accent-dof:#A18551;  --accent-vlak:rgba(224,185,112,.10);
  --champagne:#E0B970;   /* het goud als bron voor het goudglas (rand, gloed, tekst) */
  --groen:#4CC07A;  --rood:#E4736B;
  --lijn:rgba(244,247,250,.13);  --lijn-op:rgba(244,247,250,.24);

  /* --- letters --- */
  --sans:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;
  --kop:'Clash Display',var(--sans);

  /* --- maat --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:96px; --s10:140px;
  --r-s:6px; --r-m:10px; --r-l:14px; --r-xl:20px; --r-pil:999px;
  --maxw:1240px; --marge:clamp(20px,4vw,48px); --kopbalk:64px;

  /* --- beweging ---
     Vaste curves. De ingebouwde CSS-easings zijn te slap voor interface-werk;
     deze drie komen uit een bestaande set en worden nergens met de hand
     bijgesteld. ease-in bestaat hier niet: die begint traag op precies het
     moment dat de gebruiker kijkt. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-lade:cubic-bezier(.32,.72,0,1);
  /* De veer (10-09, uit de glasdemo): een doorgerekende onderkritisch
     gedempte veer (uitslag 1,16, uitgedempt op 1,0) voor de TERUGWEG van
     een indrukking — indrukken zelf blijft meteen (--d-druk). Browsers
     zonder linear() vallen terug op ease: zelfde beweging, zonder naveer. */
  --veer:linear(0, 0.121 4.2%, 0.385 8.3%, 0.675 12.5%, 0.915 16.7%,
    1.074 20.8%, 1.15 25%, 1.161 29.2%, 1.132 33.3%, 1.086 37.5%,
    1.04 41.7%, 1.004 45.8%, 0.983 50%, 0.974 54.2%, 0.975 58.3%,
    0.981 62.5%, 0.988 66.7%, 0.995 70.8%, 1.001 75%, 1.003 79.2%,
    1.004 83.3%, 1.004 87.5%, 1.003 91.7%, 1.002 95.8%, 1);

  --d-druk:160ms;      /* indrukken van een knop */
  --d-klein:180ms;     /* tooltip, klein paneel */
  --d-menu:220ms;      /* uitklap, keuzelijst */
  --d-paneel:280ms;    /* vraag open- en dichtklappen */
  --d-verhaal:560ms;   /* onthullen bij scrollen — alleen op verkooppagina's */
}
/* Arabisch: Clash en Satoshi hebben geen Arabische tekens; hier nemen Reem Kufi
   (koppen) en Readex Pro (tekst) het over, met dezelfde rolverdeling. Staat
   buiten :root, zodat de maat-tokens voor iedereen gelden. */
[dir="rtl"]{
  --sans:'Readex Pro',system-ui,sans-serif;
  --kop:'Reem Kufi',var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--tekst);
  font:400 1rem/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* De achtergrond-render: nachtblauw met gouden lichtbanen (media/
   vipsz-achtergrond-goud.webp, 16 kB). Vast in het venster, met een
   donkere waas erover zodat tekst overal blijft halen wat WCAG vraagt.
   Hij tekent boven de body-achtergrondkleur en onder alle inhoud. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(7,21,34,.5), rgba(7,21,34,.75)),
    url("/media/vipsz-achtergrond-goud.webp") center / cover no-repeat;
}
@media print{ body::before{display:none} }
img,video,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-s)}
::selection{background:var(--accent);color:#0A1621}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- typografie
   Tracking is maatafhankelijk. Eén vaste letter-spacing is per definitie
   ergens verkeerd: grote tekst leest te los, kleine tekst te dicht. */
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;margin:0}
.display{font-size:clamp(2.5rem,5.6vw,4rem);line-height:.98;letter-spacing:-.032em}
h2{font-size:clamp(1.75rem,3vw,2.35rem);line-height:1.12;letter-spacing:-.015em}
/* Clash Display heeft een smalle spatie; zonder extra woordruimte lopen woorden
   in koppen aan elkaar ("inelkerit.", audit 10-09). */
h1,h2,h3,h4{word-spacing:.05em}
h3{font-size:1.0625rem;line-height:1.3;letter-spacing:-.008em;font-weight:600}
p{margin:0}
/* hidden hoort te WINNEN. De browser-standaard [hidden]{display:none} verliest
   van elke display:flex of display:grid die een klasse zet — en dat gebeurde:
   het urenveld stond met het attribuut erop gewoon in beeld, op elke breedte.
   Eén regel maakt het attribuut weer betrouwbaar, sitebreed. */
[hidden]{display:none!important}
.lood{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.62;color:var(--tekst-2);max-width:56ch}
.klein{font-size:.8125rem;line-height:1.55;color:var(--tekst-3)}
.oog{font-family:var(--kop);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
     text-transform:uppercase;color:var(--accent-dof)}
.cijfer{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--marge)}
.sectie{padding-block:clamp(64px,10vw,var(--s10))}
.kop-blok{display:grid;gap:var(--s5);margin-bottom:var(--s8)}

/* -------------------------------------------------------------------- knop
   Terugkoppeling op het INdrukken, niet op het loslaten. scale() neemt het
   label en de iconen mee, en dat is wat het als een fysieke druk laat lezen. */
.knop{
  position:relative;overflow:hidden;   /* de hover-lichtbaan wordt hierdoor geknipt */
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  /* Pil, net als .knop op de homepage (voorstel 06-09, glas 10-09).
     Audit 11-09 (zander-ui, alle pagina's gemeten): de homepage stond op
     999 en de dienstpagina's op 10, twee rondingen voor één rol. Nu
     overal de pil; de menu-items houden hun concentrische 8 px
     (r-xl 20 min de 12 px binnenruimte). */
  min-height:48px;padding:0 var(--s5);border-radius:var(--r-pil);
  font:700 .9375rem/1 var(--sans);letter-spacing:-.004em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  /* Asymmetrisch, zoals een echte knop: loslaten veert na (500ms veer),
     indrukken is meteen (--d-druk, in de :active-regel hieronder). */
  transition:transform .5s var(--veer),
             background var(--d-klein) var(--ease-out),
             border-color var(--d-klein) var(--ease-out),
             color var(--d-klein) var(--ease-out);
}
.knop:active{transform:scale(.97);
  transition-duration:var(--d-druk);transition-timing-function:var(--ease-lade)}
/* Een <button> krijgt van de browser Arial; hier erft hij de letter van de pagina. */
button,input,select,textarea{font:inherit}
/* DONKER GOUDGLAS (10-09, uit de glasdemo die de eigenaar goedkeurde; "doe
   alles"): de gouden knop is geen goudverf meer maar een bijna-zwarte
   glasplaat met maar 14% goud in de melk, een dunne oplichtende gouden
   rand, een warme gloed en champagnekleurige tekst. Een hoog goudpercentage
   in donkere melk wordt modderig olijf — geprobeerd en teruggedraaid. De
   tint zit in de rand, de gloed en de tekst. Geldt voor elke primaire knop:
   .knop-vol op alle pagina's en de "Boek deze rit"-knop (.glas-p). */
.knop-vol,.knop-glas.glas-p{
  /* HELDER glas (eigenaar 10-09: "niet doorzichtig — het goud als accent,
     het reflecterende"): de melk is bijna weg, de film schemert erdoorheen;
     het goud zit in de rand, de onderrand, de gloed en de tekst. De
     reflectie is de lichtveeg linksboven die naar een goudzweem
     rechtsonder loopt. */
  background-color:color-mix(in srgb,var(--champagne) 12%,rgba(10,8,4,.22));
  background-image:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 45%,
    color-mix(in srgb,var(--champagne) 18%,transparent) 100%);
  color:color-mix(in srgb,var(--champagne) 45%,#FFF6E0);
  text-shadow:0 1px 2px rgba(0,0,0,.45);   /* leesbaar op het felste frame van de film */
  border:1px solid color-mix(in srgb,var(--champagne) 75%,rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(12px) saturate(180%) brightness(1.05);
  backdrop-filter:blur(12px) saturate(180%) brightness(1.05);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--champagne) 45%,rgba(255,255,255,.5)),
             inset 0 -1px 0 color-mix(in srgb,var(--champagne) 40%,transparent),
             inset 0 0 18px rgba(0,0,0,.12),
             0 8px 24px -12px rgba(0,0,0,.7),
             0 0 24px color-mix(in srgb,var(--champagne) 24%,transparent)}
/* indrukken en vasthouden: het glas licht op als gel (de scale zit op .knop) */
.knop-vol:active,.knop-glas.glas-p:active{filter:brightness(1.08) saturate(1.1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .knop-vol,.knop-glas.glas-p{background-color:#1D180C}
}
.knop-lijn{
  background:rgba(244,247,250,.07);color:var(--tekst);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-color:rgba(244,247,250,.16);
  box-shadow:inset 0 1px 0 rgba(244,247,250,.14)}
.knop-stil{background:transparent;color:var(--tekst-2);min-height:40px;padding:0 var(--s3)}

/* De hover-lichtbaan: één streep die bij aanwijzen overtrekt. Geparkeerd
   links; de overgang loopt alleen heen, dus geen terugschietende baan. */
.knop::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
  transform:translateX(-130%)}

/* Aanraakschermen vuren een valse hover af bij een tik. Daarom alleen op een
   echte muis. */
@media (hover:hover) and (pointer:fine){
  .knop:hover{transform:translateY(-1.5px)}
  .knop:hover::before{transform:translateX(130%);
    transition:transform 650ms var(--ease-out)}
  .knop-vol:hover,.knop-glas.glas-p:hover{
    box-shadow:inset 0 1px 0 color-mix(in srgb,var(--champagne) 55%,rgba(255,255,255,.6)),
               inset 0 -1px 0 color-mix(in srgb,var(--champagne) 50%,transparent),
               inset 0 0 18px rgba(0,0,0,.10),
               0 12px 30px -14px rgba(0,0,0,.75),
               0 0 32px color-mix(in srgb,var(--champagne) 34%,transparent)}
  .knop-lijn:hover{border-color:var(--accent);color:var(--accent);
    background:rgba(244,247,250,.11)}
  .knop-stil:hover{color:var(--tekst)}
}

/* ------------------------------------------------------------------- velden */
.veld{display:grid;gap:var(--s2)}
.veld label{font-size:.8125rem;font-weight:500;color:var(--tekst-2)}
.veld input,.veld select,.veld textarea{
  min-height:52px;padding:0 var(--s4);border-radius:var(--r-m);
  background:var(--vlak-1);border:1px solid var(--lijn);color:var(--tekst);
  font:400 17px/1 var(--sans);  /* 17px: iOS zoomt hieronder in bij aantikken */
  transition:border-color var(--d-klein) var(--ease-out),
             background var(--d-klein) var(--ease-out);
}
.veld textarea{min-height:120px;padding:var(--s3) var(--s4);line-height:1.6;resize:vertical}
.veld input::placeholder,.veld textarea::placeholder{color:var(--tekst-3)}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  border-color:var(--accent);background:var(--vlak-2);outline:none}
.veld .hulp{font-size:.75rem;color:var(--tekst-3)}
.veld .fout{font-size:.75rem;color:var(--rood)}
.veld[data-fout] input,.veld[data-fout] select,.veld[data-fout] textarea{border-color:var(--rood)}
@media (hover:hover) and (pointer:fine){
  .veld input:hover,.veld select:hover,.veld textarea:hover{border-color:var(--lijn-op)}
}

/* ------------------------------------------------------------------ eiland
   Het menu is een los glazen eiland (iOS-stijl), geen balk over de breedte.
   Bovenaan de pagina: het volle eiland, gecentreerd. Scrolt u naar beneden,
   dan wijkt het en verschijnt rechtsboven een klein eiland met het woordmerk
   en drie streepjes. Beide zijn hetzelfde soort glas: blur, verzadiging, een
   lichte bovenrand die als vangend licht leest, en een binnenrand van 1px. */
.eiland,.eiland-mini,.eiland-menu{
  background:rgba(12,29,43,.58);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(244,247,250,.10);
  /* De bolling (10-09, uit de glasdemo): licht op de bovenrand, een glimp
     op de onderrand, lichtinval linksboven en schaduw in de onderbuik —
     vier binnenlagen die van een plat vlak een bol vlak maken. */
  box-shadow:inset 0 1px 0 rgba(244,247,250,.14),
             inset 0 -1px 1px rgba(255,255,255,.05),
             inset 2px 5px 12px rgba(255,255,255,.06),
             inset -2px -6px 12px rgba(0,0,0,.22),
             0 18px 40px -18px rgba(0,0,0,.6);
}
.eiland{
  /* NIET left:50% met translateX(-50%). Bij vaste positionering loopt het
     omhullende blok dan van het midden tot de rechterrand, dus is de
     beschikbare breedte de HELFT van het venster. De balk werd daardoor rond
     1000px in elkaar geduwd: "Wat het kost" viel over drie regels en "Boek nu"
     over twee. De verschuiving corrigeerde alleen waar hij stond, niet hoe
     breed hij mocht zijn. Met inset 0 en marge-auto heeft hij de volle
     vensterbreedte en blijft hij toch gecentreerd. */
  position:fixed;top:14px;left:0;right:0;z-index:60;
  width:max-content;max-width:calc(100vw - 28px);margin-inline:auto;
  display:flex;align-items:center;gap:var(--s5);
  padding:8px 12px 8px var(--s5);border-radius:var(--r-pil);
  transition:transform var(--d-menu) var(--ease-out),
             opacity var(--d-menu) var(--ease-out);
}
.eiland[data-weg]{opacity:0;transform:translateY(-16px) scale(.96);
  pointer-events:none}
.merk{font-family:var(--kop);font-weight:700;font-size:1rem;letter-spacing:.13em;
      text-decoration:none;display:inline-flex;align-items:center}
.merk img{display:block;width:auto}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a:not(.knop){font-size:.875rem;color:var(--tekst-2);text-decoration:none;
                  transition:color var(--d-klein) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav a:not(.knop):hover{color:var(--tekst)}}
/* De volle balk is vervangen door het glazen burgereiland: vijf dingen
   naast elkaar was te veel. De opmaak blijft staan voor het geval hij
   terugkomt; alleen deze regel verbergt hem. */
.eiland{display:none}

.eiland-mini{
  position:fixed;top:14px;right:14px;z-index:61;
  display:flex;align-items:center;gap:var(--s3);
  min-height:36px;box-sizing:border-box;padding:0 12px 0 var(--s4);border-radius:var(--r-pil);   /* 36 hoog, gelijk aan de taalpil (10-09) */
  cursor:pointer;border:1px solid rgba(244,247,250,.10);
  color:var(--tekst);
  transition:transform var(--d-menu) var(--ease-out),
             opacity var(--d-menu) var(--ease-out);
}
.eiland-mini:active{transform:scale(.96)}
/* Weg bij naar beneden scrollen en zodra het boekformulier open is (wens
   eigenaar 01-09): het eiland stond anders over de hero en over de
   stappenbalk heen. Naar boven scrollen brengt hem terug. */
.eiland-mini[data-weg]{opacity:0;transform:translateY(-16px) scale(.96);pointer-events:none}
/* Zolang het boekformulier openstaat is het eiland een kruisje om weg te
   kunnen (wens eigenaar 03-09): altijd in beeld, ook na wegscrollen, en de
   drie streepjes staan als X. */
.eiland-mini[data-sluit]{opacity:1;transform:none;pointer-events:auto}
.eiland-mini[data-sluit] .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.eiland-mini[data-sluit] .burger i:nth-child(2){opacity:0}
.eiland-mini[data-sluit] .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
/* Het eiland is 34px hoog en dat oogt goed — maar het is de enige navigatie
   en een duim vraagt 44. Onzichtbaar raakvlak, zelfde aanpak als .uur-k. */
.eiland-mini::after{content:"";position:absolute;left:0;right:0;
  top:50%;height:44px;transform:translateY(-50%)}
.eiland-mini .merk{font-size:.8125rem}
.burger{display:grid;gap:4px;width:18px}
.burger i{display:block;height:1.5px;border-radius:2px;background:var(--tekst);
  transition:transform var(--d-menu) var(--ease-out),opacity var(--d-klein)}
.eiland-mini[aria-expanded="true"] .burger i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.eiland-mini[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
.eiland-mini[aria-expanded="true"] .burger i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* het uitklapmenu groeit uit het mini-eiland — transform-origin rechtsboven */
.eiland-menu{
  position:fixed;top:64px;right:14px;z-index:60;min-width:230px;
  border-radius:var(--r-xl);padding:var(--s3);
  display:grid;gap:var(--s1);
  opacity:0;transform:translateY(-8px) scale(.95);transform-origin:top right;
  pointer-events:none;
  transition:transform var(--d-menu) var(--ease-out),
             opacity var(--d-menu) var(--ease-out);
}
.eiland-menu[data-open]{opacity:1;transform:none;pointer-events:auto}
/* Concentrisch: menu --r-xl (20) met --s3 (12) inzet → item 8, geen --r-m. */
.eiland-menu a{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);
  border-radius:calc(var(--r-xl) - var(--s3));font-size:.9375rem;color:var(--tekst);text-decoration:none;
  transition:background var(--d-klein) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .eiland-menu a:hover{background:rgba(244,247,250,.07)}}
.eiland-menu .knop{margin-top:var(--s2)}

/* --------------------------------------------------------------- glasknoppen */
.knop-glas{
  background:rgba(244,247,250,.08);color:var(--tekst);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(244,247,250,.14);
  box-shadow:inset 0 1px 0 rgba(244,247,250,.12);
}
@media (hover:hover) and (pointer:fine){
  .knop-glas:hover{background:rgba(244,247,250,.13);border-color:rgba(244,247,250,.22)}}

/* ------------------------------------------------------------------- vlakken */
.paneel{padding:var(--s6);border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--vlak-2),var(--vlak-1));
  border:1px solid var(--lijn);
  box-shadow:inset 0 1px 0 rgba(244,247,250,.06), 0 24px 48px -28px rgba(0,0,0,.7)}
.vlak{padding:var(--s6);border-radius:var(--r-xl);background:var(--vlak-1);
  border:1px solid var(--lijn);box-shadow:inset 0 1px 0 rgba(244,247,250,.05)}

/* -------------------------------------------------------------------- lijst */
.regels{border-top:1px solid var(--lijn)}
.regel{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:baseline;
       padding:var(--s4) 0;border-bottom:1px solid var(--lijn)}
.regel dt{font-size:.9375rem;color:var(--tekst)}
.regel dd{margin:0;font-family:var(--kop);font-weight:600;font-size:1.0625rem;
          letter-spacing:-.01em;white-space:nowrap}
.regel small{display:block;margin-top:var(--s1);font-size:.8125rem;color:var(--tekst-3);
             font-family:var(--sans);font-weight:400}
.regel[data-uit] dd{color:var(--groen)}

/* ------------------------------------------------------------------- vragen
   Hoogte is de enige eigenschap zonder transform-equivalent, dus die mag hier.
   Daarom ook kort gehouden: dit kost layout op elke frame. */
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{
  display:flex;align-items:center;gap:var(--s4);justify-content:space-between;
  padding:var(--s5) 0;min-height:56px;cursor:pointer;list-style:none;
  font-family:var(--kop);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;
  transition:color var(--d-klein) var(--ease-out);
}
.vraag summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.vraag summary:hover{color:var(--accent)}}
.vraag .kruis{flex:none;width:20px;height:20px;position:relative}
.vraag .kruis::before,.vraag .kruis::after{
  content:'';position:absolute;inset:50% 0 auto;height:1.5px;background:currentColor;
  border-radius:2px;transition:transform var(--d-paneel) var(--ease-out)}
.vraag .kruis::after{transform:rotate(90deg)}
.vraag[open] .kruis::after{transform:rotate(0)}
.vraag-antwoord{overflow:hidden}
.vraag-antwoord p{padding:0 0 var(--s5);max-width:64ch;color:var(--tekst-2);
                  font-size:.9375rem;line-height:1.68}

/* --------------------------------------------------------------------- voet */
.voet{border-top:1px solid var(--lijn);padding-block:var(--s7) var(--s8)}
.voet-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s6)}
@media(max-width:760px){.voet-grid{grid-template-columns:1fr;gap:var(--s5)}}
.voet h3{font-family:var(--sans);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
         color:var(--tekst-3);font-weight:600;margin-bottom:var(--s3)}
.voet ul{margin:0;padding:0;list-style:none;display:grid;gap:0;
         font-size:.875rem;color:var(--tekst-2)}
/* 44 px raakvlak op de voetlinks als echte rijen (audit 11-09): de
   oplossing van 01-09 (padding erbij, negatieve marge eraf) gaf dozen van
   46 px op een steek van 30 px, zodat elk raakvlak 16 px over het volgende
   lag en de onderste won. Nu is elke link een rij van 44 px; de lijst is
   daardoor iets hoger, maar elke duim raakt wat hij bedoelt. */
.voet a{text-decoration:none;transition:color var(--d-klein) var(--ease-out);
        display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover) and (pointer:fine){.voet a:hover{color:var(--accent)}}
.voet-onder{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--lijn);
            display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:.75rem;color:var(--tekst-3)}

/* ------------------------------------------------------------- laadtoestand
   Skelet in de maat van wat er komt, geen ronddraaiend wieltje. Het patroon
   loopt door een CSS-animatie, dus hij blijft soepel terwijl de pagina laadt. */
.skelet{border-radius:var(--r-m);background:
  linear-gradient(100deg,var(--vlak-1) 30%,var(--vlak-3) 50%,var(--vlak-1) 70%)
  0 0/300% 100%;animation:schuif 1.6s linear infinite}
@keyframes schuif{to{background-position:-300% 0}}
.leeg{padding:var(--s8) var(--s5);text-align:center;border:1px dashed var(--lijn);
      border-radius:var(--r-xl);color:var(--tekst-3)}

/* ---------------------------------------------------------------- onthullen
   Alleen op verkooppagina's, één keer per element. Functionele schermen die
   iemand dagelijks ziet krijgen dit niet. */
/* 6 px en niet 18: op een groot scherm (auto, tv) las 18 px als "de pagina
   schuift zomaar omhoog" (eigenaar 03-09). Het is nu vooral een fade. */
[data-onthul]{opacity:0;transform:translate3d(0,6px,0);
  transition:opacity var(--d-verhaal) var(--ease-out),
             transform var(--d-verhaal) var(--ease-out);
  transition-delay:var(--vertraag,0ms)}
[data-onthul].zichtbaar{opacity:1;transform:none}

/* ------------------------------------------------------------------ voorkeur
   Minder beweging betekent zachter, niet niets: kleur- en dekkingsovergangen
   die begrip ondersteunen blijven, verplaatsingen verdwijnen. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-onthul]{opacity:1;transform:none;transition:none}
  .knop:active{transform:none;background:var(--accent-vlak)}
  .knop::before{display:none}
  .skelet{animation:none;background:var(--vlak-1)}
  *,*::before,*::after{transition-duration:120ms!important;animation-duration:.01ms!important;
                       animation-iteration-count:1!important}
}
@media (prefers-reduced-transparency:reduce){
  .eiland,.eiland-mini,.eiland-menu{background:var(--vlak-1);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:var(--lijn-op)}
  .knop-glas{background:var(--vlak-3);-webkit-backdrop-filter:none;backdrop-filter:none}
  .knop-vol,.knop-glas.glas-p{background-color:#1D180C;-webkit-backdrop-filter:none;backdrop-filter:none}
  .knop-lijn{background:var(--vlak-3);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ------------------------------------------------------------- lichte modus
   glas-lens.js zet .gpu-licht op <html> bij een geïntegreerde of zwakke
   grafische kaart (10-09, "laggy" op een i5-laptop). Blur is het duurste
   wat een pagina kan doen boven een spelende video: kleiner en zonder
   verzadiging, en de eeuwige glansvegen staan stil. Het glas, de rand en
   het goud blijven — het premium zit niet in de framekosten. */
/* Geen enkele backdrop-filter meer in de lichte modus (10-09, na onderzoek):
   op Intel-laptops maakt élke blur die over een spelende video ligt de
   video schokkerig — een bekend Chromium-probleem, ook bij 8px en ook met
   hardwareversnelling uit. Dus frosted vlakken, dezelfde als bij
   verminderde doorzichtigheid, iets doorschijnend zodat het nog glas leest. */
.gpu-licht .eiland,.gpu-licht .eiland-mini,.gpu-licht .eiland-menu,
.gpu-licht .taal-eiland,.gpu-licht .eiland-boek{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background-color:rgba(12,29,43,.86)}
.gpu-licht .knop-vol,.gpu-licht .knop-glas.glas-p{
  -webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(20,17,9,.86)}
.gpu-licht .knop-glas,.gpu-licht .knop-lijn{
  -webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(20,42,60,.86)}
.gpu-licht .knop-vol::before,.gpu-licht .glas-p::after{animation:none}
@media (prefers-contrast:more){
  :root{--lijn:rgba(244,247,250,.34);--lijn-op:rgba(244,247,250,.5);
        --tekst-2:#C3CCD6;--tekst-3:#B2BCC7}
}
@media print{
  .eiland,.eiland-mini,.eiland-menu,video{display:none}
  body{background:#fff;color:#000}
}