/* 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 img{transform: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);transform:perspective(1400px) rotateY(-12deg) rotate(-3deg);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) img{transform: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) img{transform:perspective(1400px) rotateY(-6deg) rotate(2deg)}
.bandfoto .kaart:nth-child(3) img{transform: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) img{transform: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) img{transform: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 img{transform: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) img{transform:perspective(1400px) rotateY(14deg) rotate(-3deg)}
.beeld.twee .kaart:nth-child(2) img{transform: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) img{transform: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) img{transform: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) img{transform:perspective(1400px) rotateY(16deg) rotate(-5deg)}
.beeld.vier .kaart:nth-child(2){transform:translateY(6px)}
.beeld.vier .kaart:nth-child(2) img{transform:perspective(1400px) rotateY(8deg) rotate(-2deg)}
.beeld.vier .kaart:nth-child(3){transform:translateY(6px)}
.beeld.vier .kaart:nth-child(3) img{transform:perspective(1400px) rotateY(-8deg) rotate(2deg)}
.beeld.vier .kaart:nth-child(4){transform:translateY(34px)}
.beeld.vier .kaart:nth-child(4) img{transform: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}
}