/* ==========================================================================
   MK Detailing — ontwerp "De lichtcabine"
   Alles met de hand geschreven. Geen framework, geen externe fonts.
   Kleuren zijn afgeleid van de enige foto van een exclusieve auto:
   de scene is volledig neutraal grijs/zwart met exact een verzadigde tint,
   het blauw van de Ferrari (gemeten H222 S1.00 V0.33 = #001854).
   Het accent is de opgelichte variant van diezelfde tint: de kleur die dat
   blauw krijgt zodra de hexagonverlichting erop valt.
   ========================================================================== */

:root{
  /* donkere basis */
  --ink:        #05070C;   /* pagina */
  --paneel:     #0C1017;   /* verhoogd vlak */
  --paneel-2:   #121722;   /* kaart */
  --lijn:       #1E2533;   /* haarlijn */
  --lijn-fel:   #2C3646;   /* zichtbare rand */
  --tekst:      #F2F5FA;   /* 18,44:1 op --ink */
  --stil:       #A9B3C2;   /* 9,51:1 op --ink */
  --accent:     #7AA7FF;   /* 8,44:1 op --ink */
  --accent-dof: #35528F;
  --fout-donker:#FFB4A8;   /* 11,85:1 op --ink */

  /* lichte basis (alleen het aanvraagpaneel) */
  --licht:      #E7EBF2;
  --licht-2:    #DCE2EC;
  --licht-tekst:#05070C;   /* 16,85:1 op --licht */
  --licht-stil: #4B5565;   /* 6,30:1 op --licht */
  --licht-rand: #5C6675;   /* 4,9:1 op --licht, ruim boven de 3:1 voor bediening */
  --licht-blauw:#1B3FB0;   /* 7,37:1 op --licht */
  --licht-fout: #B3261E;   /* 5,47:1 op --licht */

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Variable Text",
          Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo,
          Consolas, "Liberation Mono", monospace;

  --kop-hoogte: 60px;
  --rail: 0px;
  --soepel: cubic-bezier(.16,1,.3,1);
}

/* ---------- basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
main:focus{ outline:none; }
body{
  margin:0;
  background:var(--ink);
  color:var(--tekst);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--accent); }
h1,h2,h3{ margin:0; line-height:1.06; letter-spacing:-.022em; font-weight:800; text-wrap:balance; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
.licht-paneel :where(a,button,input,textarea):focus-visible{
  outline-color:var(--licht-blauw);
}

.overslaan{
  position:absolute; left:12px; top:-100px; z-index:200;
  background:var(--accent); color:var(--ink); font-weight:700;
  padding:.7rem 1.1rem; border-radius:8px; text-decoration:none;
  transition:top .2s;
}
.overslaan:focus{ top:12px; }

.wrap{
  width:min(100% - 2.4rem, 1240px);
  margin-inline:auto;
  padding-left:var(--rail);
}

/* ---------- typografische bouwstenen ---------- */
.label{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.label::after{
  content:""; flex:1; height:1px; max-width:120px;
  background:linear-gradient(90deg,var(--accent-dof),transparent);
}
.label--stil{ color:var(--stil); }
.label--stil::after{ background:linear-gradient(90deg,var(--lijn-fel),transparent); }

.kop-xl{ font-size:clamp(2.35rem,1.4rem + 4.2vw,4.6rem); }
.kop-l { font-size:clamp(1.9rem,1.25rem + 2.7vw,3.1rem); }
.kop-m { font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem); }
.lead  { font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--stil); max-width:56ch; }
.mono  { font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--stil); }

