/* Kaartendepot, gedeelde opmaak. Basis: concept-ivoor.html, gekozen door Bas. */

/* Lettertypen staan op de site zelf (map fonts), dus geen verbinding met Google Fonts. Variabele bestanden: een per familie. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/cormorant-garamond.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 500;font-display:swap;src:url("fonts/inter.woff2") format("woff2")}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}
body{background:#f4f1ea;color:#1a1916;font-family:"Inter",system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
section{overflow-x:hidden}
img{max-width:100%}

/* Vaste opmaakregels voor de hele site */
.wrap{width:min(1200px,calc(100% - 16vw));margin:0 auto}
.label{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.7}
.serif{font-family:"Cormorant Garamond",serif;font-weight:500}
.btn{display:inline-block;min-height:48px;padding:16px 34px;background:#151412;color:#f4f1ea;font-size:12px;letter-spacing:.24em;text-transform:uppercase;border:1px solid #151412;transition:background .2s,color .2s;cursor:pointer;font-family:"Inter",system-ui,sans-serif;font-weight:300;line-height:1.2}
.btn:hover{background:transparent;color:#151412}
.sub{display:inline-block;margin-left:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;border-bottom:1px solid rgba(26,25,22,.35);padding-bottom:3px}

/* Header, ongewijzigd uit het goedgekeurde eerste scherm */
header{position:fixed;inset:0 0 auto 0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 40px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
header .menu{justify-self:start;width:22px;height:11px;border-top:1px solid #fff;border-bottom:1px solid #fff;opacity:.85;background:none;cursor:pointer;padding:0;display:block}
header .menu-hit{justify-self:start;display:flex;align-items:center;min-height:48px;min-width:48px;margin-left:-13px;padding:0 13px;background:none;border:0;cursor:pointer}
header .brand{font-family:"Cormorant Garamond",serif;font-size:24px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:#fff}
header .brand small{display:block;font-family:"Inter",sans-serif;font-size:10px;letter-spacing:.3em;opacity:.7;text-align:center;margin-top:4px}
header .kopnav{justify-self:start;display:flex;gap:26px;align-items:center;min-height:48px}
header .kopnav a{opacity:.85;padding:6px 0;border-bottom:1px solid transparent}
header .kopnav a:hover{border-bottom-color:rgba(255,255,255,.7)}
@media(min-width:821px){header .menu-hit{display:none}}
header .cta{justify-self:end;border:1px solid rgba(255,255,255,.6);padding:11px 20px;letter-spacing:.2em}

/* Menu, een ivoren vlak over de pagina */
.menu-vlak{position:fixed;inset:0;z-index:20;background:#f4f1ea;color:#1a1916;display:none;overflow-y:auto}
.menu-vlak.open{display:block}
.menu-vlak .top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:26px 40px;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.menu-vlak .sluit{justify-self:start;background:none;border:0;cursor:pointer;font:inherit;letter-spacing:.22em;text-transform:uppercase;color:#1a1916;opacity:.7;min-height:48px;padding:0}
.menu-vlak .brand{font-family:"Cormorant Garamond",serif;font-size:24px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;color:#151412}
.menu-vlak .brand small{display:block;font-family:"Inter",sans-serif;font-size:10px;letter-spacing:.3em;opacity:.7;text-align:center;margin-top:4px}
.menu-vlak nav{width:min(1200px,calc(100% - 16vw));margin:10vh auto 0}
.menu-vlak nav a{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(32px,4vw,56px);line-height:1.1;padding:14px 0;border-bottom:1px solid rgba(26,25,22,.14);color:#151412}
.menu-vlak nav a:first-child{border-top:1px solid rgba(26,25,22,.14)}
.menu-vlak nav .btn{margin-top:44px;font-family:"Inter",system-ui,sans-serif;font-size:12px;line-height:1.2;padding:16px 34px;border:1px solid #151412;display:inline-block}
.menu-vlak .adres{width:min(1200px,calc(100% - 16vw));margin:64px auto 48px;font-size:14px;line-height:1.9;color:rgba(26,25,22,.7)}
body.menu-open{overflow:hidden}

/* 1. Hero, ongewijzigd uit het goedgekeurde eerste scherm */
.hero{position:relative;height:100vh;min-height:720px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.copy{align-self:center;padding:0 clamp(24px,8vw,120px);max-width:calc(640px + 2 * clamp(24px,8vw,120px));min-width:0}
.copy .eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.7;margin-bottom:22px}
.copy h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(34px,4.3vw,64px);line-height:1.04;color:#151412;hyphens:manual;overflow-wrap:normal;max-width:100%}
.copy p{margin-top:22px;font-size:16px;line-height:1.7;max-width:44ch;color:rgba(26,25,22,.7)}
.copy .btn{margin-top:34px}
.copy .sub{display:inline-block;margin-left:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;border-bottom:1px solid rgba(26,25,22,.35);padding-bottom:3px}

.visual{position:relative;background:linear-gradient(160deg,#141311 0%,#2a2620 55%,#3d3729 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.visual .kaart{width:min(25vw,370px)}
.visual .kaart{--basis:perspective(1400px) rotateY(-14deg) rotate(-3deg)}
.visual .cap{position:absolute;left:32px;bottom:28px;color:rgba(244,241,234,.75);font-size:12px;letter-spacing:.24em;text-transform:uppercase}

/* Kaartscan als los kaartje: afgeronde hoeken, diepe slagschaduw, lichte 3D-draai en dezelfde scan wazig als gloed erachter.
   Gebruik: <div class="kaart" style="--scan:url(img/scans/naam.webp)"><img src="img/scans/naam.webp" alt="Naam, Set, jaar"></div> */
.kaart{position:relative;flex:none}
.kaart::before{content:"";position:absolute;inset:-6%;background:var(--scan) center/100% 100% no-repeat;filter:blur(55px);opacity:.6;transform:scale(1.25);pointer-events:none}
.kaart img{position:relative;display:block;width:100%;height:auto;border-radius:4% / 2.9%;box-shadow:0 30px 60px rgba(0,0,0,.55),0 10px 22px rgba(0,0,0,.35);backface-visibility:hidden}

/* 2. Drie stappen als redactionele tekst */
.stappen{padding:160px 0 150px}
.stappen .kop{max-width:620px;margin-bottom:96px}
.stappen .kop h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-top:22px;color:#151412}
.stappen ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.stappen li .nr{font-size:12px;letter-spacing:.3em;color:#7a7368}
.stappen li h2,.stappen li h3{font-size:clamp(28px,2.4vw,36px);line-height:1.15;margin:26px 0 20px;color:#151412}
.stappen li p{font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:34ch}

/* 3. Beeldband, donker vlak met foto */
.band{position:relative;height:820px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 90px;background:linear-gradient(160deg,#141311 0%,#26221c 55%,#3a3427 100%);color:#f4f1ea;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,8,.7) 0%,rgba(10,9,8,0) 40%);z-index:1;pointer-events:none}
.bandfoto{position:absolute;left:0;right:0;top:0;bottom:200px;display:flex;justify-content:center;align-items:center;gap:3vw;padding:0 6vw;z-index:2}
.bandfoto .kaart{width:min(18vw,260px)}
.bandfoto .kaart:nth-child(1){--basis:perspective(1400px) rotateY(16deg) rotate(-3deg) translateY(24px)}
.bandfoto .kaart:nth-child(2){width:min(21vw,300px);z-index:2}
.bandfoto .kaart:nth-child(2){--basis:perspective(1400px) rotateY(-6deg) rotate(2deg)}
.bandfoto .kaart:nth-child(3){--basis:perspective(1400px) rotateY(-16deg) rotate(3deg) translateY(24px)}
.band .regel{position:relative;z-index:3;text-align:center;margin-top:0;width:100%;padding:0 24px}
.band .regel p{font-size:clamp(26px,2.6vw,38px);line-height:1.3;max-width:32ch;margin:0 auto;color:#f7f4ee}

/* 4. Wat we kopen, twee kolommen tekst en een fotovlak */
.kopen{padding:160px 0 150px}
.kopen .grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.kopen h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-top:22px;color:#151412}
.kopen .kolommen{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;padding-top:58px}
.kopen .kolommen p{font-size:clamp(20px,1.6vw,24px);line-height:1.5;padding:16px 0;border-top:1px solid rgba(26,25,22,.16);color:#151412;font-family:"Cormorant Garamond",serif;font-weight:500}
.kopen .kolommen p.noot{grid-column:1/-1;margin-top:40px;font-size:16px;line-height:1.7;color:rgba(26,25,22,.72);font-family:"Inter",sans-serif;font-weight:300;border:0;padding:0}
.kopen .foto{position:relative;overflow:hidden;margin-top:120px;background:linear-gradient(160deg,#141311 0%,#2a2620 60%,#3a3427 100%);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:28px 32px;color:rgba(244,241,234,.5);font-size:10px;letter-spacing:.28em;text-transform:uppercase}
.kopen .foto .kaart{position:absolute;width:32%;top:50%;left:50%}
.kopen .foto .kaart:nth-child(1){transform:translate(-78%,-52%)}
.kopen .foto .kaart:nth-child(1){--basis:perspective(1200px) rotateY(12deg) rotate(-9deg)}
.kopen .foto .kaart:nth-child(2){transform:translate(-22%,-44%);z-index:2}
.kopen .foto .kaart:nth-child(2){--basis:perspective(1200px) rotateY(-10deg) rotate(6deg)}

/* 5. Vertrouwen, een groot citaat */
.citaat{padding:150px 0 160px;background:#ebe7de}
.citaat blockquote{font-size:clamp(32px,4vw,58px);line-height:1.18;max-width:24ch;margin:0 auto;text-align:center;color:#151412}
.citaat .bron{text-align:center;margin-top:48px;font-size:15.5px;line-height:1.8;color:rgba(26,25,22,.78);max-width:52ch;margin-left:auto;margin-right:auto}

/* 6. Vragen met dunne lijnen */
.vragen{padding:160px 0 150px}
.vragen .grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.vragen h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-top:22px;color:#151412}
.vragen .lijst{border-top:1px solid rgba(26,25,22,.18)}
.vragen .vraag{padding:40px 0;border-bottom:1px solid rgba(26,25,22,.18)}
.vragen .vraag h2,.vragen .vraag h3{font-size:clamp(24px,2vw,30px);line-height:1.2;color:#151412}
.vragen .vraag p{margin-top:16px;font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:56ch}
.vragen .vraag p a,.tekst a,.stappen li p a{border-bottom:1px solid rgba(26,25,22,.35)}

/* 7. Slot, donker vlak */
.slot{position:relative;padding:170px 0 180px;text-align:center;background:linear-gradient(160deg,#141311 0%,#26221c 55%,#3a3427 100%);color:#f4f1ea;overflow:hidden}
.slot .glow3{position:absolute;inset:0;background:radial-gradient(ellipse 50% 45% at 50% 100%,rgba(230,168,23,.16),transparent 70%);pointer-events:none}
.slot .wrap{position:relative}
.slot h2{font-size:clamp(40px,5vw,72px);line-height:1.05;max-width:22ch;margin:0 auto;color:#f7f4ee}
.slot .btn{margin-top:52px;background:#f4f1ea;color:#151412;border-color:#f4f1ea}
.slot .btn:hover{background:transparent;color:#f4f1ea}

/* 8. Voettekst */
footer{padding:80px 0 56px;border-top:1px solid rgba(26,25,22,.14);font-size:13.5px;line-height:1.9;color:rgba(26,25,22,.75);letter-spacing:.02em}
footer .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:48px}
footer .merk{font-family:"Cormorant Garamond",serif;font-size:20px;letter-spacing:.3em;text-transform:uppercase;color:#151412;font-weight:500;margin-bottom:12px}
footer .links a{display:block;letter-spacing:.2em;text-transform:uppercase;font-size:12px;padding:4px 0;color:rgba(26,25,22,.85)}
footer .disclaimer{margin-top:56px;padding-top:28px;border-top:1px solid rgba(26,25,22,.1);font-size:12px;line-height:1.8;max-width:90ch;color:rgba(26,25,22,.45)}

/* Onderliggende pagina's: kop bovenaan, in dezelfde maat als de hero-tekst */
.paginakop{padding:200px 0 110px}
.paginakop .label{margin-bottom:22px;display:block}
.paginakop h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(40px,5.2vw,74px);line-height:1.02;color:#151412;max-width:16ch}
.paginakop p{margin-top:26px;font-size:16px;line-height:1.7;max-width:52ch;color:rgba(26,25,22,.7)}

/* Lopende tekst op onderliggende pagina's */
.tekst{padding:0 0 150px}
.tekst .grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.tekst h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.12;color:#151412}
.tekst .blok{padding:48px 0;border-top:1px solid rgba(26,25,22,.18)}
.tekst .blok:last-child{border-bottom:1px solid rgba(26,25,22,.18)}
.tekst .blok p{margin-top:18px;font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:58ch}
.tekst .blok p.klein{font-size:14.5px;color:rgba(26,25,22,.7);margin-top:24px}
.tekst p.lopend{font-size:16px;line-height:1.75;color:rgba(26,25,22,.7);max-width:58ch}
.tekst p.lopend + p.lopend{margin-top:22px}
.tekst .kolom h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.2;color:#151412}
.tekst .kolom p{font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:44ch;margin-top:14px}
.tekst .kolom + .kolom{margin-top:56px}

/* Stappen onder elkaar (Zo werkt het), zelfde taal als de drie stappen op de homepage */
.stappen.lang ol{grid-template-columns:1fr;gap:0;max-width:760px}
.stappen.lang li{padding:48px 0;border-top:1px solid rgba(26,25,22,.18)}
.stappen.lang li:last-child{border-bottom:1px solid rgba(26,25,22,.18)}
.stappen.lang li p{max-width:58ch}
.stappen.lang{padding:0 0 150px}
.stappen.lang .noot{margin-top:40px;font-size:14.5px;line-height:1.7;color:rgba(26,25,22,.7);max-width:58ch}

/* Losse beeldband zonder tekst, of met korte regel */
.beeld{position:relative;height:640px;overflow:hidden;background:linear-gradient(160deg,#141311 0%,#26221c 55%,#3a3427 100%);display:flex;justify-content:center;align-items:center;gap:2.5vw;padding:0 6vw}
.beeld .kaart{width:min(16vw,230px)}
/* een grote kaart */
.beeld.een .kaart{width:min(24vw,330px)}
.beeld.een .kaart{--basis:perspective(1400px) rotateY(-12deg) rotate(-3deg)}
/* twee kaarten naast elkaar, naar elkaar toe gedraaid */
.beeld.twee .kaart{width:min(20vw,280px)}
.beeld.twee .kaart:nth-child(1){--basis:perspective(1400px) rotateY(14deg) rotate(-3deg)}
.beeld.twee .kaart:nth-child(2){--basis:perspective(1400px) rotateY(-14deg) rotate(3deg)}
/* twee kaarten over elkaar, als stapeltje */
.beeld.stapel{gap:0}
.beeld.stapel .kaart{width:min(22vw,300px)}
.beeld.stapel .kaart:nth-child(1){transform:translate(28%,-4%)}
.beeld.stapel .kaart:nth-child(1){--basis:perspective(1400px) rotateY(10deg) rotate(8deg)}
.beeld.stapel .kaart:nth-child(2){transform:translate(-28%,6%);z-index:2}
.beeld.stapel .kaart:nth-child(2){--basis:perspective(1400px) rotateY(-10deg) rotate(-4deg)}
/* rij van vier, licht waaierend */
.beeld.vier .kaart{width:min(16vw,235px)}
.beeld.vier .kaart:nth-child(1){transform:translateY(34px)}
.beeld.vier .kaart:nth-child(1){--basis:perspective(1400px) rotateY(16deg) rotate(-5deg)}
.beeld.vier .kaart:nth-child(2){transform:translateY(6px)}
.beeld.vier .kaart:nth-child(2){--basis:perspective(1400px) rotateY(8deg) rotate(-2deg)}
.beeld.vier .kaart:nth-child(3){transform:translateY(6px)}
.beeld.vier .kaart:nth-child(3){--basis:perspective(1400px) rotateY(-8deg) rotate(2deg)}
.beeld.vier .kaart:nth-child(4){transform:translateY(34px)}
.beeld.vier .kaart:nth-child(4){--basis:perspective(1400px) rotateY(-16deg) rotate(5deg)}
.beeld .cap{position:absolute;left:32px;bottom:28px;color:rgba(244,241,234,.75);font-size:12px;letter-spacing:.24em;text-transform:uppercase}

/* Formulier, dunne onderlijnen, geen kaders */
.formulier{padding:0 0 150px}
.formulier form{max-width:640px}
.formulier .groep{padding:40px 0 56px;border-top:1px solid rgba(26,25,22,.18)}
.formulier .stap > .groep:first-child{border-top:0;padding-top:0}
.formulier .groep > .label{display:block;margin-bottom:28px;opacity:.55}
.formulier .groep h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.2;color:#151412;margin-bottom:28px}
.formulier .groep .uitleg{font-size:15px;line-height:1.7;color:rgba(26,25,22,.72);max-width:52ch;margin:-14px 0 28px}
.veld{margin-top:28px}
.veld:first-of-type{margin-top:0}
.veld label{display:block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.veld input[type=text],.veld input[type=email],.veld input[type=tel],.veld textarea{display:block;width:100%;min-height:48px;padding:12px 0;border:0;border-bottom:1px solid rgba(26,25,22,.35);background:transparent;font:inherit;font-size:16px;color:#1a1916;border-radius:0;outline:none}
.veld textarea{min-height:96px;resize:vertical}
.veld input:focus,.veld textarea:focus,.veld input[aria-invalid=true],.veld textarea[aria-invalid=true]{border-bottom-color:#151412}
.veld .rij{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.veld .rij > .veld{margin-top:0}
.keuzes{display:block}
.keuzes label{display:flex;align-items:baseline;gap:16px;min-height:48px;padding:12px 0;border-bottom:1px solid rgba(26,25,22,.14);font-family:"Cormorant Garamond",serif;font-weight:500;font-size:22px;line-height:1.4;color:#151412;cursor:pointer;text-transform:none;letter-spacing:0;opacity:1;margin:0}
.keuzes label:first-child{border-top:1px solid rgba(26,25,22,.14)}
.keuzes input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;border:1px solid rgba(26,25,22,.6);background:transparent;margin:0;position:relative;top:1px;cursor:pointer}
.keuzes input[type=radio]{border-radius:50%}
.keuzes input:checked{background:#151412;border-color:#151412}
.akkoord label{display:flex;align-items:flex-start;gap:16px;min-height:48px;padding:10px 0;font-family:"Inter",system-ui,sans-serif;font-size:14px;line-height:1.7;color:rgba(26,25,22,.7);text-transform:none;letter-spacing:0;opacity:1;cursor:pointer;margin:0}
.akkoord label a{border-bottom:1px solid rgba(26,25,22,.35)}
.akkoord input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;border:1px solid rgba(26,25,22,.6);background:transparent;margin:5px 0 0;cursor:pointer}
.akkoord input:checked{background:#151412;border-color:#151412}
.fotos input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.fotos .stand{margin-top:14px;font-size:14.5px;color:rgba(26,25,22,.72);min-height:1.5em}
.formulier .fout{margin:0;font-size:14px;line-height:1.6;color:#151412}
.formulier .fout.zichtbaar{margin-top:8px}

/* Bedankt, korte pagina */
.bedankt{padding:220px 0 160px;min-height:100vh}
.bedankt h1{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(40px,5.2vw,74px);line-height:1.02;color:#151412;max-width:18ch}
.bedankt p{margin-top:26px;font-size:16px;line-height:1.75;max-width:52ch;color:rgba(26,25,22,.7)}
.bedankt .sub{margin:36px 0 0;display:inline-block}

@media(max-width:820px){
  header .kopnav{display:none}
  .wrap{width:calc(100% - 48px)}
  header{padding:18px 20px;grid-template-columns:1fr auto 1fr}
  header .brand{font-size:18px;letter-spacing:.24em}
  header .cta{display:none}
  .menu-vlak .top{padding:18px 20px}
  .menu-vlak .brand{font-size:18px;letter-spacing:.24em}
  .menu-vlak nav{width:calc(100% - 48px);margin-top:48px}
  .menu-vlak nav a{padding:12px 0}
  .menu-vlak .adres{width:calc(100% - 48px);margin:48px auto 40px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:56vh auto;height:auto;min-height:100vh}
  .copy{min-width:0;max-width:100%}
  .visual{order:-1;padding-top:64px}
  .visual .kaart{width:44vw;max-width:220px}
  .copy{padding:36px 24px 48px}
  .copy .sub{display:block;margin:18px 0 0}

  .stappen{padding:110px 0 100px}
  .stappen .kop{margin-bottom:64px}
  .stappen ol{grid-template-columns:1fr;gap:56px}
  .stappen li h2,.stappen li h3{margin:18px 0 14px}
  .stappen.lang{padding:0 0 100px}
  .stappen.lang ol{gap:0}
  .stappen.lang li{padding:36px 0}

  .band{height:620px;padding:0 0 64px}
  .bandfoto{gap:0;padding:0 16px;bottom:230px}
  .bandfoto .kaart{width:34vw}
  .bandfoto .kaart:nth-child(1){transform:translateX(9vw)}
  .bandfoto .kaart:nth-child(2){width:40vw}
  .bandfoto .kaart:nth-child(3){transform:translateX(-9vw)}
  .band .regel{margin-top:0}

  .kopen{padding:110px 0 100px}
  .kopen .grid{grid-template-columns:1fr;gap:48px}
  .kopen .kolommen{grid-template-columns:1fr;padding-top:0}
  .kopen .kolommen p{padding:14px 0}
  .kopen .noot{margin-top:28px}
  .kopen .foto{margin-top:56px;aspect-ratio:4/3;padding:20px 24px}
  .kopen .foto .kaart{width:40%}

  .citaat{padding:110px 0 110px}
  .citaat .bron{margin-top:36px}

  .vragen{padding:110px 0 100px}
  .vragen .grid{grid-template-columns:1fr;gap:48px}
  .vragen .vraag{padding:30px 0}

  .slot{padding:120px 0 130px}
  .slot .btn{margin-top:40px}

  footer{padding:64px 0 48px}
  footer .grid{grid-template-columns:1fr;gap:36px}
  footer .disclaimer{margin-top:44px}

  .paginakop{padding:140px 0 72px}
  .tekst{padding:0 0 100px}
  .tekst .grid{grid-template-columns:1fr;gap:40px}
  .tekst .blok{padding:36px 0}
  .tekst .kolom + .kolom{margin-top:44px}
  .beeld{height:420px;padding:0 16px;gap:8px}
  .beeld.een .kaart{width:44vw}
  .beeld.twee .kaart{width:38vw}
  .beeld.stapel .kaart{width:44vw}
  .beeld.vier{height:360px}
  .beeld.vier .kaart{width:21vw}
  .beeld.vier .kaart:nth-child(1),.beeld.vier .kaart:nth-child(4){transform:translateY(18px)}
  .beeld.vier .kaart:nth-child(2),.beeld.vier .kaart:nth-child(3){transform:translateY(2px)}
  .beeld .cap{left:24px;bottom:20px}
  .formulier{padding:0 0 100px}
  .formulier .groep{padding:32px 0}
  .veld .rij{grid-template-columns:1fr;gap:0}
  .veld .rij > .veld{margin-top:28px}
  .veld .rij .veld:first-child{margin-top:0}
  .keuzes label{font-size:20px}
  .bedankt{padding:150px 0 110px}


}

/* Menu: knop en sluitknop */
.menu-vlak nav a.btn{color:#f4f1ea;border-bottom:1px solid #151412}
.menu-vlak nav a.btn:hover{color:#151412}
.menu-vlak .sluit:focus{outline:none}
.menu-vlak .sluit:focus-visible{outline:1px solid currentColor;outline-offset:6px}
@media(max-width:820px){
  .menu-vlak .brand{display:none}
  .menu-vlak .top{grid-template-columns:1fr;min-height:65px}
}


/* Feitenstrook onder de hero */
.feiten{border-bottom:1px solid rgba(26,25,22,.14)}
.feiten ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.feiten li{padding:34px 28px 32px 0;border-right:1px solid rgba(26,25,22,.14);margin-right:28px}
.feiten li:last-child{border-right:0;margin-right:0}
.feiten b{display:block;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.1;color:#151412}
.feiten span{display:block;margin-top:8px;font-size:14px;line-height:1.6;color:rgba(26,25,22,.72)}

/* Rekenvoorbeeld */
.voorbeeld{padding:150px 0 140px;border-top:1px solid rgba(26,25,22,.1)}
.voorbeeld .grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start}
.voorbeeld .intro p{margin-top:22px;font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:40ch}
.voorbeeld h2{font-size:clamp(28px,3vw,44px);line-height:1.08;margin-top:18px;color:#151412}
.opbouw{width:100%;border-collapse:collapse;font-size:16px;line-height:1.6}
.opbouw th,.opbouw td{padding:22px 0;border-top:1px solid rgba(26,25,22,.14);vertical-align:top;text-align:left}
.opbouw tr:last-child th,.opbouw tr:last-child td{border-bottom:1px solid rgba(26,25,22,.14)}
.opbouw th{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:22px;line-height:1.2;width:30%;padding-right:24px;color:#151412}
.opbouw td{color:rgba(26,25,22,.78);padding-right:24px}
.opbouw td:last-child{white-space:nowrap;text-align:right;padding-right:0;font-family:"Cormorant Garamond",serif;font-size:24px;color:#151412}
.opbouw tr.totaal th,.opbouw tr.totaal td{border-top:2px solid #151412}
.opbouw tr.totaal td:last-child{font-size:30px}

/* Citaat over een macrobeeld van de holo-laag */
.citaat{position:relative;overflow:hidden;background:#141311;color:#f4f1ea}
.citaat .macro{position:absolute;inset:0}
.citaat .macro img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:brightness(.5) saturate(1.1)}
.citaat .macro::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(10,9,8,.15),rgba(10,9,8,.7) 100%)}
.citaat .wrap{position:relative;z-index:2}
.citaat blockquote{color:#f7f4ee}
.citaat .bron{color:rgba(244,241,234,.8)}
.citaat .bron a{border-bottom:1px solid rgba(244,241,234,.45)}

@media(max-width:820px){
  .feiten ul{grid-template-columns:1fr 1fr}
  .feiten li{padding:22px 16px 20px 0;margin-right:16px}
  .feiten li:nth-child(2){border-right:0;margin-right:0}
  .feiten b{font-size:22px}
  .voorbeeld{padding:88px 0 80px}
  .voorbeeld .grid{grid-template-columns:1fr;gap:40px}
  .opbouw th{width:38%;font-size:19px}
  .opbouw td:last-child{font-size:20px}
  .opbouw tr.totaal td:last-child{font-size:26px}
}

/* Formulier in drie stappen */
.formulier .voortgang{margin-bottom:44px}
.formulier .voortgang .label{display:block}
.formulier .voortgang .lijn{position:relative;height:1px;margin-top:16px;background:rgba(26,25,22,.18)}
.formulier .voortgang .lijn span{position:absolute;left:0;top:0;height:1px;background:#151412;transition:width .35s ease}
.formulier .groep h2:focus{outline:none}
.formulier .knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-top:40px;border-top:1px solid rgba(26,25,22,.18)}
.btn.lijn{background:transparent;color:#151412;border-color:rgba(26,25,22,.45)}
.btn.lijn:hover{border-color:#151412}
.formulier .meldingen p:not(:empty){margin-top:16px}
.formulier .meldingen .stand{font-size:14.5px;color:rgba(26,25,22,.72)}
.fotos .vlak{display:flex;align-items:center;justify-content:center;min-height:180px;padding:32px 24px;border:1px solid rgba(26,25,22,.4);background:#f4f1ea;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(22px,2vw,26px);line-height:1.3;color:#151412;text-align:center;cursor:pointer;margin:0;transition:border-color .2s,background .2s}
.fotos .vlak:hover,.fotos .vlak.sleep{border-color:#151412;background:#ebe7de}
.fotos input[type=file]:focus-visible + .vlak{outline:1px solid #151412;outline-offset:4px}
.fotos .camera{display:none;margin-top:18px;min-height:48px;padding:0;background:none;border:0;cursor:pointer;font-family:"Inter",system-ui,sans-serif;font-weight:300;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#151412}
.fotos .camera.zichtbaar{display:inline-flex;align-items:center}
.fotos .camera span,.fotos .verwijder span{border-bottom:1px solid rgba(26,25,22,.35);padding-bottom:3px}
.fotos .fout.zichtbaar{margin-top:14px}
.fotos .preview{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin:20px 0 0;padding:0}
.fotos .preview:empty{display:none}
.fotos .preview li{width:96px}
.fotos .preview .plaatje{position:relative;width:96px;height:96px;border-radius:6px;overflow:hidden;background:#e9e5dc}
.fotos .preview img{display:block;width:96px;height:96px;object-fit:cover;border-radius:6px}
.fotos .preview .lijn{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(26,25,22,.12);overflow:hidden}
.fotos .preview .lijn span{display:block;height:100%;width:40%;background:#151412;animation:kd-lijn 1.1s ease-in-out infinite}
@keyframes kd-lijn{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.fotos .preview .verwijder{display:inline-flex;align-items:center;min-height:36px;margin-top:4px;padding:0;background:none;border:0;cursor:pointer;font-family:"Inter",system-ui,sans-serif;font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#151412}
.formulier form:not(.js) .voortgang,.formulier form:not(.js) .knoppen.tussen,.formulier form:not(.js) [data-terug]{display:none}
.formulier form:not(.js) .stap + .stap{border-top:1px solid rgba(26,25,22,.18);padding-top:40px}
.formulier [hidden]{display:none!important}
@media(max-width:820px){
  .formulier .voortgang{margin-bottom:36px}
  .formulier .knoppen{flex-direction:column;align-items:stretch;gap:12px;padding-top:32px}
  .formulier .knoppen .btn{width:100%;text-align:center}
  .fotos .vlak{min-height:150px;padding:28px 20px;font-size:22px}
  .fotos .preview .verwijder{min-height:48px}
  .formulier form:not(.js) .stap + .stap{padding-top:32px}
}


/* Werkwijze als rijen */
.stappen.lang ol{max-width:none}
.stappen.lang li{display:grid;grid-template-columns:64px minmax(200px,300px) 1fr;gap:0 56px;align-items:start;padding:46px 0}
.stappen.lang li .nr{padding-top:14px}
.stappen.lang li h2{margin:0}
.stappen.lang li p{margin:4px 0 0;max-width:62ch}
.stappen.lang .noot{max-width:62ch;margin-left:calc(64px + 56px + min(300px,max(200px,22vw)) + 56px)}
footer .links{columns:2;column-gap:32px}
@media(max-width:820px){
  .stappen.lang li{grid-template-columns:1fr;gap:0;padding:36px 0}
  .stappen.lang li .nr{padding-top:0}
  .stappen.lang li h2{margin:18px 0 14px}
  .stappen.lang .noot{margin-left:0}
  footer .links{columns:1}
}

/* ==========================================================================
   Versie 3 (25 sep 2026, avond): beweging, tien voorbeelden, sterkere knoppen.
   Bron van dit blok: _bouw/v3.css (wordt door _bouw/pas-css-toe.js achteraan style.css gezet).
   ========================================================================== */
:root{--ivoor:#f4f1ea;--ivoor2:#ebe7de;--inkt:#151412;--donker:#141311;--goud:#b8955a;--goud-d:#8a6c3a;--goud-l:#d9be8b;--zacht:cubic-bezier(.2,.7,.2,1)}

/* Geregistreerde eigenschappen, zodat kantelen en glans vloeiend kunnen bewegen */
@property --rx{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --ry{syntax:"<angle>";inherits:true;initial-value:0deg}
@property --mx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --my{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --glans{syntax:"<number>";inherits:true;initial-value:0}

/* Kop: vijf onderwerpen, gevulde knop. De kop gebruikt mix-blend-mode difference: wit vlak met zwarte letters
   wordt een donkere knop op ivoor en een lichte knop op donker. */
header .kopnav{gap:20px}
header .kopnav a{letter-spacing:.19em}
header .cta{background:#fff;color:#000;border-color:#fff;padding:12px 22px;font-weight:400}
header .cta:hover{background:transparent;color:#fff}
@media(max-width:1365px){header .kopnav{display:none}header .menu-hit{display:flex!important}}

/* Kaart: kantelen met de muis en een holo-glans erover */
.kaart img,.kaart .glans,.kaart .glim{transform:var(--basis,perspective(1400px) rotateY(-12deg) rotate(-3deg)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .7s var(--zacht)}
.kaart .glans,.kaart .glim{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:4% / 2.9%;pointer-events:none;backface-visibility:hidden;opacity:var(--glans);transition:transform .7s var(--zacht),opacity .5s}
.kaart .glans{background:linear-gradient(115deg,transparent 16%,rgba(255,214,110,.42) 30%,rgba(170,90,255,.3) 40%,rgba(50,220,255,.36) 50%,rgba(255,70,200,.3) 60%,rgba(255,214,110,.38) 70%,transparent 84%);background-size:280% 280%;background-position:var(--mx) var(--my);mix-blend-mode:color-dodge}
.kaart .glim{background:radial-gradient(farthest-corner circle at var(--mx) var(--my),rgba(255,255,255,.8) 0%,rgba(255,255,255,.16) 30%,rgba(0,0,0,.3) 100%);mix-blend-mode:overlay}
.kaart.volg img,.kaart.volg .glans,.kaart.volg .glim{transition:transform .14s linear,opacity .3s}
.kaart.los img,.kaart.los .glans,.kaart.los .glim{transition:transform .7s var(--zacht),opacity .5s}
@keyframes kd-zweef{0%,100%{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--glans:.18}25%{--rx:4deg;--ry:-9deg;--mx:14%;--my:18%;--glans:.38}75%{--rx:-3deg;--ry:8deg;--mx:86%;--my:82%;--glans:.42}}
@keyframes kd-drijf{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media(prefers-reduced-motion:no-preference){
  .zweeft{animation:kd-zweef 11s ease-in-out infinite}
  .zweeft img,.zweeft .glans,.zweeft .glim{transition:none}
  .zweeft.volg,.zweeft.los{animation:none}
}

/* Hero: drie kaarten als waaier, de voorste zweeft */
.visual .stapel{position:relative;width:min(24vw,360px);aspect-ratio:645/900}
.visual .stapel .kaart{position:absolute;left:0;top:0;width:100%}
.visual .stapel .achter::before{display:none}
.visual .stapel .achter img,.visual .stapel .achter .glans,.visual .stapel .achter .glim{backface-visibility:visible}
.visual .stapel .achter{opacity:.88}
.visual .stapel .links{--basis:perspective(1400px) rotateY(12deg);transform:translate(-46%,6%) rotate(-11deg) scale(.8);z-index:0}
.visual .stapel .rechts{--basis:perspective(1400px) rotateY(-12deg);transform:translate(46%,9%) rotate(10deg) scale(.8);z-index:0}
.visual .stapel .voor{--basis:perspective(1400px) rotateY(-10deg) rotate(-2deg);z-index:2}
.visual .cap{max-width:calc(100% - 64px);line-height:1.8}
@keyframes kd-op{from{opacity:0;transform:translateY(24px)}}
@keyframes kd-in{from{opacity:0}}
@keyframes kd-waaier{from{transform:translate(0,3%) rotate(0deg) scale(.8);opacity:0}}
@media(prefers-reduced-motion:no-preference){
  .hero .copy > *{animation:kd-op 1.1s var(--zacht) both}
  .hero .copy > :nth-child(2){animation-delay:.12s}
  .hero .copy > :nth-child(3){animation-delay:.26s}
  .hero .copy > :nth-child(n+4){animation-delay:.4s}
  .visual .stapel{animation:kd-drijf 8s ease-in-out infinite 1.8s}
  .visual .stapel .achter{animation:kd-waaier 1.1s var(--zacht) both .15s}
  .visual .stapel .voor{animation:kd-zweef 11s ease-in-out infinite 1s}
  .visual .stapel .voor.volg,.visual .stapel .voor.los{animation:none}
}

/* Scrollen: blokken komen rustig in beeld (alleen met JavaScript en zonder voorkeur voor minder beweging) */
@media(prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--zacht),transform 1s var(--zacht);transition-delay:var(--d,0s)}
  html.js .reveal.in{opacity:1;transform:none}
}

/* Werkwijze op de homepage: grote cijfers in goud */
.stappen:not(.lang) li .nr{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(56px,5vw,84px);line-height:.9;letter-spacing:0;color:var(--goud)}
.stappen:not(.lang) li{position:relative;padding-top:26px;border-top:1px solid rgba(26,25,22,.16)}

/* Band met kaarten van 1996 tot 2026, loopt langzaam door */
.tijdband{position:relative;padding:150px 0 130px;background:var(--ivoor2);overflow:hidden}
.tijdband .kop{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:end;margin-bottom:80px}
.tijdband h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-top:22px;color:var(--inkt)}
.tijdband .kop p{font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:52ch}
.loopband{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.loopband .rij{display:flex;width:max-content;animation:kd-loop var(--duur,140s) linear infinite}
.loopband:hover .rij,.loopband:focus-within .rij{animation-play-state:paused}
.loopband ul{display:flex;gap:36px;padding:14px 36px 20px 0;margin:0;list-style:none}
.loopband li{width:176px;flex:none}
.loopband img{display:block;width:100%;height:auto;border-radius:4.2% / 3%;box-shadow:0 18px 32px rgba(26,25,22,.24),0 4px 10px rgba(26,25,22,.12);transition:transform .6s var(--zacht),box-shadow .6s var(--zacht)}
.loopband li:hover img{transform:translateY(-10px) rotate(-1.5deg);box-shadow:0 30px 44px rgba(26,25,22,.3),0 6px 14px rgba(26,25,22,.14)}
.loopband .jaar{display:block;margin-top:18px;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:28px;line-height:1;color:var(--inkt)}
.loopband .naam{display:block;margin-top:7px;font-size:11px;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:rgba(26,25,22,.62)}
.tijdband .onder{margin-top:56px}
@keyframes kd-loop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.loopband .rij{animation:none}.loopband{overflow-x:auto}}

/* Tien voorbeelden: prijsladder op donker */
.ladder{position:relative;padding:150px 0 140px;color:var(--ivoor);background:radial-gradient(ellipse 75% 65% at 30% 55%,#31291e 0%,#1b1814 50%,#0f0e0c 100%);overflow:hidden}
.ladder::before,.slot::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");opacity:.08;mix-blend-mode:overlay;pointer-events:none;z-index:1}
.ladder .wrap{position:relative;z-index:2}
.ladder .kop{display:grid;grid-template-columns:7fr 5fr;gap:80px;align-items:end}
.ladder .label,.ladder .meta{color:var(--goud-l);opacity:1}
.ladder h2{font-size:clamp(44px,5.6vw,86px);line-height:1;margin-top:22px;color:#f7f4ee;letter-spacing:-.005em}
.ladder .kop p{font-size:16.5px;line-height:1.75;color:rgba(244,241,234,.74);max-width:46ch}
.schaal{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));margin:96px 0 80px}
.schaal::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(244,241,234,.2)}
.schaal .vul{position:absolute;left:0;top:0;height:1px;width:var(--vul,5%);background:linear-gradient(90deg,rgba(217,190,139,.15),var(--goud-l));transition:width 1s var(--zacht)}
.schaal a{position:relative;display:block;padding:30px 10px 0 0;color:rgba(244,241,234,.5);transition:color .4s}
.schaal a::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:#1b1814;border:1px solid rgba(244,241,234,.45);transition:background .4s,border-color .4s,box-shadow .4s,transform .4s var(--zacht)}
.schaal a:hover{color:rgba(244,241,234,.88)}
.schaal a:hover::before{transform:scale(1.25)}
.schaal a[aria-selected=true]{color:#f7f4ee}
.schaal a[aria-selected=true]::before{background:var(--goud-l);border-color:var(--goud-l);box-shadow:0 0 0 7px rgba(217,190,139,.14)}
.schaal a:focus-visible{outline:1px solid var(--goud-l);outline-offset:6px}
.schaal .bedrag{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(17px,1.55vw,25px);line-height:1.1;white-space:nowrap}
.schaal .naam{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;line-height:1.5;opacity:.72}
.schaal .tijd{position:absolute;left:0;right:12px;bottom:-16px;height:1px;background:rgba(244,241,234,.12);overflow:hidden;opacity:0}
.ladder.speelt .schaal a[aria-selected=true] .tijd{opacity:1}
.ladder.speelt .schaal a[aria-selected=true] .tijd::after{content:"";position:absolute;inset:0;background:var(--goud-l);transform-origin:left;animation:kd-tijd var(--speel,8s) linear forwards}
@keyframes kd-tijd{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.panelen{display:grid}
.paneel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center}
html.js .ladder .paneel{visibility:hidden;opacity:0;transition:opacity .45s var(--zacht),visibility 0s .45s}
html.js .ladder .paneel.actief{visibility:visible;opacity:1;transition:opacity .7s var(--zacht) .1s}
html:not(.js) .ladder .paneel{grid-area:auto}
html:not(.js) .ladder .paneel + .paneel{margin-top:96px}
.podium{position:relative;height:clamp(420px,40vw,600px)}
.podium .stuk{position:absolute;left:50%;top:50%;width:var(--w,36%);transform:translate(-50%,-50%) translate(var(--x,0%),var(--y,0%)) rotate(var(--r,0deg));z-index:var(--z,1);transition:transform 1.1s var(--zacht) var(--d,0s),opacity .8s var(--d,0s)}
.podium .stuk .kaart{width:100%;--basis:perspective(1400px) rotateY(var(--ky,-6deg))}
html.js .ladder .paneel:not(.actief) .stuk{transform:translate(-50%,-44%) rotate(0deg) scale(.9);opacity:0}
.podium .gloed{position:absolute;left:50%;top:52%;width:80%;height:70%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(217,190,139,.22),transparent 65%);filter:blur(20px);pointer-events:none}
.paneel .meta{font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.paneel h3{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(32px,3.1vw,48px);line-height:1.06;margin-top:18px;color:#f7f4ee}
.paneel .verhaal{margin-top:20px;font-size:16.5px;line-height:1.75;color:rgba(244,241,234,.8);max-width:48ch}
.groepen{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid rgba(244,241,234,.16)}
.groepen li{padding:15px 0;border-bottom:1px solid rgba(244,241,234,.16)}
.groepen .r{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.groepen .n{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:20px;line-height:1.25;color:#f7f4ee}
.groepen .w{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:20px;white-space:nowrap;color:#f7f4ee}
.groepen p{margin-top:4px;font-size:13.5px;line-height:1.6;color:rgba(244,241,234,.6);max-width:52ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.paneel .bod{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:30px}
.paneel .bod b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(60px,6.4vw,104px);line-height:.9;color:#f7f4ee;letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums}
.paneel .bod .waarde{font-size:14px;color:rgba(244,241,234,.62)}
.paneel .acties{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px}
.ladder .btn,.slot .btn{background:var(--ivoor);color:var(--inkt);border-color:var(--ivoor)}
.ladder .btn:hover,.slot .btn:hover{background:transparent;color:var(--ivoor)}
.ladder .sub,.slot .sub{color:var(--ivoor);border-bottom-color:rgba(244,241,234,.4);margin-left:0;opacity:.85}
.ladder .voet{margin-top:80px;padding-top:26px;border-top:1px solid rgba(244,241,234,.14);display:flex;justify-content:space-between;align-items:baseline;gap:24px;font-size:13px;line-height:1.7;color:rgba(244,241,234,.58)}
.ladder .voet a{color:var(--ivoor);border-bottom:1px solid rgba(244,241,234,.4);white-space:nowrap;letter-spacing:.2em;text-transform:uppercase;font-size:12px;padding-bottom:3px}

/* Slab: kaart in een doorzichtige houder met etiket */
.slab{position:relative;padding:8% 6.5% 6.5%;border-radius:10px;background:linear-gradient(140deg,rgba(255,255,255,.3),rgba(255,255,255,.07) 38%,rgba(255,255,255,.15) 70%,rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.42);box-shadow:0 34px 60px rgba(0,0,0,.55),0 8px 18px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 3px rgba(255,255,255,.05);overflow:hidden}
.slab .etiket{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f3f0e9;color:#151412;border-radius:3px;padding:7px 9px;margin-bottom:8%;font-size:9px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase}
.slab .etiket b{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:19px;letter-spacing:0;line-height:1;white-space:nowrap}
.slab .etiket span{text-align:right}
.tegel .slab .etiket{justify-content:center}
.tegel .slab .etiket span{display:none}
.slab .venster{position:relative;padding:4.5%;border-radius:4px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.slab img{display:block;width:100%;height:auto;border-radius:3.6% / 2.6%}
.slab::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.26) 47%,transparent 59%);background-size:260% 100%;background-position:130% 0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.slab::after{animation:kd-schijn 8s ease-in-out infinite}}
@keyframes kd-schijn{0%,55%{background-position:130% 0}100%{background-position:-130% 0}}

/* Sealed: doos met setlogo, licht gedraaid, met een glans die voorbij trekt */
.sealed{position:relative;aspect-ratio:1/1.12;perspective:1100px}
.sealed[data-vorm=display]{aspect-ratio:1.5/1}
.sealed[data-vorm=pakje]{aspect-ratio:.56/1}
.sealed[data-vorm=bundel]{aspect-ratio:1.2/1}
.sealed .doos{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ky,-18deg)) rotateX(-8deg)}
.sealed .zij,.sealed .top{backface-visibility:hidden}
.sealed .zij.l{right:auto;left:0;transform-origin:left center;transform:rotateY(90deg);border-radius:4px 0 0 4px;background:linear-gradient(270deg,#4a3f31,#2a241c)}
.sealed .voor{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%;padding:12% 10%;border-radius:5px;background:linear-gradient(160deg,#342d23 0%,#16140f 58%,#241f18 100%);border:1px solid rgba(217,190,139,.5);box-shadow:0 34px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);overflow:hidden}
.sealed[data-vorm=pakje] .voor{border-radius:3px;padding:18% 12%;background:linear-gradient(180deg,#2c261e 0%,#141210 50%,#2c261e 100%)}
.sealed[data-vorm=pakje] .voor::before,.sealed[data-vorm=pakje] .voor::after{content:"";position:absolute;left:0;right:0;height:6%;background:repeating-linear-gradient(90deg,rgba(217,190,139,.55) 0 3px,transparent 3px 6px)}
.sealed[data-vorm=pakje] .voor::before{top:0}
.sealed[data-vorm=pakje] .voor::after{bottom:0}
.sealed .zij{position:absolute;top:0;right:0;width:26px;height:100%;background:linear-gradient(90deg,#4a3f31,#2a241c);border:1px solid rgba(217,190,139,.35);transform-origin:right center;transform:rotateY(-90deg);border-radius:0 4px 4px 0}
.sealed .top{position:absolute;left:0;top:0;width:100%;height:26px;background:linear-gradient(180deg,#5a4c3a,#352d23);border:1px solid rgba(217,190,139,.35);transform-origin:top center;transform:rotateX(90deg)}
.sealed[data-vorm=pakje] .zij,.sealed[data-vorm=pakje] .top{display:none}
.sealed .logo{width:84%;max-height:46%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.sealed .soort{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--goud-l);text-align:center;line-height:1.5}
.sealed .schijn{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.2) 47%,transparent 59%);background-size:260% 100%;background-position:130% 0;pointer-events:none}
@media(prefers-reduced-motion:no-preference){.sealed .schijn{animation:kd-schijn 9s ease-in-out infinite 2s}}

/* Inkoop in zes tegels */
.inkoop{padding:150px 0 140px}
.inkoop .kop{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:end}
.inkoop h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-top:22px;color:var(--inkt)}
.inkoop .kop p{font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:52ch}
.tegels{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;margin:72px 0 0;padding:0}
.tegel .podium{height:auto;aspect-ratio:5/4;background:radial-gradient(ellipse 70% 70% at 50% 45%,#2f281f,#141311 76%);overflow:hidden}
.tegel .podium .stuk{transition:transform .9s var(--zacht)}
.tegel:hover .podium .stuk{transform:translate(-50%,-53%) translate(var(--x,0%),var(--y,0%)) rotate(var(--r,0deg))}
.tegel h3{margin-top:26px;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.15;color:var(--inkt)}
.tegel p{margin-top:10px;font-size:15.5px;line-height:1.7;color:rgba(26,25,22,.78);max-width:40ch}
.inkoop .onder{margin-top:56px}

/* Kennis op de homepage: drie artikelen */
.kennisrij{padding:150px 0 140px;border-top:1px solid rgba(26,25,22,.1)}
.kennisrij .kop{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:end;margin-bottom:64px}
.kennisrij h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;margin-top:22px;color:var(--inkt)}
.kennisrij .kop p{font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:52ch}
.artikelen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.artikelkaart{display:block}
.artikelkaart .omslag{aspect-ratio:4/3;overflow:hidden;background:#1c1915}
.artikelkaart .omslag img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--zacht)}
.artikelkaart:hover .omslag img{transform:scale(1.05)}
.artikelkaart .datum{display:block;margin-top:22px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(26,25,22,.55)}
.artikelkaart h3{margin-top:12px;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.15;color:var(--inkt)}
.artikelkaart p{margin-top:12px;font-size:15.5px;line-height:1.7;color:rgba(26,25,22,.75)}
.artikelkaart .sub{margin:18px 0 0}

/* Slot: foto's kiezen kan meteen hier */
.slot .label{color:var(--goud-l);opacity:1;margin-bottom:22px}
.slot .wrap{z-index:2}
.slot p.uitleg{margin:26px auto 0;max-width:46ch;font-size:16px;line-height:1.75;color:rgba(244,241,234,.72)}
.snel{position:relative;max-width:560px;margin:48px auto 0}
.snel input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.dropvlak{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:180px;padding:32px 24px;border:1px solid rgba(244,241,234,.38);background:rgba(244,241,234,.03);cursor:pointer;transition:border-color .3s,background .3s}
.dropvlak:hover,.dropvlak.sleep{border-color:var(--goud-l);background:rgba(244,241,234,.07)}
.snel input:focus-visible + .dropvlak{outline:1px solid var(--goud-l);outline-offset:5px}
.dropvlak b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.2;color:#f7f4ee}
.dropvlak span{font-size:13.5px;line-height:1.6;color:rgba(244,241,234,.66)}
.dropvlak.bezig{border-color:var(--goud-l)}
.slot .of{margin-top:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,241,234,.55)}
.slot .of a{color:var(--ivoor);border-bottom:1px solid rgba(244,241,234,.4);padding-bottom:3px;margin-left:8px}

/* Vaste knop onderin op de telefoon */
.plakbalk{display:none}
@media(max-width:820px){
  .plakbalk{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;transform:translateY(170%);transition:transform .5s var(--zacht)}
  .plakbalk.zichtbaar{transform:none}
  .plakbalk a{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 20px;background:var(--inkt);color:var(--ivoor);font-size:12px;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 16px 40px rgba(0,0,0,.35)}
  .plakbalk small{font-size:12.5px;letter-spacing:.04em;text-transform:none;opacity:.7}
  body.met-balk footer{padding-bottom:112px}
}

/* Pagina Tien voorbeelden */
.vb-index{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:40px}
.vb-index a{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 16px;border:1px solid rgba(26,25,22,.25);font-family:"Cormorant Garamond",serif;font-weight:500;font-size:19px;color:var(--inkt);transition:border-color .3s,background .3s}
.vb-index a span{font-family:"Inter",sans-serif;font-weight:300;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,25,22,.6)}
.vb-index a:hover{border-color:var(--inkt);background:rgba(26,25,22,.04)}
.vb-uitleg{padding:0 0 40px}
.vb-uitleg .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-top:1px solid rgba(26,25,22,.16);padding-top:40px}
.vb-uitleg h2{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:24px;line-height:1.2;color:var(--inkt)}
.vb-uitleg p{margin-top:10px;font-size:15.5px;line-height:1.7;color:rgba(26,25,22,.78)}
.vb-sectie{padding:110px 0;border-top:1px solid rgba(26,25,22,.12);scroll-margin-top:40px}
.vb-sectie .grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:72px;align-items:start}
.vb-sectie.spiegel .vb-beeld{order:2}
.vb-beeld{position:sticky;top:110px}
.vb-beeld .podium{height:clamp(400px,38vw,560px);background:radial-gradient(ellipse 70% 70% at 50% 45%,#2f281f,#141311 76%);overflow:hidden}
.vb-sectie .meta{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--goud-d)}
.vb-sectie h2{margin-top:16px;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(32px,3.2vw,50px);line-height:1.06;color:var(--inkt)}
.vb-sectie .verhaal{margin-top:18px;font-size:16.5px;line-height:1.75;color:rgba(26,25,22,.8);max-width:56ch}
.vb-lijst{width:100%;border-collapse:collapse;margin-top:32px;font-size:14.5px;line-height:1.5}
.vb-lijst th{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:rgba(26,25,22,.55);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid rgba(26,25,22,.25)}
.vb-lijst td{padding:11px 12px 11px 0;border-bottom:1px solid rgba(26,25,22,.1);color:rgba(26,25,22,.82);vertical-align:top}
.vb-lijst td:first-child{color:var(--inkt)}
.vb-lijst td:nth-child(4){white-space:nowrap}
.vb-lijst .r{text-align:right;padding-right:0;white-space:nowrap}
.vb-lijst tr.rest td{color:rgba(26,25,22,.6)}
.vb-groepen{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid rgba(26,25,22,.2)}
.vb-groepen li{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(26,25,22,.12);font-size:15px;color:rgba(26,25,22,.8)}
.vb-groepen li b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:19px;color:var(--inkt);white-space:nowrap}
.vb-sectie .bod{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:28px;padding-top:24px;border-top:2px solid var(--inkt)}
.vb-sectie .bod .label{color:var(--goud-d);opacity:1}
.vb-sectie .bod b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(52px,5.4vw,86px);line-height:.9;color:var(--inkt)}
.vb-sectie .bod .waarde{font-size:14px;color:rgba(26,25,22,.62)}
.vb-sectie .acties{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.vb-sectie .acties .sub{margin-left:0}

@media(max-width:1100px){
  .paneel{grid-template-columns:1fr;gap:40px}
  .ladder .kop,.tijdband .kop,.inkoop .kop,.kennisrij .kop{grid-template-columns:1fr;gap:28px}
}
@media(max-width:820px){
  .visual .stapel{width:46vw;max-width:230px}
  .visual .stapel .links{transform:translate(-36%,6%) rotate(-10deg) scale(.78)}
  .visual .stapel .rechts{transform:translate(36%,9%) rotate(9deg) scale(.78)}
  .visual .cap{display:none}
  .tijdband{padding:100px 0 90px}
  .tijdband .kop{margin-bottom:52px}
  .loopband li{width:128px}
  .loopband ul{gap:22px;padding-right:22px}
  .loopband .jaar{font-size:23px;margin-top:14px}
  .loopband .naam{font-size:10px}
  .ladder{padding:100px 0 90px}
  .schaal{display:flex;gap:0;margin:56px -24px 44px;padding:0 24px;scroll-padding:0 24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .copy .sub,.onder .sub{display:table;margin:22px 0 0}
  .schaal::-webkit-scrollbar{display:none}
  .schaal::before{left:24px;right:auto;width:1180px}
  .schaal .vul{left:24px;width:calc(var(--vul,5%) * 11.8)}
  .schaal a{flex:none;width:118px;scroll-snap-align:start;padding-top:26px}
  .podium{height:92vw;max-height:440px}
  .paneel .bod b{font-size:64px}
  .ladder .voet{flex-direction:column;gap:14px;margin-top:56px}
  .stappen:not(.lang) li .nr{font-size:56px}
  .inkoop{padding:100px 0 90px}
  .tegels{grid-template-columns:1fr;gap:44px;margin-top:48px}
  .kennisrij{padding:100px 0 90px}
  .artikelen{grid-template-columns:1fr;gap:44px}
  .dropvlak{min-height:150px}
  .vb-uitleg .grid{grid-template-columns:1fr;gap:28px}
  .vb-sectie{padding:72px 0}
  .vb-sectie .grid{grid-template-columns:1fr;gap:36px}
  .vb-sectie.spiegel .vb-beeld{order:0}
  .vb-beeld{position:relative;top:auto}
  .vb-beeld .podium{height:88vw;max-height:420px}
  .vb-lijst{font-size:13.5px}
  .vb-lijst .set,.vb-lijst .jaar{display:none}
}

/* Formulierpagina: donkere kolom met wat er na het versturen gebeurt */
@media(min-width:1101px){.formulier .wrap{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:96px;align-items:start}}
.zijpaneel{position:sticky;top:120px;padding:44px 40px 40px;background:radial-gradient(ellipse 90% 80% at 30% 20%,#2f281f,#161412 70%);color:var(--ivoor)}
.zijpaneel .label{color:var(--goud-l);opacity:1}
.zijpaneel ol{list-style:none;margin:26px 0 0;padding:0;counter-reset:z}
.zijpaneel li{counter-increment:z;display:grid;grid-template-columns:48px 1fr;gap:0 10px;padding:18px 0;border-top:1px solid rgba(244,241,234,.14)}
.zijpaneel li::before{content:"0" counter(z);grid-row:span 2;font-family:"Cormorant Garamond",serif;font-size:30px;line-height:1;color:var(--goud-l)}
.zijpaneel li b{font-size:22px;font-weight:500;line-height:1.2;color:#f7f4ee}
.zijpaneel li span{margin-top:6px;font-size:14.5px;line-height:1.65;color:rgba(244,241,234,.72)}
.zijpaneel .klein{margin-top:20px;font-size:13.5px;line-height:1.7;color:rgba(244,241,234,.6)}
.zijpaneel .klein a{color:var(--ivoor);border-bottom:1px solid rgba(244,241,234,.4);padding-bottom:2px}
@media(max-width:1100px){.zijpaneel{position:relative;top:auto;margin-top:64px;padding:36px 28px 32px}}

/* Vermelding onder een podium en de typografische Japanse tegel */
.podium .beeldnoot{position:absolute;left:0;right:0;bottom:12px;margin:0;text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,234,.5);z-index:20}
.jp-vlak{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:30px}
.jp-tekst{writing-mode:vertical-rl;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","MS Mincho",serif;font-size:clamp(17px,1.5vw,23px);letter-spacing:.14em;line-height:1;color:#f4f1ea;opacity:.9;margin-bottom:18px}
.jp-jaar{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:clamp(64px,6vw,96px);line-height:1;color:var(--goud-l)}
.jp-onder{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,234,.55)}

/* Echte slabs: uitsneden foto's van de eigen PSA-slabs van GS Cards */
.slabfoto{display:block;width:100%;height:auto;transform:perspective(1400px) rotateY(var(--ky,-6deg));filter:drop-shadow(0 34px 40px rgba(0,0,0,.6)) drop-shadow(0 8px 14px rgba(0,0,0,.35));transition:transform .8s var(--zacht)}
.stuk:hover .slabfoto{transform:perspective(1400px) rotateY(0deg) translateY(-8px)}

/* ==========================================================================
   Versie 3.1 (25 sep 2026, nacht): laptop en desktop. Telefoon blijft zoals hij is.
   Compacter, groter beeld, donker openingsbeeld over de volle breedte, voorbeelden in één scherm.
   ========================================================================== */
header .kopnav{gap:18px}
header .kopnav a{letter-spacing:.16em}
@media(min-width:1240px) and (max-width:1365px){header .kopnav{display:flex}header .menu-hit{display:none!important}}
@media(min-width:821px){
  /* Openingsbeeld: donker over de volle breedte */
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:600px;max-height:1000px;background:radial-gradient(ellipse 58% 78% at 70% 52%,#3b3022 0%,#1c1813 52%,#0e0d0b 100%);color:var(--ivoor)}
  /* geen korrel in het openingsbeeld: samen met de gloed liet die de kaarten verdwijnen */
  .hero .copy{position:relative;z-index:3;padding-top:72px}
  .hero .copy .eyebrow{color:var(--goud-l);opacity:1}
  .hero .copy h1{color:#f7f4ee;font-size:clamp(42px,4.4vw,74px);line-height:1.02}
  .hero .copy p{color:rgba(244,241,234,.78);font-size:17px;line-height:1.75;max-width:46ch}
  .hero .copy .btn{background:var(--ivoor);color:var(--inkt);border-color:var(--ivoor)}
  .hero .copy .btn:hover{background:transparent;color:var(--ivoor)}
  .hero .copy .sub{color:var(--ivoor);opacity:.9;border-bottom-color:rgba(244,241,234,.45)}
  .visual{background:transparent;z-index:2;padding-top:40px}
  .visual .stapel{width:min(24vw,410px)}
  .visual .cap{color:rgba(244,241,234,.55)}

  /* Minder lege ruimte tussen de blokken */
  .feiten li{padding:28px 28px 26px 0}
  .stappen{padding:104px 0 96px}
  .stappen .kop{margin-bottom:52px}
  .tijdband{padding:100px 0 86px}
  .tijdband .kop{margin-bottom:48px}
  .inkoop{padding:104px 0 96px}
  .tegels{margin-top:52px;gap:44px 36px}
  .inkoop .onder{margin-top:40px}
  .citaat{padding:120px 0}
  .kennisrij{padding:104px 0 96px}
  .kennisrij .kop{margin-bottom:48px}
  .vragen{padding:104px 0 96px}
  .slot{padding:112px 0 120px}
  .snel{margin-top:36px}
  footer{padding:64px 0 44px}

  /* Tien voorbeelden: kop, schaal en voorbeeld samen in beeld */
  .ladder{padding:92px 0 80px}
  .ladder h2{font-size:clamp(40px,4.2vw,66px)}
  .schaal{margin:48px 0 44px}
  .paneel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  .podium{height:min(520px,66vh)}
  .paneel h3{margin-top:12px;font-size:clamp(28px,2.5vw,40px)}
  .paneel .verhaal{margin-top:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .groepen{margin-top:20px}
  .groepen li{padding:11px 0}
  .paneel .bod{margin-top:22px}
  .paneel .bod b{font-size:clamp(52px,4.8vw,82px)}
  .paneel .acties{margin-top:22px}
  .ladder .voet{margin-top:44px}
  html.js .ladder .panelen{position:relative;display:block;min-height:min(520px,66vh)}
  html.js .ladder .paneel{position:absolute;left:0;right:0;top:0}
  html.js .ladder .paneel.actief{position:relative}
}
@media(min-width:821px) and (max-height:900px){.groepen p{display:none}}

/* Vragen in twee kolommen op brede schermen */
@media(min-width:1101px){
  .vragen .grid{grid-template-columns:4fr 8fr}
  .vragen .lijst{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;border-top:0}
  .vragen .vraag{border-top:1px solid rgba(26,25,22,.18);border-bottom:0;padding:28px 0 30px}
}

/* Versie 3.1: gloed achter de hele waaier in plaats van achter de voorste kaart (die gloed maakte de achterste kaarten donker) */
.visual .stapel .voor::before{display:none}
.visual .stapel::before{content:"";position:absolute;left:50%;top:52%;width:190%;height:120%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(217,190,139,.24) 0%,rgba(150,160,190,.09) 36%,transparent 64%);pointer-events:none;z-index:-1}
@media(min-width:821px){
  .hero{grid-template-columns:minmax(0,11fr) minmax(0,13fr)}
  .hero .copy{padding-left:clamp(24px,6vw,112px);padding-right:32px;max-width:none}
}
/* Lage laptopschermen (1280 x 610 en dergelijke): openingsbeeld past op één scherm, met de knop in beeld */
@media(min-width:821px) and (max-height:780px){
  .hero .copy{padding-top:84px}
  .hero .copy .eyebrow{margin-bottom:16px}
  .hero .copy h1{font-size:clamp(36px,3.7vw,58px)}
  .hero .copy p{margin-top:16px;font-size:15.5px;line-height:1.65}
  .hero .copy .btn{margin-top:24px}
  .visual .stapel{width:min(22vw,360px)}
}

/* Versie 3.1: donkere paginakop met waaier op laptop en groter; op de telefoon blijft de kop licht */
@media(min-width:821px){
  .paginakop.donker{position:relative;padding:128px 0 64px;background:radial-gradient(ellipse 55% 90% at 78% 55%,#3b3022 0%,#1c1813 55%,#0e0d0b 100%);color:var(--ivoor);overflow:hidden}
  .paginakop.donker .wrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);gap:40px;align-items:center}
  .paginakop.donker .label{color:var(--goud-l);opacity:1}
  .paginakop.donker h1{color:#f7f4ee;max-width:15ch}
  .paginakop.donker p{color:rgba(244,241,234,.76);font-size:16.5px}
  .paginakop.donker .kopbeeld{height:min(430px,56vh)}
  .paginakop.donker .vb-index a{border-color:rgba(244,241,234,.28);color:#f7f4ee}
  .paginakop.donker .vb-index a span{color:rgba(244,241,234,.6)}
  .paginakop.donker .vb-index a:hover{border-color:var(--goud-l);background:rgba(244,241,234,.05)}
  .paginakop.donker + .tekst,.paginakop.donker + .stappen.lang,.paginakop.donker + .vb-uitleg{padding-top:84px}
}
@media(max-width:820px){.paginakop .kopbeeld{display:none}}

/* ==========================================================================
   Versie 3.2 (25 sep 2026, nacht): telefoon. Voorbeelden zo hoog als het getoonde voorbeeld (geen leeg vlak),
   en een donkere kopbalk zodra er gescrold is (tekst loopt niet meer door de kop heen).
   ========================================================================== */
html.js .ladder .panelen{position:relative;display:block}
html.js .ladder .paneel{position:absolute;left:0;right:0;top:0}
html.js .ladder .paneel.actief{position:relative}
header{transition:background .35s,padding .35s,box-shadow .35s}
header.vast{mix-blend-mode:normal;background:rgba(20,19,17,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(244,241,234,.08);padding-top:14px;padding-bottom:14px}
header.vast .cta{background:#f4f1ea;color:#151412;border-color:#f4f1ea}
header.vast .cta:hover{background:transparent;color:#f4f1ea}
@media(max-width:820px){header.vast{padding-top:10px;padding-bottom:10px}}