/* ============================================================================================
   INVESTERING · lichte proef op de gedeelde basis (B105 punt 3, 04-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Alleen wat van deze pagina is: hero-indeling, prijsgroep, samensteller, voorwaarden, slot.
   Teksten, bedragen en pakketnamen staan in investering.html en zijn niet gewijzigd.
   Plaatfracties (gemeten in BEELDPROEF-INVESTERING/ruw/beeld.json):
     liggend: vogel x 41,95-70,0 %, y 28,3-72,2 %     staand: vogel x 32,64-93,33 %, sleep onderkant 67,27 %
   Drie standen van de hero:
     A staand tot 860 px breed            eigen staande plaat; tot 600 px de proefopmaak "boom" (?variant=hoog = alternatief)
     B liggend of breder, minstens 640 hoog  kop linksboven, prijsgroep linksonder (plaatsingsproef)
     C liggend en lager dan 640 px         (telefoon liggend, desktop op zoom 200 %): kop en groep onder elkaar, plaat vult de hero
   ============================================================================================ */

.inv{background:#f2ece0;color:var(--nx-inkt)}

/* ---------------------------------------------------------------- hero, gedeeld */
.inv-hero{position:relative;isolation:isolate;overflow:clip;background:#f2ece0}
/* tot het echte beeld er is: een onscherpe miniatuur van dezelfde plaat (48x27 px, 262 bytes; RONDE 2: van het nieuwe desktopbeeld INVEST-LICHT-D-m3) in plaats van een leeg vlak */
.inv-stage{position:absolute;z-index:0;pointer-events:none;
  background:url("data:image/webp;base64,UklGRv4AAABXRUJQVlA4IPIAAAAwBwCdASowABsAPu1qrFEppaQipWzJMB2JZgCdOUFUdeWDqg0av6QK/X35VqGtNJZPT14LlawSWABfQ9F80H9eTAAA/vcDqzABHOv6DhGy2IPSE1tROYhrLjz+ZsQoq8OpTJXB2r6mJOG21dke3VpMjHdzhYzA40xtxkFJQcIJ1JsaExo05cX4mnW3MRE5223j5Gw1Hafgy5pJ4f7bLOLL07RuJJsUVIdzjE6fCA/k78DVQn5Gf4Bj4R5XzWvpyQmTdgFGyO70E2JdrgMEOerOW2YRJWrb6a3A3Ll2bTCT2Z5altz2r6TKmTMVwyvynEEgAA==") 50% 50% / 100% 100% no-repeat}
.inv-stage picture{display:block;width:100%;height:100%}
.inv-plaat{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.inv-inhoud{position:relative;z-index:1}

.inv-kop .eyebrow{margin:0 0 14px;font-size:.8125rem;letter-spacing:.32em;color:var(--nx-inkt-diep)}
.inv-kop .eyebrow::after{width:48px;background:#b18243}
.inv-kop h1{font:400 64px/1.06 var(--serif);letter-spacing:-.006em;color:var(--nx-inkt-diep)}
.inv-kop h1 .kw{font:inherit}
/* plaatselijke leessteun achter de kopregels: gevederd, zonder rand, alleen achter de letters (zonder steun 1,0-1,1) */
.inv-kop .glas-steun{--steun:.56;--steun-uit:-2px -12px;--steun-veer:10px}
.inv-kop .eyebrow .glas-steun{--steun:.62;--steun-uit:-4px -10px;--steun-veer:7px}

/* de prijsgroep: één glazen vlak op het beeld */
.inv-groep{display:flex;flex-direction:column;align-items:stretch;padding:20px 22px 16px;color:var(--nx-inkt)}
.inv-groep .glas-steun{--steun:.30;--steun-uit:-4px -8px;--steun-veer:7px}
.inv-bouw{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.inv-bouw__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-height:44px;color:inherit;text-decoration:none}
.inv-bouw__kop .lbl{flex:0 0 100%;font:500 .75rem/1.35 var(--sans);letter-spacing:.3em;text-transform:uppercase}
.inv-bouw__kop .nm{font:400 28px/1.15 var(--serif)}
.inv-bouw__kop .arr{width:20px;height:20px;align-self:center;transition:transform var(--t-hover) var(--ease)}
.inv-bouw__pr{white-space:nowrap}
.inv-bouw__pr b{font:400 60px/1 var(--serif);letter-spacing:-.01em}
.inv-bouw__pr small{margin-left:6px;font:400 1.0625rem/1 var(--sans)}
.inv-bouw__knop{margin-top:6px}
.inv-care-rij{list-style:none;margin:14px 0 0;padding:6px 0 0;border-top:1px solid rgba(11,44,41,.22)}
.inv-care{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:4px 0;color:inherit;text-decoration:none}
.inv-care__nm{font:400 22px/1.15 var(--serif);white-space:nowrap}
.inv-care__pr{white-space:nowrap}
.inv-care__pr b{font:400 24px/1 var(--serif)}
.inv-care__pr small{font:400 .875rem/1 var(--sans)}
.inv-btw{margin-top:8px;font:400 .8125rem/1.4 var(--sans);letter-spacing:.02em}
.inv-uitklap{margin-top:4px}
.inv-uitklap__knop{color:var(--nx-inkt)}
.inv-uitklap__knop .chev{width:18px;height:18px;flex:0 0 auto;transition:transform var(--t-terug) var(--ease)}
.inv-uitklap__knop[aria-expanded="true"] .chev{transform:rotate(180deg)}
html:not(.inv-js) .inv-uitklap{display:none}               /* zonder JavaScript staat de lijst open onder de scène; de knop heeft dan niets te doen */
.inv-groep :is(.inv-bouw__kop,.inv-care):active{opacity:.62}
@media (hover:hover) and (pointer:fine){
  .inv-bouw__kop:hover .arr{transform:translateX(3px)}
  .inv-bouw__kop:hover .nm,.inv-care:hover .inv-care__nm{text-decoration:underline;text-decoration-color:rgba(177,130,67,.85);text-decoration-thickness:1px;text-underline-offset:5px}
}

/* ---------------------------------------------------------------- de liggende plaat (B, C en D): verankering zonder script */
/* RONDE 3. Beeld INVEST-LICHT-D-m3: vogel x 54,9-90,2 % (snavel tot sleeppunt, gemeten; met haarpunten gerekend 90,5 %), kuif 19,2 %,
   sleep onderkant 77,4 %. De plaat staat gecentreerd, maar de sleeppunt komt nooit dichter dan 28 px bij de rechterrand; wat wegvalt,
   valt links weg (lege zee en lucht). De plaats wordt uitgerekend op de WERKELIJKE breedte van de plaat (100cqw: de plaat is een
   maatcontainer), dus ook als de hero hoger wordt dan het scherm (grotere letter) en ook zonder JavaScript. */
@media (min-width:861px),(orientation:landscape){
  .inv-hero{--mini-d:url("data:image/webp;base64,UklGRv4AAABXRUJQVlA4IPIAAAAwBwCdASowABsAPu1qrFEppaQipWzJMB2JZgCdOUFUdeWDqg0av6QK/X35VqGtNJZPT14LlawSWABfQ9F80H9eTAAA/vcDqzABHOv6DhGy2IPSE1tROYhrLjz+ZsQoq8OpTJXB2r6mJOG21dke3VpMjHdzhYzA40xtxkFJQcIJ1JsaExo05cX4mnW3MRE5223j5Gw1Hafgy5pJ4f7bLOLL07RuJJsUVIdzjE6fCA/k78DVQn5Gf4Bj4R5XzWvpyQmTdgFGyO70E2JdrgMEOerOW2YRJWrb6a3A3Ll2bTCT2Z5altz2r6TKmTMVwyvynEEgAA==");
    --x0:max(calc(100vw - var(--pw)),min(calc((100vw - var(--pw)) / 2),calc(100vw - 28px - var(--pw) * .905)));
    --vl:calc(var(--x0) + var(--pw) * .548)}          /* linkerrand van de vogel op het scherm, bij een hero van één scherm hoog */
  .inv-stage{left:var(--x0);aspect-ratio:16 / 9;background:var(--mini-d) 50% 50% / 100% 100% no-repeat}
  .inv-kop .glas-steun::before{display:none}         /* de kop staat op schone lucht of op ivoor (zonder steun gemeten >= 4,5) */
  @supports (width:1cqw){
    .inv-stage{left:0;container-type:size;background:none}
    .inv-stage picture{position:absolute;top:0;height:100%;width:100cqw;
      left:max(calc(100vw - 100cqw),min(calc((100vw - 100cqw) / 2),calc(100vw - 28px - 90.5cqw)));
      background:var(--mini-d) 50% 50% / 100% 100% no-repeat}
  }
}

/* ---------------------------------------------------------------- B · liggend, minstens 640 px hoog */
@media (orientation:landscape) and (min-height:640px){
  .inv-hero{
    --ph:max(100svh,56.25vw);                       /* plaathoogte volgt het eerste scherm; breder dan 16:9 volgt de breedte */
    --pw:calc(var(--ph) * 16 / 9);
    --gut:var(--lijn);                              /* zelfde linkerlijn als het logo in de kopbalk */
    min-height:var(--ph);
  }
  /* de plaat is zo hoog als de hele hero: groeit de hero (grotere letter), dan groeit de plaat mee en valt er niets van af */
  .inv-stage{top:0;height:100%;min-height:var(--ph)}
  .inv-inhoud{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:28px;min-height:var(--ph);
    padding:calc(var(--ph) * .142) var(--gut) calc(var(--ph) * .042)}
  .inv-groep{width:min(392px,max(296px,calc(var(--vl) - 32px - var(--gut))))}
  /* overgang naar het marmer: licht over de onderrand van de scène, geen harde snede */
  .inv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,243,236,0) 0%,rgba(247,243,236,.5) 58%,#f7f3ec 100%)}
}
@media (min-width:861px) and (max-width:1699.98px){
  .inv-kop h1{font-size:54px}
  .inv-bouw__pr b{font-size:54px}
}
@media (min-width:861px) and (max-width:1400px){
  .inv-kop h1{font-size:46px}
  .inv-bouw__kop .nm{font-size:26px}
  .inv-bouw__pr b{font-size:50px}
}
@media (min-width:861px) and (max-width:1100px){
  .inv-kop h1{font-size:36px}
  .inv-groep{padding:16px 16px 14px}
  .inv-bouw__knop{padding-inline:18px 14px;gap:10px;letter-spacing:.01em}   /* de knoptekst blijft op één regel in de smalle groep */
  .inv-bouw__pr b{font-size:46px}
  .inv-care__nm{font-size:20px}
  .inv-care__pr b{font-size:22px}
}

/* ---------------------------------------------------------------- C · liggend en lager dan 640 px (telefoon liggend, desktop op zoom 200 %) */
/* RONDE 3: de plaat is één scherm hoog (of 16:9 van de breedte) en staat bovenaan, met dezelfde verankering: de hele vogel staat in
   het eerste scherm. Kop en groep staan links van de vogel; de groep loopt onder de plaat door op het ivoor van de vloer, en de
   onderrand van de plaat vloeit daarin uit. */
@media (orientation:landscape) and (max-height:639.98px){
  .inv-hero{--ph:max(100svh,56.25vw);--pw:calc(var(--ph) * 16 / 9);--gut:max(20px,var(--lijn));min-height:var(--ph);background:#f7f3ec}
  .inv-stage{top:0;height:var(--ph);
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%)}
  .inv-inhoud{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:calc(var(--header-h) + 34px) var(--gut) 40px}
  .inv-kop h1{font-size:36px}
  .inv-groep{width:min(392px,max(280px,calc(var(--vl) - 16px - var(--gut))));padding:16px 18px 14px}
  .inv-bouw__kop .nm{font-size:26px}
  .inv-bouw__pr b{font-size:46px}
}

/* ---------------------------------------------------------------- D · staand en breder dan 860 px (tablet staand) */
/* RONDE 3: de kop staat boven de plaat op het ivoor, vrij van kuif en boog; de plaat is hooguit 60 % van het scherm hoog, met
   dezelfde verankering (hele vogel in beeld); de groep staat linksonder op het beeld. */
@media (min-width:861px) and (orientation:portrait){
  .inv-hero{--ph:max(56.25vw,min(60svh,75vw));--pw:calc(var(--ph) * 16 / 9);--gut:var(--lijn);--kopzone:calc(var(--header-h) + 232px);
    min-height:calc(var(--kopzone) + var(--ph));background:#f7f3ec}
  .inv-stage{top:auto;bottom:0;height:var(--ph);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%);mask-image:linear-gradient(180deg,transparent 0,#000 13%)}
  .inv-inhoud{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:28px;min-height:calc(var(--kopzone) + var(--ph));
    padding:calc(var(--header-h) + 52px) var(--gut) calc(var(--ph) * .05)}
  .inv-kop h1{font-size:48px}
  .inv-groep{width:min(392px,max(296px,calc(var(--vl) - 24px - var(--gut))))}
  .inv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,243,236,0) 0%,rgba(247,243,236,.5) 58%,#f7f3ec 100%)}
}
/* ---------------------------------------------------------------- A · staand tot 860 px breed */
@media (max-width:860px) and (orientation:portrait){
  .inv-hero{
    --pw:100vw;--ph:calc(var(--pw) * 16 / 9);--plaat-links:0px;--kop-rechts:calc(var(--pw) * .105);--sleep:.6727;
    min-height:100svh;
    /* RONDE 2: de onderkant van de hero loopt altijd uit in het ivoor van de vloer (geen naad tussen turquoise en marmer) */
    background:linear-gradient(0deg,#f7f3ec 0,rgba(247,243,236,.86) 34px,rgba(247,243,236,0) 120px),
      linear-gradient(180deg,#7bc7c3 0,#7bc7c3 var(--ph),#a9d7d8 calc(var(--ph) + 110px),#f2ece0 calc(var(--ph) + 300px),#f2ece0 100%)}
  .inv-stage{top:0;left:var(--plaat-links);width:var(--pw);height:var(--ph);
    background-image:url("data:image/webp;base64,UklGRnQBAABXRUJQVlA4IGgBAADwCACdASobADAAPu1kq1CppSOisBVYATAdiWwAsR8mCVCG1D5/dBKcCFHBR7zeL3avpz3q3KL4LQ7egKjSUK4+Wgo9VrKiFarMelwx617PIADidGuZQP1g0IkATBLH/t8iDNGS6guGckW/+JY7UILgFG+FgXD+9AkebrIN7sjmk4L83xjVeOb5s4F0kKdLvR0kkRT72LVLQjxOPZUYGKSJxBjOIXm8AEw0k0qBJM0/nZuIOZ3gSR0dfsaTxR1805xC5MPDUeeM0ypo86i0nrTpUeb8NcSF6vtHMpHHhgdS3cUwbeSlUcNYIMRP8avC/cde/LLyBBTn89nH5u6pHeNabUwEGqgUROIZV05qeHF030ZDTGBP70G2AA1Zsu/Le7/lp3LscW41ICbjxeL2Le6aYhW4uCbBkgLqO9Nzx9s4nh/b5yjJ9u1Xpu+yO9e6oBH6mjS5sxt1mepeYH94fMXsqRnyVhOAAAA=");
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 93%,transparent 100%)}
  .inv-plaat{object-fit:fill}
  /* de prijsinformatie begint 18 px onder de volledige sleep (onderkant sleep 67,27 % van de plaat) */
  .inv-inhoud{padding:calc(var(--ph) * var(--sleep) + 18px) var(--lijn) 64px}
  /* kop in de lucht tussen kopbalk en kuif: begint op 12,5 % van de plaathoogte, eindigt op 89,5 % van de plaatbreedte */
  .inv-kop{position:absolute;top:calc(var(--ph) * .125);right:var(--kop-rechts);left:var(--lijn);text-align:right}
  .inv-kop .eyebrow{justify-content:flex-end;margin-bottom:6px;letter-spacing:.3em}
  .inv-kop h1{font-size:34px;line-height:1.1}
  .inv-kop h1 .glas-steun{--steun:.66;--steun-uit:-2px -14px;--steun-veer:8px}
  .inv-groep{width:min(100%,560px);padding:14px 16px 12px}
  @media (min-width:601px){.inv-groep{width:100%;padding:18px 24px 16px}}      /* RONDE 2: op tabletbreedte de volle breedte, geen smal paneel links */
  .inv-groep .glas-steun{--steun:.30;--steun-uit:-4px -6px;--steun-veer:6px}
  /* compacte groep: naam en hoofdprijs naast elkaar, zodat de knop en de drie bedragen onder de sleep in het eerste scherm passen */
  .inv-bouw{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:6px;align-items:end}
  .inv-bouw__kop{grid-column:1}
  .inv-bouw__kop .nm{font-size:24px}
  .inv-bouw__pr{grid-column:2;align-self:end;text-align:right;line-height:1}
  .inv-bouw__pr b{font-size:38px}
  .inv-bouw__pr small{display:block;margin:3px 0 0;font-size:.8125rem}
  .inv-bouw__knop{grid-column:1 / -1;justify-self:start;margin-top:0}
  .inv-care-rij{margin-top:8px;padding-top:4px}
  .inv-care__nm{font-size:20px}
  .inv-care__pr b{font-size:22px}
  .inv-care__pr small{font-size:.8125rem}
  .inv-btw{font-size:.75rem}
}
@media (max-width:600px) and (orientation:portrait){
  /* "boom" (voorlopige werkkeuze, B105 punt 4): de linkersnede valt op 10 % van de plaat (de zuil met ranken weg, de stam heel);
     de schaal volgt uit 20 px tussen sleeppunt (93,33 %) en rechterrand, begrensd op de schermhoogte */
  html:not([data-inv-variant="hoog"]) .inv-hero{
    --pw:max(100vw,min(calc(100svh * 9 / 16),calc((100vw - 20px) / .8333)));
    /* RONDE 3: de linkersnede is hooguit zo groot dat de plaat het scherm rechts nog dekt (320 px breed: geen snede) */
    --plaat-links:max(calc(var(--pw) * -.10),calc(100vw - var(--pw)));
    --kop-rechts:calc(100vw - var(--plaat-links) - var(--pw) * .895)}
  /* "hoog" (alternatief achter ?variant=hoog): de plaat vult de schermhoogte, rechts verankerd; alles wat wegvalt, valt links weg */
  html[data-inv-variant="hoog"] .inv-hero{
    --pw:max(100vw,calc(100svh * 9 / 16));
    --plaat-links:calc(100vw - var(--pw));
    --kop-rechts:calc(var(--pw) * .105)}
}
@media (min-width:601px) and (max-width:860px) and (orientation:portrait){
  .inv-kop h1{font-size:48px}
  .inv-bouw__kop .nm{font-size:28px}
  .inv-bouw__pr b{font-size:48px}
}
@media (max-width:375px) and (orientation:portrait){
  .inv-kop h1{font-size:31px}
  .inv-bouw__kop .nm{font-size:22px}
  .inv-bouw__pr b{font-size:35px}
}
@media (max-width:300px){
  .inv-kop{position:static;text-align:left;margin-bottom:14px}
  .inv-kop .eyebrow{justify-content:flex-start}
  .inv-kop h1{font-size:26px}
  .inv-bouw{display:flex}
  .inv-bouw__pr{text-align:left}
  .inv-care{flex-wrap:wrap;gap:2px 12px}
}

/* ---------------------------------------------------------------- "Wat is inbegrepen?" (op het marmer, direct onder de scène) */
.inv-inbegrepen{padding:clamp(28px,3vw,44px) var(--nx-rand) 0;scroll-margin-top:calc(var(--header-h) + 24px)}
html.inv-js .inv-inbegrepen:not(.is-open){display:none}
.inv-lijst{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px clamp(18px,2vw,36px)}
.inv-lijst li{display:grid;align-content:start;gap:6px;padding-top:12px;border-top:1px solid var(--nx-goud-lijn)}
.inv-lijst .nm{font:400 clamp(20px,1.3vw,26px)/1.2 var(--serif);color:var(--nx-navy)}
.inv-lijst .sub,.inv-noot{font-size:1rem;line-height:1.55;color:var(--nx-tekst)}
.inv-noot{margin-top:18px}
.inv-links{margin-top:4px}

/* ---------------------------------------------------------------- na de scène: uitleg links, overige kernbedragen rechts */
.inv-na{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4.4vw,96px);align-items:start;padding-top:clamp(44px,4.6vw,76px)}
.inv-lead{max-width:34em;font-size:clamp(1.0625rem,1.05vw,1.3125rem);line-height:1.6;color:var(--nx-tekst)}
.inv-kern-lijst{list-style:none;border-top:1px solid var(--nx-goud-lijn)}
.inv-kern-lijst li{border-bottom:1px solid var(--nx-goud-lijn)}
.inv-kern-item{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;grid-template-areas:"lbl pr arr" "nm pr arr";column-gap:22px;align-items:center;
  min-height:76px;padding:14px 4px;color:var(--nx-navy);text-decoration:none;transition:background-color var(--t-terug) var(--ease)}
.inv-kern-item .lbl{grid-area:lbl;font:500 .78125rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.inv-kern-item .nm{grid-area:nm;font:400 clamp(22px,1.55vw,28px)/1.15 var(--serif)}
.inv-kern-item .pr{grid-area:pr;text-align:right;white-space:nowrap;font:400 1rem/1.2 var(--sans);color:var(--nx-tekst)}
.inv-kern-item .pr b{font:400 clamp(24px,1.6vw,30px)/1 var(--serif);color:var(--nx-navy)}
.inv-kern-item .pr small{font-size:1rem}
.inv-kern-item .arr{grid-area:arr;width:20px;height:20px;color:#8a6a2b;transition:transform var(--t-hover) var(--ease)}
.inv-kern-item:focus-visible{outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .inv-kern-item:hover{background-color:rgba(176,138,69,.07)}
  .inv-kern-item:hover .arr{transform:translateX(3px)}
}
.inv-kern-item:active{background-color:rgba(176,138,69,.16);transition-duration:0s}      /* na de hoverregel: op desktop wint indrukken */
.inv-kern-btw{margin-top:16px;font-size:.9375rem;line-height:1.5;color:var(--nx-tekst-zacht)}

/* ---------------------------------------------------------------- sectiekop: kop links, toelichting rechts (geen lege helft) */
.inv-sectiekop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px clamp(32px,4.4vw,96px);align-items:end;margin-bottom:clamp(32px,3.6vw,56px)}
.inv-sectiekop--enkel{grid-template-columns:minmax(0,1fr)}
.inv .kw{font:inherit;color:inherit}

/* ---------------------------------------------------------------- samensteller */
.inv-conf{scroll-margin-top:0}
.inv-conf-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,.86fr);gap:clamp(40px,5vw,96px);align-items:start}
.inv-form{min-width:0}
.inv-stap{margin:0 0 clamp(36px,3.4vw,56px)}
.inv-stap:last-child{margin-bottom:0}
.inv-stap legend{display:flex;align-items:baseline;gap:18px;margin:0 0 10px}
.inv-nr{font:500 .78125rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.inv-stap-nm{font:400 clamp(28px,2vw,36px)/1.1 var(--serif);color:var(--nx-navy)}
.inv-stap-uitleg{margin:0 0 14px;font-size:1.0625rem;line-height:1.5;color:var(--nx-tekst)}
.inv-stap-uitleg--tweede{margin-top:30px}
.inv-opties{border-top:1px solid var(--nx-goud-lijn)}
.inv-optie{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:4px 20px;align-items:start;padding:20px 8px 20px 10px;
  border-bottom:1px solid var(--nx-goud-lijn);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--t-terug) var(--ease)}
.inv-optie input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none;scroll-margin:104px 0 108px}   /* RONDE 3: dekt de hele rij; bij focus schuift de hele rij vrij van kopbalk en vaste balk */
.inv-optie:has(input:focus-visible){outline:2px solid var(--nx-focus);outline-offset:2px;border-radius:4px}
.inv-optie:has(input:checked){background-color:rgba(176,138,69,.10);box-shadow:inset 3px 0 0 #8a6a2b}
/* indrukken: de rij geeft direct antwoord (achtergrond), zonder te verplaatsen */
.inv-optie:active{background-color:rgba(176,138,69,.2);transition-duration:0s}
.inv-optie:has(input:disabled){cursor:not-allowed}
.inv-optie:has(input:disabled)>*{opacity:.6}
.inv-optie:has(input:disabled):active{background-color:transparent}
@media (hover:hover) and (pointer:fine){
  .inv-optie:not(:has(input:disabled)):not(:has(input:checked)):hover{background-color:rgba(176,138,69,.06)}
}
.inv-optie:not(:has(input:disabled)):not(:has(input:disabled)):active{background-color:rgba(176,138,69,.2);transition-duration:0s}
.inv-vink{position:relative;width:24px;height:24px;margin-top:3px;border-radius:5px;border:1.5px solid rgba(19,29,51,.62);background:#fffdf8;transition:background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.inv-optie--rond .inv-vink{border-radius:50%}
.inv-optie input:checked~.inv-vink{background:var(--nx-petrol);border-color:var(--nx-petrol)}
.inv-optie input:checked~.inv-vink::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fffdf8;border-width:0 2px 2px 0;transform:rotate(45deg)}
.inv-optie--rond input:checked~.inv-vink::after{left:6px;top:6px;width:9px;height:9px;border:0;border-radius:50%;background:#fffdf8;transform:none}
.inv-optie-txt{display:grid;gap:6px;min-width:0}
.inv-optie .nm{font:600 clamp(1.125rem,1.1vw,1.3125rem)/1.3 var(--sans);color:var(--nx-navy)}
.inv-optie .sub{font-size:1.0625rem;line-height:1.5;color:var(--nx-tekst)}
.inv-optie .pr{text-align:right;white-space:nowrap;font:400 1rem/1.3 var(--sans);color:var(--nx-tekst)}
.inv-optie .pr b{display:block;font:400 clamp(24px,1.6vw,30px)/1.1 var(--serif);color:var(--nx-navy)}
.inv-bij{display:block;margin-top:6px;padding-top:10px;border-top:1px dashed var(--nx-goud-lijn);font-size:1rem;line-height:1.5;color:var(--nx-tekst)}
.inv-bij .nm2{font-weight:700;color:var(--nx-navy)}
.inv-bij .pr2{color:var(--nx-navy)}
/* de hint bij Care houdt haar plaats, ook als zij niet geldt: er verschuift niets onder de vinger */
.inv-hint{margin:12px 0 0;padding:9px 14px;border-left:2px solid #0e7c84;background:rgba(14,124,132,.09);font-size:.9375rem;line-height:1.45;color:var(--nx-navy)}
/* RONDE 2: de hint houdt haar plaats niet meer vast (dat gaf een gat van ongeveer 100 px op mobiel). De keuze die haar oproept
   (Website Build in stap 1) staat erboven: onder de vinger verschuift dus niets. Zij komt op in dekking. Zonder JavaScript
   klopt de hint niet met de aangevinkte stand en staat zij er niet. */
html.inv-js .inv-hint[hidden]{display:none}
html:not(.inv-js) .inv-hint{display:none}
@media (prefers-reduced-motion:no-preference){html.inv-js:not(.beweging-uit) .inv-hint:not([hidden]){animation:nx-op var(--t-op) ease-out}}

/* overzicht: een rustig ivoren bonnetje met een dunne goudlijn; loopt mee. Geen glas (geen beeld erachter). */
.inv-overzicht{position:sticky;top:calc(var(--header-h) + 24px);padding:clamp(24px,2.1vw,34px);border:1px solid var(--nx-goud-lijn);border-radius:18px;scroll-margin-top:calc(var(--header-h) + 24px);
  background:linear-gradient(180deg,#fffdf8 0%,#fbf7ee 100%);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 28px 50px -34px rgba(11,44,41,.42)}
.inv-overzicht h3{margin-bottom:6px;font-size:clamp(24px,1.8vw,30px)}
.inv-ov-lijst{min-height:96px}
.inv-ov-groep{margin:18px 0 4px;font:500 .78125rem/1.2 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.inv-ov-rijen{list-style:none}
.inv-ov-rijen li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--nx-goud-lijn)}
.inv-ov-rijen .nm{font:600 1.0625rem/1.3 var(--sans);color:var(--nx-navy)}
.inv-ov-rijen .pr{font:400 21px/1.15 var(--serif);color:var(--nx-navy);text-align:right;white-space:nowrap}
.inv-ov-rijen .noot{grid-column:1 / -1;font-size:.9375rem;line-height:1.45;color:var(--nx-tekst)}
.inv-ov-leeg,.inv-ov-noot{margin-top:10px;font-size:1rem;line-height:1.5;color:var(--nx-tekst)}
.inv-ov-links{margin-top:14px;font-size:.9375rem;line-height:1.6;color:var(--nx-tekst)}
.inv-ov-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--nx-navy);text-decoration:underline;text-decoration-color:var(--nx-goud-lijn);text-underline-offset:4px}
.inv-ov-links a:active{opacity:.62}
.inv-ov-btw{margin-top:18px;font-size:.9375rem;line-height:1.5;color:var(--nx-tekst-zacht)}
.inv-ov-cta{margin-top:20px}
.inv-ov-cta .glas-knop{min-height:56px}
.inv-ov-cta .cta-note{margin-top:10px}
.inv-ov-check{margin-top:8px}
/* alleen de regel die erbij komt, komt op (160 ms, alleen dekking); verdwijnen gaat direct; bedragen tellen niet */
@media (prefers-reduced-motion:no-preference){
  html:not(.beweging-uit) .inv-ov-lijst .is-nieuw{animation:nx-op var(--t-op) ease-out}
}

/* ---------------------------------------------------------------- voorwaarden */
.inv-afspraken-lijst{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--nx-goud-lijn)}
.inv-afspraak{display:grid;align-content:start;gap:14px;padding:30px clamp(20px,2.2vw,40px) 8px}
.inv-afspraak:first-child{padding-left:0}
.inv-afspraak+.inv-afspraak{border-left:1px solid var(--nx-goud-lijn)}
.inv-afspraak-nr{font:400 clamp(40px,3vw,54px)/1 var(--serif);color:var(--nx-goud-tekst)}
.inv-afspraak p{font-size:1.0625rem;line-height:1.6;color:var(--nx-tekst)}
.inv-details{margin-top:clamp(36px,3.6vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:6px 30px}
.inv-details-kop{font:500 .78125rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.inv-details ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 28px}
.inv-btw-noot{margin-top:14px;font-size:.9375rem;line-height:1.5;color:var(--nx-tekst-zacht)}

/* ---------------------------------------------------------------- slot: één afsluiting */
.inv-slot{padding-bottom:clamp(72px,7.5vw,128px)}
.inv-slot-tekst{max-width:46em;padding-top:clamp(28px,3vw,44px);border-top:1px solid var(--nx-goud-lijn)}
.inv-slot-tekst .nx-lead{margin-top:18px}
.inv-slot-terug{margin-top:16px}

.inv-mbalk{display:none}

/* ---------------------------------------------------------------- 861-1100 px */
@media (max-width:1100px) and (min-width:861px){
  .inv-na{grid-template-columns:minmax(0,1fr);gap:28px}
  .inv-conf-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:36px}
  .inv-optie{grid-template-columns:26px minmax(0,1fr)}
  .inv-optie .pr{grid-column:2;text-align:left}
  .inv-optie .pr b{display:inline}
  .inv-sectiekop{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* ---------------------------------------------------------------- tot 860 px */
@media (max-width:860px){
  .inv-lijst{grid-template-columns:minmax(0,1fr)}
  .inv-na{grid-template-columns:minmax(0,1fr);gap:26px}
  .inv-kern-item{min-height:72px;column-gap:14px;grid-template-columns:minmax(0,1fr) auto 18px}
  .inv-kern-item .nm{font-size:22px}
  .inv-kern-item .pr b{font-size:24px}
  .inv-kern-item .arr{width:18px;height:18px}
  .inv-sectiekop{grid-template-columns:minmax(0,1fr);align-items:start}
  .inv-conf-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .inv-optie{grid-template-columns:24px minmax(0,1fr);gap:4px 16px;padding:18px 6px 18px 8px}
  .inv-optie .sub,.inv-stap-uitleg,.inv-afspraak p{font-size:1rem}
  .inv-optie .pr{grid-column:2;text-align:left;white-space:normal}
  .inv-optie .pr b{display:inline}
  .inv-overzicht{position:relative;top:auto}
  .inv-ov-rijen li{grid-template-columns:minmax(0,1fr)}
  .inv-ov-rijen .pr{text-align:left;white-space:normal}
  .inv-afspraken-lijst{grid-template-columns:minmax(0,1fr)}
  .inv-afspraak,.inv-afspraak:first-child{padding:24px 0 22px}
  .inv-afspraak+.inv-afspraak{border-left:0;border-top:1px solid var(--nx-goud-lijn)}
  .inv-details{flex-direction:column;align-items:flex-start}
  .inv-details ul{flex-direction:column}
  .inv-slot{padding-bottom:112px}

  /* vaste balk onderaan: DEKKEND ivoor (de pagina schijnt er niet doorheen), met dezelfde vorm en rand als de kopbalk */
  .inv-mbalk{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:56px;padding:6px 6px 6px 18px;border-radius:999px;color:var(--nx-inkt);text-decoration:none;background:#fffdf8;
    box-shadow:inset 0 0 0 1px rgba(11,44,41,.22),inset 0 1px 0 #fff,0 14px 30px -12px rgba(11,44,41,.5);
    opacity:0;visibility:hidden;transition:opacity var(--t-menu-uit) ease-out,visibility 0s linear var(--t-menu-uit)}
  .inv-mbalk[hidden]{display:none}
  .inv-mbalk.is-aan{opacity:1;visibility:visible;transition:opacity var(--t-menu-in) var(--ease-druk),visibility 0s}
  .inv-mbalk-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 1rem/1.2 var(--sans)}
  .inv-mbalk-go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font:600 .9375rem/1 var(--sans);color:#fffdf8;background:var(--nx-petrol);
    transition:transform var(--t-terug) var(--ease)}
  .inv-mbalk-go .arr{width:16px;height:16px}
  .inv-mbalk:active .inv-mbalk-go{transform:translateY(1px) scale(.98);transition-duration:var(--t-druk);background:#05302d}
  .inv-mbalk:focus-visible{border-radius:999px}
}
@media (max-width:300px){
  .inv-optie{grid-template-columns:minmax(0,1fr)}
  .inv-optie .pr{grid-column:1}
  .inv-kern-item{grid-template-columns:minmax(0,1fr);grid-template-areas:"lbl" "nm" "pr"}
  .inv-kern-item .pr{text-align:left;white-space:normal}
  .inv-kern-item .arr{display:none}
}
@media (prefers-contrast:more){
  .inv-overzicht{border-color:#131d33}
  .inv-optie:has(input:checked){box-shadow:inset 4px 0 0 #131d33}
}

/* ============================================================================================ RONDE 2 (keuring 04-10) */
/* één linkerlijn voor de hele pagina: het logo in de kopbalk, de hero-inhoud, de vloersecties en de footer */
.inv{--lijn:calc(var(--edge) - 12px)}
@media (max-width:860px){.inv{--lijn:16px}}
@media (min-width:601px) and (max-width:860px){.inv{--lijn:28px}}
.inv .nx-vloer{--nx-rand:var(--lijn)}
body[data-page="investering"] .site-footer{padding-inline:calc(var(--edge) - 12px)}
body[data-page="investering"] .site-footer::before{left:calc(var(--edge) - 12px);right:calc(var(--edge) - 12px)}
@media (max-width:860px){body[data-page="investering"] .site-footer{padding-inline:16px}}
@media (min-width:601px) and (max-width:860px){body[data-page="investering"] .site-footer{padding-inline:28px}}

/* de prijsgroep op het nieuwe desktopbeeld: achter het glas liggen een effen marmeren muur, treden en water. Het glas blijft
   helder (lage vulling, geen leessteun: die maakte er een crème kaart van) en leest door rand, breking en de trede-lijnen. */
@media (min-width:861px),(orientation:landscape){
  .inv-groep.glas,html:not(.glas-breking) .inv-groep.glas{--g-vul-a:.16;--g-vul-b:.05;--g-vul-c:.12}
  .inv-groep .glas-steun::before{display:none}
}

/* het meelopende overzicht is nooit hoger dan het scherm: de lijst met regels schuift binnen de kaart, "Plan een gesprek"
   blijft in beeld. Alleen waar het overzicht naast de keuzes staat. */
@media (min-width:861px){
  .inv-overzicht{display:flex;flex-direction:column;max-height:calc(100svh - var(--header-h) - 64px);padding-block:clamp(16px,2.2vh,28px)}
  .inv-overzicht>*{flex:0 0 auto}
  .inv-overzicht>.inv-ov-lijst{flex:0 1 auto;min-height:72px;overflow-y:auto;overscroll-behavior:contain;margin-right:-10px;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(176,138,69,.6) transparent;
    /* RONDE 3: schuift de lijst, dan toont een zachte schaduw boven of onder dat zij doorloopt (verdwijnt aan het begin en het einde) */
    background:linear-gradient(#fffdf8 30%,rgba(255,253,248,0)) 0 0 / 100% 22px no-repeat local,linear-gradient(rgba(252,249,241,0),#fcf9f1 70%) 0 100% / 100% 22px no-repeat local,
      radial-gradient(farthest-side at 50% 0,rgba(11,44,41,.2),rgba(11,44,41,0)) 0 0 / 100% 9px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(11,44,41,.2),rgba(11,44,41,0)) 0 100% / 100% 9px no-repeat scroll}
  .inv-overzicht>.inv-ov-lijst:focus-visible{outline-offset:2px;box-shadow:none}
  .inv-ov-rijen li{padding:8px 0}
  .inv-ov-lijst{min-height:0}
  .inv-ov-btw{margin-top:8px}
  .inv-ov-cta{margin-top:12px}
  /* "Pakketdetails" staat buiten de schuivende lijst en is compact: label en links op doorlopende regels van 32 px */
  .inv-ov-links{margin-top:8px;column-gap:16px}
  .inv-ov-links>span:first-child{flex:0 0 auto}
  .inv-ov-links a{min-height:32px}
  .inv-ov-cta .glas-knop{min-height:52px}
  .inv-ov-check{margin-top:2px}
}
@media (min-width:861px) and (max-height:820px){
  .inv-overzicht .eyebrow{margin-bottom:8px}
  .inv-ov-groep{margin-top:12px}
  .inv-ov-rijen li{padding:8px 0}
  .inv-ov-links{margin-top:6px}
  .inv-ov-btw{margin-top:8px;font-size:.875rem}
}
/* "Pakketdetails": het label op een eigen regel, de links eronder met gelijke tussenruimte; geen losse punt aan een regeleinde */
.inv-ov-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;row-gap:0}
.inv-ov-links>span:first-child{flex:0 0 100%}
.inv-ov-links-plek:empty{display:none}
.inv-ov-links .punt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* SLOT. Standaard: zoals op de donkere pagina (tekst en acties letterlijk gelijk), licht opgemaakt als een afgerond vlak.
   ?slot=voorstel: de ene afsluiting uit ronde 1 (voorstel; eigenaarskeuze). */
.inv-slot-tekst{max-width:none;padding-top:0;border-top:0}
.inv-slot-kaart{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:center;padding:clamp(28px,3.6vw,56px);
  border:1px solid var(--nx-goud-lijn);border-radius:22px;
  background:radial-gradient(70% 120% at 100% 100%,rgba(170,222,220,.34),rgba(170,222,220,0) 70%),linear-gradient(135deg,#fffdf8 0%,#f8f1e4 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 54px -38px rgba(11,44,41,.4)}
.inv-slot-acties{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.inv-slot-acties .glas-knop{min-width:min(100%,300px);justify-content:space-between}
.inv-slot-noot{margin-top:8px}
html[data-inv-slot="voorstel"] .inv-slot-kaart{grid-template-columns:minmax(0,1fr)}
html[data-inv-slot="voorstel"] :is(.inv-slot-acties,.inv-slot-noot){display:none}
@media (max-width:860px){
  .inv-slot-kaart{grid-template-columns:minmax(0,1fr);padding:24px 20px 22px;border-radius:18px}
  .inv-slot-acties .glas-knop{width:100%}
}

/* vaste balk: de samenstelling breekt over hooguit drie regels in plaats van afgekapt te worden */
@media (max-width:860px){
  .inv-mbalk{padding-block:8px}
  .inv-mbalk-txt{white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;font:600 .875rem/1.25 var(--sans)}
}
/* ============================================================================================ RONDE 3 (keuring ronde 2, herstellijst) */
/* overzicht (>= 861 px): "Pakketdetails" compact op doorlopende regels van 32 px, buiten de schuivende lijst */
@media (min-width:861px){
  .inv-ov-links{margin-top:6px;column-gap:14px}
  .inv-ov-links>span:first-child{flex:0 0 auto}
  .inv-ov-links a{min-height:32px}
  .inv-ov-cta .cta-note{margin-top:8px;letter-spacing:.02em}
}
/* letterinstelling: naam, bedragen en labels in de prijsgroep groeien mee, met een bovengrens, zodat de rangorde blijft
   (hoofdprijs > naam > label; bedrag > "/ maand"). Bij de standaardletter van 16 px is elke maat gelijk aan ronde 2. */
.inv-bouw__kop .lbl{font-size:min(.75rem,15px)}
.inv-bouw__kop .nm{font-size:min(1.75rem,36px)}
.inv-bouw__pr b{font-size:min(3.75rem,76px)}
.inv-bouw__pr small{font-size:min(1.0625rem,21px)}
.inv-care__nm{font-size:min(1.375rem,30px)}
.inv-care__pr b{font-size:min(1.5rem,32px)}
.inv-care__pr small{font-size:min(.875rem,18px)}
.inv-btw{font-size:min(.8125rem,18px)}
@media (min-width:861px) and (max-width:1699.98px){.inv-bouw__pr b{font-size:min(3.375rem,70px)}}
@media (min-width:861px) and (max-width:1400px){.inv-bouw__kop .nm{font-size:min(1.625rem,34px)}.inv-bouw__pr b{font-size:min(3.125rem,64px)}}
@media (min-width:861px) and (max-width:1100px){.inv-bouw__pr b{font-size:min(2.875rem,58px)}.inv-care__nm{font-size:min(1.25rem,28px)}.inv-care__pr b{font-size:min(1.375rem,30px)}}
@media (orientation:landscape) and (max-height:639.98px){.inv-bouw__kop .nm{font-size:min(1.625rem,34px)}.inv-bouw__pr b{font-size:min(2.875rem,58px)}}
@media (max-width:860px) and (orientation:portrait){
  .inv-bouw__kop .nm{font-size:min(1.5rem,30px)}
  .inv-bouw__pr b{font-size:min(2.375rem,46px)}
  .inv-bouw__pr small{font-size:min(.8125rem,17px)}
  .inv-care__nm{font-size:min(1.25rem,26px)}
  .inv-care__pr b{font-size:min(1.375rem,28px)}
  .inv-care__pr small{font-size:min(.8125rem,17px)}
  .inv-btw{font-size:min(.75rem,16px)}
}
@media (min-width:601px) and (max-width:860px) and (orientation:portrait){
  .inv-bouw__kop .nm{font-size:min(1.75rem,36px)}
  .inv-bouw__pr b{font-size:min(3rem,58px)}
  /* tabletbreedte: Care en Care+ naast elkaar, zodat de drie bedragen in het eerste scherm staan */
  .inv-inhoud{padding-top:calc(var(--ph) * var(--sleep) + 12px)}
  .inv-groep{padding:14px 24px 14px}
  .inv-care-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;margin-top:6px;padding-top:2px}
}
@media (max-width:375px) and (orientation:portrait){
  .inv-bouw__kop .nm{font-size:min(1.375rem,28px)}
  .inv-bouw__pr b{font-size:min(2.1875rem,42px)}
}
/* ============================================================================================ RONDE 4 (keuring ronde 3, lijst "gratis in de opmaak"; alleen opmaak) */
/* Plaatfracties INVEST-LICHT-D-m3 (gemeten op inv-d3-1920.webp): bovenrand van de marmeren muur 51,6 % van de plaathoogte,
   linkerrand van de zuil 43,4 % van de plaatbreedte. */
@media (min-width:861px),(orientation:landscape){
  .inv-hero{--zl:calc(var(--x0) + var(--pw) * .434)}          /* linkerrand van de zuil op het scherm */
}

/* --- punt 3: kop, bovenregel en knop groeien mee met de letterinstelling, met een bovengrens (bij 16 px gelijk aan ronde 3).
       Liggend en breed staand is de kop bovendien nooit breder dan de lucht links van de zuil (regel is 7,1 x de lettermaat breed). */
.inv-kop .eyebrow{font-size:min(.8125rem,16px)}
.inv-bouw__knop{font-size:min(.96875rem,19px)}
.inv-kop h1{font-size:min(4rem,72px)}
@media (min-width:861px) and (max-width:1699.98px){.inv-kop h1{font-size:min(3.375rem,64px)}}
@media (min-width:861px) and (max-width:1400px){.inv-kop h1{font-size:min(2.875rem,56px)}}
@media (min-width:861px) and (max-width:1100px){.inv-kop h1{font-size:min(2.25rem,36px)}}
@media (min-width:861px){.inv-kop h1{max-width:none}}
@media (min-width:861px) and (max-width:1400px){.inv-kop h1{font-size:min(2.875rem,56px,calc((var(--zl) - var(--gut) - 20px) / 7.1))}}
@media (min-width:861px) and (max-width:1100px){.inv-kop h1{font-size:min(2.25rem,36px,calc((var(--zl) - var(--gut) - 20px) / 7.1))}}          /* tot 1100 px is links van de zuil geen ruimte voor een grotere kop: zij groeit hier niet mee */
@media (max-width:860px) and (orientation:portrait){.inv-kop h1{font-size:min(2.125rem,42px)}}
@media (min-width:601px) and (max-width:860px) and (orientation:portrait){.inv-kop h1{font-size:min(3rem,58px)}}
@media (max-width:375px) and (orientation:portrait){.inv-kop h1{font-size:min(1.9375rem,38px)}}
@media (max-width:300px){.inv-kop h1{font-size:min(1.625rem,32px)}}

/* --- punten 1 en 2: stand B (liggend, minstens 640 px hoog). De inhoud is verankerd aan het eerste scherm (niet aan de plaat, die
       op een breed en laag scherm hoger is dan het scherm); de groep begint nooit boven de muurrand, zodat de zee niet als band
       achter de bovenrand van het glas ligt. */
@media (orientation:landscape) and (min-height:640px){
  .inv-hero{--pt:max(calc(var(--ph) * .142),calc(var(--header-h) + 36px))}          /* de bovenregel blijft vrij van het proeflabel onder de kopbalk */
  .inv-inhoud{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(var(--kopmin,0px),1fr) auto;justify-items:start;align-items:start;
    min-height:min(var(--ph),100svh);padding-top:var(--pt);padding-bottom:calc(min(var(--ph),100svh) * .042)}
}
/* waar de groep tussen muurrand en vouw past: bovenkant van de groep op of onder de muurrand */
@media (orientation:landscape) and (min-height:740px) and (max-aspect-ratio:1899/1000){
  .inv-hero{--kopmin:calc(var(--ph) * .516 + 4px - var(--pt) - 28px)}
}
/* compacter op lagere schermen (stap 1 tot 900 px hoog, stap 2 tot 830 px hoog) */
@media (orientation:landscape) and (min-height:640px) and (max-height:899.98px){
  .inv-groep{padding-block:16px 12px}
  .inv-care-rij{margin-top:10px;padding-top:2px}
}
@media (orientation:landscape) and (min-height:640px) and (max-height:829.98px){
  .inv-inhoud{padding-bottom:22px}
  .inv-groep{padding-block:14px 10px}
  .inv-bouw{gap:6px}
  .inv-bouw__knop{margin-top:2px}
  .inv-care-rij{margin-top:8px;padding-top:0}
  .inv-btw{margin-top:4px}
  .inv-uitklap{margin-top:0}
}
@media (orientation:landscape) and (min-height:640px) and (max-height:829.98px) and (hover:hover) and (pointer:fine){
  .inv-care,.inv-uitklap__knop{min-height:40px}          /* alleen met een muis; met aanraking blijven de raakvlakken 44 px */
}
/* lage laptop (1366x650, 1280x640, 1280x720) en breed-en-laag: de groep in twee kolommen, zodat alles tussen muurrand en vouw past */
@media (orientation:landscape) and (min-height:640px) and (max-height:739.98px) and (min-width:1240px),
       (orientation:landscape) and (min-height:640px) and (min-aspect-ratio:19/10) and (min-width:1240px){
  .inv-hero{--kopmin:calc(var(--ph) * .516 + 4px - var(--pt) - 28px)}
  .inv-inhoud{padding-bottom:22px}
  .inv-groep{display:grid;grid-template-columns:auto minmax(204px,auto);align-items:start;width:max-content;max-width:calc(var(--vl) - 32px - var(--gut));padding-block:16px 12px}
  .inv-bouw{grid-column:1;grid-row:1 / span 3;padding-right:26px;gap:6px}
  .inv-care-rij,.inv-btw,.inv-uitklap{grid-column:2;align-self:stretch;margin:0;padding-left:26px;border-left:1px solid rgba(11,44,41,.22)}
  .inv-care-rij{border-top:0;padding-top:0}
  .inv-btw{padding-top:6px}
  .inv-care,.inv-uitklap__knop{min-height:44px}
}

/* --- staande tablet breder dan 860 px (stand D): de plaat staat bovenaan en de kop staat op de lucht links van de zuil, zoals
       liggend (was: kop op een effen ivoren vlak boven de plaat); de groep ligt op de muur, onder de muurrand. */
@media (min-width:861px) and (orientation:portrait){
  .inv-hero{--pt:max(calc(var(--ph) * .142),calc(var(--header-h) + 36px));--kopmin:calc(var(--ph) * .516 + 4px - var(--pt) - 28px);min-height:var(--ph)}
  .inv-stage{top:0;bottom:auto;height:100%;min-height:var(--ph);-webkit-mask-image:none;mask-image:none}
  .inv-inhoud{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(var(--kopmin,0px),1fr) auto;justify-items:start;align-items:start;
    min-height:var(--ph);padding:var(--pt) var(--gut) 22px}
  .inv-groep{padding-block:14px 10px}
  .inv-bouw{gap:6px}
  .inv-bouw__knop{margin-top:2px}
  .inv-care-rij{margin-top:8px;padding-top:0}
  .inv-btw{margin-top:4px}
  .inv-uitklap{margin-top:0}
}
/* smaller dan 1000 px past de groep niet tussen muurrand en onderrand van de plaat: daar staat zij onderaan (de hero groeit niet) */
@media (min-width:861px) and (max-width:999.98px) and (orientation:portrait){.inv-hero{--kopmin:0px}}

/* --- punten 6 en 7: stand C (liggend, lager dan 640 px). Kop past links van de zuil; knoptekst op één regel; de groep is compacter
       en ligt verder op de plaat; onder de plaat loopt het geaderde marmer van de vloer door (was: effen ivoor). */
@media (orientation:landscape) and (max-height:639.98px){
  .inv-hero{background:url("../scenes/lp3-marmer-aders.svg") 50% 0 / max(100%,1150px) auto repeat-y,linear-gradient(180deg,#f7f3ec 0,#f3eadb 100%)}
  .inv-stage{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 88%,transparent 100%)}
  .inv-inhoud{gap:14px;padding-top:calc(var(--header-h) + 28px);padding-bottom:28px}
  .inv-kop h1{font-size:min(2.25rem,clamp(22px,calc((var(--zl) - var(--gut) - 16px) / 7.1),40px))}
  .inv-groep{padding-block:14px 10px}
  .inv-bouw{gap:6px}
  .inv-bouw__knop{margin-top:2px;padding-inline:16px 12px;gap:8px}
  .inv-care-rij{margin-top:8px;padding-top:0}
  .inv-btw{margin-top:4px}
  .inv-uitklap{margin-top:0}
}
@media (orientation:landscape) and (max-height:639.98px) and (min-width:840px){
  .inv-groep{width:min(420px,calc(var(--vl) - 16px - var(--gut)))}
  .inv-care-rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px}      /* Care en Care+ naast elkaar, zoals op de staande tablet */
  .inv-care{gap:8px}
}

/* --- punt 6: knoptekst op één regel op 320 px breed */
@media (max-width:340px) and (orientation:portrait){
  .inv-bouw__knop{font-size:min(.875rem,18px);padding-inline:14px 12px;gap:8px}
}

/* --- staande tablet tot 860 px (820x1180): naam, prijs en knop op één rij, btw-regel en "Wat is inbegrepen?" op één rij,
       zodat de hele groep boven de vouw staat */
@media (min-width:760px) and (max-width:860px) and (orientation:portrait){
  .inv-groep{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:12px 24px 8px}
  .inv-bouw{grid-column:1 / -1;grid-template-columns:minmax(0,1fr) auto auto;column-gap:22px;align-items:center}
  .inv-bouw__pr{align-self:center}
  .inv-bouw__pr b{font-size:min(2.75rem,54px)}
  .inv-bouw__knop{grid-column:3;grid-row:1;justify-self:end;align-self:center;padding-inline:18px 14px;gap:10px}
  .inv-care-rij{grid-column:1 / -1}
  .inv-btw{grid-column:1;margin:0}
  .inv-uitklap{grid-column:2;margin:0}
}

/* --- punten 4 en 5: het overzicht naast de keuzes. Iets bredere kaart op 1101-1400 px ("Via e-mail ..." op één regel), de kaart
       mag tot 16 px boven de onderrand van het scherm komen, en de rijen zijn compacter op lagere schermen. */
@media (min-width:1101px) and (max-width:1400px){
  .inv-conf-grid{grid-template-columns:minmax(0,1.25fr) minmax(340px,.9fr);gap:clamp(36px,4vw,64px)}
}
@media (min-width:861px){
  .inv-overzicht{max-height:calc(100svh - var(--header-h) - 40px)}
  .inv-ov-cta .cta-note{letter-spacing:.01em;text-wrap:balance}
}
@media (min-width:861px) and (max-height:820px){
  .inv-ov-rijen li{padding:6px 0}
  .inv-ov-groep{margin-top:10px}
  .inv-overzicht h3{margin-bottom:2px}
}

/* --- punt 8 (alleen de proef): het proeflabel staat links onder de kopbalk en schuift met de pagina mee; het ligt niet meer over
       de bovenregel (320, 360) en niet meer over de hoek van het meelopende overzicht. De basis is niet gewijzigd. */
.proefbadge{position:absolute;right:auto;left:max(12px,calc(var(--edge) - 12px))}
@media (max-width:860px){.proefbadge{right:auto;left:8px}}
/* staand tot 860 px: de bovenregel en de kop staan rechts in de lucht; het label staat links, onder de hoogte van de kop, op de stam */
@media (max-width:860px) and (orientation:portrait){.proefbadge{top:calc(var(--header-h) + 150px + env(safe-area-inset-top,0px))}}
/* ============================================================================================ RONDE 4b (B118) */
/* --- mobiel glas (staand tot 860 px): achter het paneel ligt het turquoise bassin van het staande beeld; met de standaardverzadiging
       (1,45) werd dat één verzadigd vlak. Rustiger: de achtergrond achter het glas minder verzadigd en iets lichter, een dunne
       ivoren vulling in plaats van een blauwige, en een neutralere gloed langs de onderrand. Vervaging, breking, rand en glans
       blijven die van de basis: het beeld (vloer, goudlijn, water) blijft door het glas leesbaar; geen dekkend vlak. */
@media (max-width:860px) and (orientation:portrait){
  .inv-groep.glas,html:not(.glas-breking) .inv-groep.glas{--g-vul-a:.30;--g-vul-b:.16;--g-vul-c:.22;--glas-turq:150,196,196;
    background:linear-gradient(128deg,rgba(255,253,248,var(--g-vul-a)) 0%,rgba(255,253,248,var(--g-vul-b)) 46%,rgba(246,241,231,var(--g-vul-c)) 100%);
    -webkit-backdrop-filter:blur(var(--g-blur)) saturate(.62) brightness(1.06);backdrop-filter:blur(var(--g-blur)) saturate(.62) brightness(1.06)}
  html.glas-breking .inv-groep.glas[data-glas-klaar]{-webkit-backdrop-filter:var(--glas-filter) saturate(.62) brightness(1.06);backdrop-filter:var(--glas-filter) saturate(.62) brightness(1.06)}
}
/* de terugvalstanden van de basis blijven voor dit paneel gelden (zelfde waarden als nx-basis.css, hier herhaald omdat de regel hierboven zwaarder weegt) */
@media (prefers-reduced-transparency:reduce){
  html .inv-groep.glas,html.glas-breking .inv-groep.glas[data-glas-klaar]{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fbf8f1}
}
@media (prefers-contrast:more){
  html .inv-groep.glas,html.glas-breking .inv-groep.glas[data-glas-klaar]{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fffdf8}
}
@media (forced-colors:active){
  html .inv-groep.glas,html.glas-breking .inv-groep.glas[data-glas-klaar]{-webkit-backdrop-filter:none;backdrop-filter:none;background:Canvas}
}
/* --- liggend lager dan 640 px: de onderrand van de hero sluit op de kleur van de vloer aan en vloeit erin uit (geen toonsprong, de aders lopen niet tegen een rand) */
@media (orientation:landscape) and (max-height:639.98px){
  .inv-hero{background:url("../scenes/lp3-marmer-aders.svg") 50% 0 / max(100%,1150px) auto repeat-y,linear-gradient(180deg,#f7f3ec 0,#f3eadb 62%,#f7f3ec 100%)}
  .inv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,243,236,0) 0%,rgba(247,243,236,.6) 60%,#f7f3ec 100%)}
}
/* ============================================================================================ RONDE 5 (keuring ronde 4, "gratis in de opmaak") */
/* --- 1. overzicht naast de keuzes op lage vensters (lager dan 740 px): compacter, zodat alle vijf regels zonder schuiven passen */
@media (min-width:861px) and (max-height:739.98px){
  .inv-overzicht{top:calc(var(--header-h) + 12px);max-height:calc(100svh - var(--header-h) - 22px);padding-block:12px}
  .inv-overzicht .eyebrow{margin-bottom:2px}
  .inv-overzicht h3{font-size:22px;margin-bottom:0}
  .inv-ov-groep{margin-top:6px}
  .inv-ov-rijen li{padding:4px 0;gap:0 16px}
  .inv-ov-rijen .nm{font-size:1rem}
  .inv-ov-rijen .pr{font-size:19px}
  .inv-ov-rijen .noot{font-size:.875rem;line-height:1.35}
  .inv-ov-links{margin-top:4px}
  .inv-ov-btw{margin-top:4px;font-size:.8125rem;line-height:1.4}
  .inv-ov-cta{margin-top:8px}
  .inv-ov-cta .glas-knop{min-height:46px}
  .inv-ov-cta .cta-note{margin-top:4px}
  .inv-ov-check{margin-top:0}
  .inv-inbegrepen{padding-top:16px}          /* 4c: de geopende lijst past dan onder het paneel zonder dat het paneel onder de kopbalk schuift */
}
@media (min-width:861px) and (max-height:739.98px) and (hover:hover) and (pointer:fine){
  .inv-ov-links a{min-height:26px}
  .inv-ov-check{min-height:36px}
}
/* nog lager (onder 620 px): het overzicht loopt niet meer mee maar staat gewoon in de pagina, volledig uitgeschreven; niets schuift binnen de kaart */
@media (min-width:861px) and (max-height:619.98px){
  .inv-overzicht{position:static;max-height:none}
  .inv-overzicht>.inv-ov-lijst{overflow:visible;background:none;margin-right:0;padding-right:0}
}

/* --- 2, 3 en 4. liggend lager dan 640 px (stand C):
       - past de groep niet naast de vogel (minder dan 280 px), dan begint zij onder de sleep en mag zij de volle breedte nemen (zoom 200 % op 1024x768);
       - de groep begint nooit boven de muurrand (geen zee achter de bovenkant van het glas); zij mag onder het eerste scherm doorlopen (B118 punt 6);
       - onder de groep 64 px, zodat de slagschaduw niet door de onderrand van de hero wordt afgesneden. */
@media (orientation:landscape) and (max-height:639.98px){
  .inv-hero{--pt:calc(var(--header-h) + 28px);--naast:calc(var(--vl) - 16px - var(--gut));
    --duw:clamp(0px,calc((280px - var(--naast)) * 9999),calc(var(--ph) * .774 + 12px - var(--pt) - 14px));
    --muur:calc(var(--ph) * .516 + 4px - var(--pt) - 14px)}
  .inv-inhoud{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(max(var(--duw),var(--muur)),auto) auto;justify-items:start;align-items:start;row-gap:14px;
    padding-top:var(--pt);padding-bottom:64px}
  .inv-groep{width:min(392px,100%,max(var(--naast),clamp(0px,calc((280px - var(--naast)) * 9999),392px)))}
}
@media (orientation:landscape) and (max-height:639.98px) and (min-width:840px){
  .inv-groep{width:min(420px,var(--naast))}
}
/* smal en liggend laag (zoom 200 %): kop en de lijn naast de bovenregel blijven links van de zuil */
@media (orientation:landscape) and (max-height:639.98px){
  .inv-kop h1{font-size:min(2.25rem,clamp(19px,calc((var(--zl) - var(--gut) - 16px) / 7.1),40px))}
  .inv-kop .eyebrow::after{width:clamp(0px,calc(var(--zl) - var(--gut) - 168px),48px)}
}

/* --- 3. staande tablet tot 860 px: de plaat is hoger dan de hero; de onderrand van het beeld vloeit uit in de vloer (geen rechte lijn) */
@media (min-width:601px) and (max-width:860px) and (orientation:portrait){
  .inv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(247,243,236,0) 0%,rgba(247,243,236,.55) 52%,#f7f3ec 100%)}
}

/* --- 4. de uitklaplink groeit mee met de letterinstelling, met een bovengrens (bij 16 px gelijk aan de basis: 15 px) */
.inv-uitklap__knop{font-size:min(.9375rem,19px)}

/* --- 5. vaste balk (tot 860 px): zelfde woorden, kleinere letter en marges, evenwichtige regelafbreking; tot 430 px zonder het pijltje in "Overzicht" */
@media (max-width:860px){
  .inv-mbalk{padding-left:14px;gap:10px}
  .inv-mbalk-txt{font-size:.8125rem;letter-spacing:-.005em;text-wrap:balance}
  .inv-mbalk-go{padding:0 12px;gap:6px;font-size:.875rem}
}
@media (max-width:430px){.inv-mbalk-go .arr{display:none}}
/* --- F2 (toegankelijkheidslezing 04-10): geforceerde kleuren (Windows hoog contrast). De gekozen stand van keuzerondje en vinkje
       zat alleen in achtergrond en schaduw en verdween; hier met systeemkleuren, zodat gekozen en niet gekozen te onderscheiden zijn. */
@media (forced-colors:active){
  .inv-vink{forced-color-adjust:none;background:Canvas;border:2px solid CanvasText}
  .inv-optie input:checked~.inv-vink{background:Highlight;border-color:Highlight}
  .inv-optie input:checked~.inv-vink::after{border-color:HighlightText}
  .inv-optie--rond input:checked~.inv-vink::after{background:HighlightText}
  .inv-optie:has(input:disabled) .inv-vink{border-color:GrayText}
  .inv-optie:has(input:checked){border-left:4px solid Highlight;padding-left:6px}
}