section{ position:relative; scroll-margin-top:calc(var(--kop-hoogte) + 14px); }
.band{ padding:clamp(4.5rem,10vw,8.5rem) 0; }
.band + .band{ border-top:1px solid var(--lijn); }

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:52px; padding:.9rem 1.6rem;
  font:600 1rem/1 var(--sans);
  border-radius:10px; border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--soepel), background-color .18s, border-color .18s;
}
.knop--vol{ background:var(--accent); color:var(--ink); }   /* 8,44:1 */
.knop--vol .pijl{ transition:transform .25s var(--soepel); }
.knop--rand{ background:transparent; color:var(--tekst); border-color:var(--lijn-fel); }
.knop--licht{ background:var(--licht-blauw); color:#fff; }  /* 8,81:1 */
@media (hover:hover) and (pointer:fine){
  .knop--vol:hover{ background:#9CBDFF; transform:translateY(-2px); }
  .knop--vol:hover .pijl{ transform:translateX(4px); }
  .knop--rand:hover{ border-color:var(--accent); color:var(--accent); }
  .knop--licht:hover{ background:#16349A; }
}
.knop--vol:active,.knop--rand:active,.knop--licht:active{ transform:translateY(0); }

/* ==========================================================================
   Kop
   ========================================================================== */
.kop{
  position:sticky; top:0; z-index:60;
  height:var(--kop-hoogte);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background-color .3s;
}
.kop.vast{ border-bottom-color:var(--lijn); background:color-mix(in srgb, var(--ink) 96%, transparent); }
.kop .wrap{ display:flex; align-items:center; gap:1.25rem; }

.merk{
  display:flex; align-items:baseline; gap:.6rem; text-decoration:none;
  color:var(--tekst); margin-right:auto;
  min-height:44px; padding-block:.55rem;      /* tikdoel */
}
.merk__mark{
  width:9px; height:9px; flex:none; align-self:center;
  background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 12px rgba(122,167,255,.7);
}
.merk__naam{ font-weight:800; letter-spacing:.04em; font-size:1rem; white-space:nowrap; }
.merk__plaats{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stil); }

.kop-nav{ display:none; gap:1.5rem; }
.kop-nav a{
  font-size:.9rem; color:var(--stil); text-decoration:none;
  padding:.4rem 0; border-bottom:1px solid transparent;
}
@media (hover:hover) and (pointer:fine){ .kop-nav a:hover{ color:var(--tekst); border-bottom-color:var(--accent); } }
.kop .knop{ min-height:40px; padding:.55rem 1.05rem; font-size:.9rem; }
.kop__cta{ display:none; }

@media (min-width:900px){
  .kop-nav{ display:flex; }
  .kop__cta{ display:inline-flex; }
  .merk__plaats{ display:inline; }
}
@media (max-width:520px){ .merk__plaats{ display:none; } }

/* ==========================================================================
   Zijrail: het lichtrek van de pagina
   ========================================================================== */
.rail{ display:none; }
@media (min-width:1280px){
  :root{ --rail:78px; }
  .rail{
    display:block; position:fixed; left:0; top:0; z-index:55;
    width:78px; height:100svh; pointer-events:none;
  }
  .rail__lijn{
    position:absolute; left:38px; top:16vh; bottom:16vh; width:1px;
    background:linear-gradient(180deg,transparent,var(--lijn-fel) 12%,var(--lijn-fel) 88%,transparent);
  }
  .rail__gloed{
    position:absolute; left:33px; width:11px; height:11px; border-radius:50%;
    background:var(--accent); box-shadow:0 0 14px 3px rgba(122,167,255,.55);
    transform:translateY(-50%); top:16vh;
    transition:top .5s var(--soepel);
  }
  .rail ol{ list-style:none; margin:0; padding:0; position:absolute; inset:16vh 0; pointer-events:auto; }
  .rail li{ position:absolute; left:0; transform:translateY(-50%); }
  .rail a{
    display:flex; align-items:center; gap:.75rem;
    font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
    color:var(--stil); text-decoration:none; padding:.45rem 0 .45rem 26px;
  }
  .rail a::before{
    content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:5px; height:5px; border-radius:50%; background:var(--lijn-fel); transition:background-color .3s, transform .3s;
  }
  .rail__tekst{
    white-space:nowrap; opacity:0; transform:translateX(-6px);
    transition:opacity .25s, transform .25s; background:var(--ink);
    padding:.15rem .5rem; border-radius:5px;
  }
  .rail a:hover .rail__tekst, .rail a:focus-visible .rail__tekst{ opacity:1; transform:none; }
  .rail li.actief a{ color:var(--accent); }
  .rail li.actief a::before{ background:var(--accent); transform:translateY(-50%) scale(1.5); }
}

/* ==========================================================================
   01. De cabine
   ========================================================================== */
.cabine{
  position:relative; overflow:hidden;
  padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);
  min-height:calc(100svh - var(--kop-hoogte));
  display:flex; align-items:center;
}
.cabine__licht{
  position:absolute; z-index:0; pointer-events:none;
  width:80vw; max-width:900px; aspect-ratio:1;
  top:-28%; right:-16%;
  background:radial-gradient(circle,rgba(122,167,255,.20),rgba(122,167,255,.05) 42%,transparent 68%);
  filter:blur(10px);
}
.vloer{
  position:absolute; z-index:0; pointer-events:none;
  left:-40%; right:-40%; bottom:-2px; height:36vh;
  transform:perspective(420px) rotateX(74deg);
  transform-origin:50% 100%;
  background-image:
    repeating-linear-gradient(90deg,rgba(122,167,255,.16) 0 1px,transparent 1px 68px),
    repeating-linear-gradient(0deg ,rgba(122,167,255,.16) 0 1px,transparent 1px 68px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
          mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
}
.cabine .wrap{ position:relative; z-index:2; }
.cabine__grid{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; }

.cabine h1{ margin:0 0 1.1rem; }
.cabine h1 em{
  font-style:normal; color:var(--accent);
  text-shadow:0 0 34px rgba(122,167,255,.35);
}
.cabine__acties{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.9rem 0 0; }
.cabine__acties .knop--vol{ flex:1 1 100%; }

.bewijsregel{
  list-style:none; margin:2.2rem 0 0; padding:1.2rem 0 0;
  border-top:1px solid var(--lijn);
  display:grid; gap:.75rem;
}
.bewijsregel li{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.05em;
  color:var(--stil); display:flex; gap:.65rem; align-items:flex-start; line-height:1.5;
}
.bewijsregel svg{ flex:none; width:14px; height:14px; margin-top:.28rem; color:var(--accent); }

/* het lichtvenster */
.venster{
  position:relative;
  transform-style:preserve-3d;
  will-change:transform;
}
.venster__frame{
  position:relative; overflow:hidden;
  border-radius:16px;
  border:1px solid var(--lijn-fel);
  background:#020306;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(122,167,255,.06) inset;
  /* Precies de verhouding van de originele foto (739x1600). Zo wordt er niets
     weggesneden: de hele auto en de eigenaar blijven in beeld. Dit is het enige
     beeld van een exclusieve auto dat er is, dus daar mag niets vanaf. */
  aspect-ratio:739/1600; max-height:none;
}
.venster__frame img{
  width:100%; height:100%; object-fit:contain; object-position:50% 50%;
  transform:none;
}
.venster__glans{
  position:absolute; inset:-30%; pointer-events:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,32%),
             rgba(214,231,255,.20), rgba(214,231,255,.05) 26%, transparent 52%);
  mix-blend-mode:screen;
}
.venster__rand{
  position:absolute; inset:0; pointer-events:none; border-radius:16px;
  box-shadow:inset 0 -90px 120px -60px rgba(0,0,0,.95);
}
/* Het lichtrek hangt vóór de auto. Bewust ijl: het moet leesbaar zijn als
   armatuur, niet concurreren met de weerspiegeling in het lak eronder.
   Zodra je de muis beweegt schuiven rek en spiegelbeeld uit elkaar. */
.rig{
  position:absolute; z-index:3; pointer-events:none;
  width:58%; left:-4%; top:-3%;
  mix-blend-mode:screen; opacity:.5;
  filter:drop-shadow(0 0 8px rgba(176,206,255,.6)) drop-shadow(0 0 26px rgba(122,167,255,.35));
  will-change:transform;
  animation:ademen 9s ease-in-out infinite;
}
.rig polygon,.rig use{ fill:none; stroke:#E4EEFF; stroke-width:1.6; }
@keyframes ademen{ 0%,100%{opacity:.42} 50%{opacity:.6} }

.venster__bijschrift{
  margin:.9rem 0 0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.05em; color:var(--stil); line-height:1.5;
}

@media (min-width:900px){
  .cabine__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,480px); }
  .cabine__acties .knop--vol{ flex:0 0 auto; }
  .venster__frame{ aspect-ratio:739/1600; max-height:none; }
  .bewijsregel{ grid-template-columns:repeat(3,1fr); gap:1.4rem; }
}
@media (min-width:1280px){
  .cabine__grid{ grid-template-columns:minmax(0,1fr) minmax(0,520px); }
}

/* ==========================================================================
   02. Waarom hier — kolom met kleefkop, geen kaartenraster
   ========================================================================== */
.waarom__grid{ display:grid; gap:clamp(2.4rem,5vw,4rem); }
.waarom__kop p{ color:var(--stil); }

.argument{
  display:grid; gap:1.1rem;
  padding:clamp(1.6rem,3.5vw,2.4rem) 0;
  border-top:1px solid var(--lijn);
}
.argument:first-child{ border-top:0; padding-top:0; }
.argument p.argument__nr{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em;
  color:var(--accent);          /* 8,44:1, specificiteit boven .argument p */
  margin-bottom:0;
}
.argument h3{ font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem); }
.argument p{ color:var(--stil); max-width:62ch; }
.argument strong{ color:var(--tekst); font-weight:600; }
.argument__beeld{
  position:relative; overflow:hidden; border-radius:12px;
  border:1px solid var(--lijn-fel); background:#020306;
}
.argument__beeld img{ width:100%; height:100%; object-fit:cover; }

@media (min-width:900px){
  .waarom__grid{ grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(3rem,6vw,6rem); }
  .waarom__kop{ position:sticky; top:calc(var(--kop-hoogte) + 3.5rem); align-self:start; }
  .argument{ grid-template-columns:1fr; }
  .argument--beeld{ grid-template-columns:minmax(0,1fr) 210px; column-gap:2.2rem; align-items:start; }
  .argument--beeld .argument__nr,
  .argument--beeld h3,
  .argument--beeld p{ grid-column:1; }
  .argument--beeld .argument__beeld{ grid-column:2; grid-row:1 / span 3; aspect-ratio:412/370; }
}

/* ==========================================================================
   03. Werkwijze — doorsnede van het lak in 3D
   ========================================================================== */
/* Mobiel staat de doorsnede tussen de knoppen en de uitleg in, zodat je hem
   ziet veranderen op het moment dat je een bewerking aantikt. */
.werkwijze__grid{ display:grid; gap:clamp(2.2rem,5vw,3rem); align-items:start; }
.uitleg{ margin-top:0; }

.keuze{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.6rem; }
.keuze button{
  width:100%; text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:1rem;
  min-height:56px; padding:.85rem 1.1rem;
  background:var(--paneel); color:var(--tekst);
  border:1px solid var(--lijn); border-radius:11px;
  font:600 1.02rem/1.25 var(--sans);
  transition:border-color .22s, background-color .22s, transform .22s var(--soepel);
}
.keuze button .nr{ font-family:var(--mono); font-size:.72rem; color:var(--stil); letter-spacing:.12em; }
@media (hover:hover) and (pointer:fine){
  .keuze button:hover{ border-color:var(--accent-dof); transform:translateX(3px); }
}
.keuze button[aria-pressed="true"]{
  background:var(--paneel-2); border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset, -3px 0 0 0 var(--accent);
}
.keuze button[aria-pressed="true"] .nr{ color:var(--accent); }

.uitleg{
  margin-top:1.8rem; padding:1.5rem 1.5rem 1.6rem;
  background:var(--paneel); border:1px solid var(--lijn); border-radius:13px;
}
.uitleg h3{ font-size:1.15rem; margin-bottom:.6rem; }
.uitleg p{ color:var(--stil); }
.uitleg__laag{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem;
}
.uitleg__laag::before{ content:""; width:20px; height:2px; background:var(--accent); }
.uitleg a{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600;
  margin-top:.5rem; min-height:44px; padding-block:.5rem;   /* tikdoel */
}
.uitleg a .pijl{ transition:transform .25s var(--soepel); }
@media (hover:hover) and (pointer:fine){ .uitleg a:hover .pijl{ transform:translateX(4px); } }

/* de stapel */
.doorsnede{
  position:relative;
  perspective:1200px; perspective-origin:50% 42%;
  padding:clamp(2rem,7vw,3.5rem) 0;
  display:grid; place-items:center;
  min-height:290px;
}
.stapel{
  position:relative;
  width:min(56vw,230px); aspect-ratio:1;   /* gedraaid vult dit ruim 1,4x de breedte */
  transform-style:preserve-3d;
  transform:rotateX(60deg) rotateZ(-40deg);
  transition:transform .5s var(--soepel);
}
.laag{
  position:absolute; inset:0; border-radius:12px;
  border:1px solid rgba(180,205,255,.16);
  transform:translateZ(calc(var(--z) * 1px));
  transition:transform .6s var(--soepel), opacity .45s, box-shadow .45s, border-color .45s;
}
.laag--plaat  { --z:0;   background:linear-gradient(135deg,#2A303B,#171B24 60%,#0E1119); }
.laag--grond  { --z:24;  background:linear-gradient(135deg,#3A404C,#242A35); opacity:.94; }
.laag--basis  { --z:48;  background:linear-gradient(135deg,#12266B,#061542); opacity:.96; }
.laag--blank  { --z:80;  background:linear-gradient(135deg,rgba(190,215,255,.30),rgba(122,167,255,.10)); }
.laag--coating{ --z:112; background:linear-gradient(135deg,rgba(122,167,255,.42),rgba(122,167,255,.12)); opacity:0; }
.laag--ppf    { --z:112; background:linear-gradient(135deg,rgba(226,238,255,.34),rgba(160,196,255,.10)); opacity:0; }
.laag.aan{
  opacity:1;
  box-shadow:0 0 0 1px var(--accent), 0 0 34px -6px rgba(122,167,255,.75);
  border-color:var(--accent);
}
.laag--ppf.aan{ --z:126; }
.laag--coating.aan{ --z:118; }
.laag--plaat .deuk{
  position:absolute; left:50%; top:52%; width:34%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.85),rgba(0,0,0,.35) 45%,transparent 70%);
  opacity:0; transition:opacity .4s;
}
.laag--plaat.deuk-aan .deuk{ animation:deuk-eruit 1.5s var(--soepel) forwards; }
@keyframes deuk-eruit{
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1); }
  55%  { opacity:.9; transform:translate(-50%,-50%) scale(.9); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.15); }
}

.legenda{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; max-width:340px; margin-inline:auto; }
.legenda li{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--stil); padding:.42rem .55rem; border-radius:6px;
  transition:color .3s, background-color .3s;
}
.legenda li::before{ content:""; width:22px; height:3px; border-radius:2px; background:var(--lijn-fel); transition:background-color .3s; }
.legenda li.aan{ color:var(--tekst); background:rgba(122,167,255,.09); }
.legenda li.aan::before{ background:var(--accent); }
.legenda li.uit{ opacity:.4; }

@media (min-width:900px){
  .werkwijze__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,440px);
    column-gap:clamp(3rem,6vw,5.5rem); row-gap:2rem;
  }
  .ww-kop   { grid-column:1; grid-row:1; }
  .ww-uitleg{ grid-column:1; grid-row:2; }
  .ww-beeld { grid-column:2; grid-row:1 / span 2; align-self:center; }
  .stapel{ width:290px; }
  .doorsnede{ min-height:380px; }
}

/* ==========================================================================
   04. Werkfoto's
   ========================================================================== */
.eerlijk{
  border-left:2px solid var(--accent);
  padding:.2rem 0 .2rem 1.3rem;
  max-width:62ch; color:var(--stil);
  margin:1.6rem 0 0;
}
.eerlijk strong{ color:var(--tekst); font-weight:600; }

.mozaiek{ display:grid; gap:clamp(1rem,2.4vw,1.6rem); margin-top:clamp(2.5rem,6vw,4rem); }
.plaat{ position:relative; }
.plaat__beeld{
  position:relative; overflow:hidden; border-radius:13px;
  border:1px solid var(--lijn-fel); background:#020306;
}
.plaat__beeld img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--soepel); }
.plaat__beeld::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(214,231,255,.22) 50%,transparent 62%);
  transform:translateX(-120%);
}
.plaat.in .plaat__beeld::after{ transition:transform 1.1s ease .12s; transform:translateX(120%); }
@media (hover:hover) and (pointer:fine){
  .plaat:hover .plaat__beeld img{ transform:scale(1.045); }
}
.plaat figcaption{
  margin-top:.75rem; font-family:var(--mono); font-size:.71rem;
  letter-spacing:.05em; color:var(--stil); line-height:1.5;
  display:flex; gap:.6rem;
}
.plaat figcaption b{ color:var(--accent); font-weight:400; flex:none; }  /* 8,44:1 */

@media (min-width:760px){
  .mozaiek{ grid-template-columns:repeat(12,1fr); align-items:start; }
  .plaat--a{ grid-column:1 / span 5; }
  .plaat--b{ grid-column:6 / span 7; margin-top:3.4rem; }
  .plaat--c{ grid-column:1 / span 4; margin-top:1rem; }
  .plaat--d{ grid-column:5 / span 4; margin-top:4.2rem; }
  .plaat--e{ grid-column:9 / span 4; margin-top:.4rem; }
  .plaat--a .plaat__beeld{ aspect-ratio:4/5; }
  .plaat--b .plaat__beeld{ aspect-ratio:5/4; }
  .plaat--c .plaat__beeld{ aspect-ratio:4/5; }
  .plaat--d .plaat__beeld{ aspect-ratio:4/5; }
  .plaat--e .plaat__beeld{ aspect-ratio:1/1; }
}

/* ==========================================================================
   05. Aanvraag
   ========================================================================== */
.aanvraag__grid{ display:grid; gap:clamp(2.5rem,6vw,4rem); align-items:start; }
.werkplaats__foto{ overflow:hidden; border-radius:13px; border:1px solid var(--lijn-fel); margin:1.8rem 0 .8rem; }
.werkplaats__foto img{ width:100%; }
.gegevens{ list-style:none; margin:1.8rem 0 0; padding:1.5rem 0 0; border-top:1px solid var(--lijn); display:grid; gap:1.1rem; }
.gegevens dt{ font-family:var(--mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stil); margin-bottom:.2rem; }
.gegevens dd{ margin:0; }
.gegevens a{
  color:var(--accent); text-decoration-thickness:1px; text-underline-offset:3px;
  display:inline-flex; align-items:center; min-height:44px;   /* tikdoel */
}

/* het lichte paneel: het helderste vlak van de pagina */
.licht-paneel{
  background:var(--licht); color:var(--licht-tekst);
  border-radius:18px;
  padding:clamp(1.6rem,4.5vw,2.6rem);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 70px -30px rgba(122,167,255,.45);
}
.licht-paneel h3{ font-size:clamp(1.4rem,1.2rem + 1vw,1.9rem); margin-bottom:.5rem; }
.licht-paneel .intro{ color:var(--licht-stil); margin-bottom:1.6rem; }

.voortgang{ margin:0 0 1.7rem; }
.voortgang__balk{ height:5px; border-radius:3px; background:#C6CEDC; overflow:hidden; }
.voortgang__balk span{ display:block; height:100%; width:0%; background:var(--licht-blauw); transition:width .35s var(--soepel); }
.voortgang__tekst{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--licht-stil); margin:.55rem 0 0; }

.veld{ margin-bottom:1.15rem; }
.veld label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:.4rem; }
.veld .hint{ font-weight:400; color:var(--licht-stil); font-size:.85rem; }
.veld input,.veld textarea{
  width:100%; min-height:52px; padding:.85rem .95rem;
  font:400 1rem/1.5 var(--sans); color:var(--licht-tekst);
  background:#fff; border:1px solid var(--licht-rand); border-radius:9px;
  transition:border-color .2s, box-shadow .2s;
}
.veld textarea{ min-height:132px; resize:vertical; }
.veld input::placeholder,.veld textarea::placeholder{ color:#6C7686; }
.veld input:focus,.veld textarea:focus{ border-color:var(--licht-blauw); box-shadow:0 0 0 3px rgba(27,63,176,.18); }
.veld input[aria-invalid="true"],.veld textarea[aria-invalid="true"]{ border-color:var(--licht-fout); border-width:2px; }
.fout{ display:none; margin:.4rem 0 0; color:var(--licht-fout); font-size:.86rem; font-weight:600; }
.fout.zichtbaar{ display:block; }

.chips{ border:0; margin:0 0 1.35rem; padding:0; }
.chips legend{ font-weight:600; font-size:.92rem; padding:0; margin-bottom:.6rem; }
.chips legend .hint{ font-weight:400; color:var(--licht-stil); font-size:.85rem; }
.chips__rij{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip span{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:48px; padding:.7rem 1.05rem;
  border:1px solid var(--licht-rand); border-radius:999px;
  font-size:.92rem; cursor:pointer; background:#fff;
  transition:background-color .18s, border-color .18s, color .18s;
}
.chip span::before{
  content:""; width:15px; height:15px; border-radius:4px;
  border:1.5px solid var(--licht-rand); flex:none; transition:background-color .18s, border-color .18s;
}
.chip input:checked + span{ background:var(--licht-blauw); color:#fff; border-color:var(--licht-blauw); }
.chip input:checked + span::before{ background:#fff; border-color:#fff; }
.chip input:focus-visible + span{ outline:3px solid var(--licht-blauw); outline-offset:3px; }
@media (hover:hover) and (pointer:fine){ .chip span:hover{ border-color:var(--licht-blauw); } }

.licht-paneel .knop--licht{ width:100%; margin-top:.4rem; }
.kleine-letters{ margin:1.1rem 0 0; font-size:.83rem; color:var(--licht-stil); line-height:1.55; }
.kleine-letters a{ color:var(--licht-blauw); }

.gelukt{ display:none; text-align:left; }
.gelukt.aan{ display:block; }
.gelukt__vink{
  width:52px; height:52px; border-radius:50%; background:var(--licht-blauw);
  display:grid; place-items:center; margin-bottom:1.1rem;
}
.gelukt__vink svg{ width:26px; height:26px; color:#fff; }
form.weg{ display:none; }

@media (min-width:960px){
  .aanvraag__grid{ grid-template-columns:minmax(0,1fr) minmax(0,540px); gap:clamp(3rem,5vw,4.5rem); }
  .gegevens{ grid-template-columns:1fr 1fr; }
}

/* ==========================================================================
   Voet + mobiele balk
   ========================================================================== */
.voet{ border-top:1px solid var(--lijn); padding:clamp(2.5rem,6vw,4rem) 0 7.5rem; }
.voet__rij{ display:grid; gap:1.6rem; }
.voet a{
  color:var(--stil); text-decoration:none; border-bottom:1px solid var(--lijn-fel);
  display:inline-flex; align-items:center; min-height:44px;    /* tikdoel */
}
@media (hover:hover) and (pointer:fine){ .voet a:hover{ color:var(--accent); border-bottom-color:var(--accent); } }
.voet__klein{ font-size:.8rem; color:#6E7B8E; max-width:70ch; } /* 4,69:1 op --ink */
@media (min-width:760px){
  .voet__rij{ grid-template-columns:1.2fr 1fr 1fr; }
  .voet{ padding-bottom:clamp(2.5rem,6vw,4rem); }
}

.mobiele-balk{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  padding:.65rem .9rem calc(.65rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--lijn);
  transform:translateY(120%); transition:transform .35s var(--soepel);
}
.mobiele-balk.zichtbaar{ transform:none; }
.mobiele-balk .knop{ width:100%; }
@media (min-width:900px){ .mobiele-balk{ display:none; } }

/* ==========================================================================
   Onthullingen bij het scrollen
   Let op: nooit clip-path of visibility op het waargenomen element zelf,
   anders heeft het geen oppervlak en vuurt de waarnemer nooit.
   ========================================================================== */
[data-rv]{
  opacity:0; transform:translateY(24px);
  transition:opacity .75s var(--soepel), transform .75s var(--soepel);
}
[data-rv].in{ opacity:1; transform:none; }
[data-rv="zoom"]{ transform:scale(.965); }
[data-rv="rechts"]{ transform:translateX(-26px); }

/* ==========================================================================
   Beperkte beweging
   ========================================================================== */
.rm [data-rv]{ opacity:1 !important; transform:none !important; }
.rm .rig{ animation:none; }
.rm .plaat.in .plaat__beeld::after{ display:none; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-rv]{ opacity:1 !important; transform:none !important; }
}