/* ══════════════════════════════════════════════════════════════════════════
   Huisbiografie — homepage (september 2026)

   De homepage als de eerste bladzijden van het boek: de hero is de lichte
   titelpagina (dubbele gouden lijn, de boekspreads eronder), daarna crème
   bladzijden. Koppen en lopende tekst in Newsreader, de tekstletter van het
   boek; knoppen, labels en kleine teksten in Hanken Grotesk. Geen mono en geen
   gespatieerde kapitalen meer: die lieten de site als een gegenereerde
   landingspagina lezen (Toms oordeel, 24 sep 2026). Het merkteken is het rode
   rondje dat in elk boek het huis op de kaart aanwijst.

   Laadt ná stijl.css en huisstijl.css en geldt alleen onder body.home. De
   kleuren, letters, topbalk, voet en cookievraag deelt de homepage met de
   andere pagina's (huisstijl.css); hier staat alleen de homepage zelf.
   Ontwerp: Claude Design-canvas „Finale".
   ══════════════════════════════════════════════════════════════════════════ */

.home .h-pagina a{color:var(--h-inkt)}

/* ── gedeelde bouwstenen ──────────────────────────────────────────────── */
.h-binnen{max-width:var(--h-maat);margin:0 auto}
.h-label{font-family:var(--h-sans);font-weight:600;font-size:15px;line-height:1.4;
  color:var(--h-rood);letter-spacing:0;text-transform:none;margin:0}
.h-klein{font-family:var(--h-sans);font-size:14px;font-weight:600;color:var(--h-inkt);margin:0}
.h-bron,.home .h-pagina .h-bron{font-family:var(--h-sans);font-size:13.5px;letter-spacing:0;
  line-height:1.5;color:var(--h-mat)}

.home .h-pagina h2{font-family:var(--h-serif);font-weight:500;
  font-size:clamp(34px,4.3vw,52px);line-height:1.06;letter-spacing:-.015em;
  color:var(--h-inkt);margin:0;text-wrap:balance}
.home .h-pagina h3{font-family:var(--h-serif);font-weight:500;color:var(--h-inkt);margin:0}

.h-kop{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px 56px;
  align-items:end;margin-bottom:44px}
.h-kop>div{display:flex;flex-direction:column;gap:12px}
.h-kop-los{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.h-intro{font-size:19px;line-height:1.6;color:var(--h-mat);margin:0;text-wrap:pretty}
@media(max-width:820px){
  .h-kop{grid-template-columns:1fr;gap:14px;margin-bottom:28px}
  .h-intro{font-size:17px}
}

/* knoppen: de grote knop is nachtblauw met ronde hoeken; alleen binnen de
   pagina, zodat de cookievraag (hangt aan body) zijn eigen knoppen houdt. */
.home .h-pagina .knop{display:inline-flex;align-items:center;justify-content:center;
  background:var(--h-nacht);color:#FBF8F1;font-family:var(--h-sans);font-size:16px;
  font-weight:600;letter-spacing:0;text-transform:none;border-radius:12px;
  padding:0 26px;min-height:56px;line-height:1.2;text-decoration:none;white-space:nowrap}
.home .h-pagina .knop:hover{background:#26314A}
.home .h-pagina .knop.klein{min-height:46px;padding:0 20px;font-size:15px}

/* secties: stijl.css zet .sectie op smalle vellen met linnen eromheen */
.home .h-sectie{padding:var(--h-sectie) var(--h-rand)}
.home .h-sectie + .h-sectie{padding-top:var(--h-sectie)}

/* ── hero: de titelpagina ─────────────────────────────────────────────── */
.h-hero{background:var(--h-titel);padding:0 var(--h-rand);overflow:hidden}
/* De hero als titelpagina, zonder kader en zonder sierteken. Een lijst om de
   hero (op inhoudsbreedte, als paginarand, vervagend, als kaartrand, als
   hoekstukken) en daarna een los anker lazen steeds als versiering; Tom koos
   op 24 sep 2026 voor een schone hero. Op 25 sep werd het twee kolommen: de
   tekst links, de bladzijden als waaier rechts. Gecentreerd met de spreads
   eronder vielen die op een laptop net onder de rand. */
/* Op een groot scherm krijgt het boek de helft van de breedte: met 1240 px en
   een smallere beeldkolom bleef de kaft op elk scherm boven 1440 px 190 px
   breed (Tom, 26 sep 2026). De tekstkolom wordt nooit smaller dan de eerste
   regel van de ondertitel, die daar op één regel blijft. */
.h-titelpagina{max-width:1440px;margin:0 auto;padding:clamp(32px,5vw,72px) 0 clamp(48px,6vw,88px);
  display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
@media(min-width:1181px){.h-sub span:first-child{white-space:nowrap}}
/* Op een heel groot scherm schaalt de hele pagina mee, zodat hij niet klein in
   het midden staat (Tom, 26 sep 2026). Alleen als er ook hoogte is: op een
   breed maar laag scherm zou de hero anders onder de rand zakken. */
@media(min-width:2200px) and (min-height:1150px){body.home{zoom:1.2}}
@media(min-width:2500px) and (min-height:1300px){body.home{zoom:1.33}}
/* Een groot scherm (vanaf 1700 × 950): het boek neemt meer dan de helft. */
@media(min-width:1700px) and (min-height:950px){
  .h-titelpagina{max-width:1560px;grid-template-columns:minmax(min-content,.9fr) minmax(0,1.1fr)}
}
.h-herotekst{display:flex;flex-direction:column;align-items:flex-start;gap:18px;text-align:left}

.h-hero h1{font-family:var(--h-serif);font-weight:500;font-size:clamp(38px,4.6vw,68px);
  line-height:1;letter-spacing:-.025em;color:var(--h-inkt);margin:0;text-wrap:balance}
.h-hero h1 em{font-style:italic;color:var(--h-rood);font-weight:500}
/* Twee regels: de belofte, dan voor wie. De eerste zin past op één regel
   zolang de kolom breed genoeg is (Tom, 25 sep 2026). */
.h-sub{font-style:italic;font-size:clamp(18px,1.6vw,23px);line-height:1.45;color:var(--h-mat);
  margin:0}
.h-sub span{display:block}
.h-zoekvel{width:100%;max-width:560px;margin-top:4px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.h-veldlabel{font-family:var(--h-sans);font-size:15px;font-weight:600;color:var(--h-inkt)}
.home #hero .zoekrij{width:100%;display:flex;gap:8px;padding:6px;background:var(--h-wit);
  border:1px solid var(--h-lijn);border-radius:16px;box-shadow:0 10px 30px rgba(24,32,49,.08)}
.home #hero .zoekrij .veld{flex:1}
.home #hero .zoekrij input{min-height:56px;border:0;background:transparent;box-shadow:none;
  border-radius:12px;padding:0 16px;font-family:var(--h-serif);font-size:19px}
.home #hero .zoekrij input:focus{outline:2px solid var(--h-rood);outline-offset:0;background:transparent}
.home #hero .zoekrij .knop{width:auto;border-radius:12px}
.home #hero .adres-ok{color:#46603F;font-family:var(--h-sans);font-size:14px}
.home #hero .suggesties{box-shadow:0 18px 40px rgba(24,32,49,.18);border-color:var(--h-lijn);
  border-radius:12px;overflow:hidden;text-align:left}
.home .veldfout{font-family:var(--h-sans);letter-spacing:0;font-size:14px}
.h-vertrouwen{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px 14px;margin:0;
  font-family:var(--h-sans);font-size:15px;color:var(--h-mat)}
.h-vertrouwen b{color:var(--h-inkt)}
.home .h-vertrouwen a{color:var(--h-inkt);text-underline-offset:4px}
/* Eén opengeslagen spread met de dichte kaft ervoor, licht gekanteld. Een
   waaier van drie spreads oogde druk: de achterste lieten alleen randjes
   knipsel en foto zien (Tom, 25 sep 2026). De kaft dekt de tekstkant af, de
   kaarten blijven zichtbaar; zonder kaft konden de bladzijden ook een pdf zijn. */
.h-spreads{position:relative;aspect-ratio:1/.8}
.h-spreads a{position:absolute;display:block;width:88%}
.h-spreads img{width:100%;height:auto;border-radius:3px}
.h-s2{left:0;top:8%;width:90%;transform:rotate(-2deg)}
.h-s2 img{box-shadow:0 28px 60px rgba(24,32,49,.3)}
.h-spreads .h-kaft{width:37%;left:auto;right:0;top:28%;transform:rotate(4deg)}
.h-kaft img{border-radius:2px 5px 5px 2px;box-shadow:0 26px 50px rgba(24,32,49,.38),0 3px 8px rgba(24,32,49,.25)}
@media(min-width:901px) and (max-width:1180px){
  .h-titelpagina{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .home #hero .zoekrij{flex-direction:column;background:transparent;border:0;box-shadow:none;padding:0}
  .home #hero .zoekrij input{background:var(--h-wit);border:1px solid var(--h-lijn)}
  .h-vertrouwen{gap:6px 10px;font-size:14px}
}
@media(max-width:900px){
  .h-titelpagina{grid-template-columns:1fr;gap:36px;padding-top:clamp(20px,3.6vw,52px)}
  .h-herotekst{align-items:center;text-align:center}
  .h-zoekvel{align-items:center}
  .h-vertrouwen{justify-content:center}
  .h-spreads{width:min(560px,100%);margin:0 auto}
}
/* Telefoon: kop, boek, zoekveld. In Safari is op een iPhone zo'n 660 px te
   zien; met ondertitel, veldlabel en drie linkjes onder elkaar begon het beeld
   pas op 618 px (Tom, 25 sep 2026). Nu staan kop, boek en knop samen op het
   eerste scherm. De ondertitel wijkt: het boek laat zien wat hij vertelt. Het
   veldlabel blijft voor schermlezers; de placeholder zegt hetzelfde. */
@media(max-width:640px){
  .h-hero .h-label{display:none}
  .h-titelpagina{gap:14px;padding-top:16px;padding-bottom:32px}
  .h-herotekst{display:contents}
  .h-hero h1{order:1}
  .h-spreads{order:2;width:84%}
  .h-zoekvel{order:3}
  .h-vertrouwen{order:4}
  .h-sub{display:none}
  .h-veldlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .home #hero .zoekrij{flex-direction:column;background:transparent;border:0;box-shadow:none;padding:0}
  .home #hero .zoekrij input{background:var(--h-wit);border:1px solid var(--h-lijn)}
  .home #hero .zoekrij .knop{width:100%}
  /* de prijs op een eigen regel, de twee links samen eronder: zo blijft er
     bij het afbreken geen losse punt aan het eind van een regel staan */
  .h-vertrouwen{justify-content:center;gap:2px 10px;font-size:14px}
  .h-vertrouwen > span:first-child{flex-basis:100%;text-align:center}
  .h-vertrouwen > span:first-child + .h-punt{display:none}
}

/* ── strook ───────────────────────────────────────────────────────────── */
.h-strook{background:var(--h-papier);border-block:1px solid var(--h-lijn);padding:0 var(--h-rand)}
.h-strook ul{max-width:var(--h-maat);margin:0 auto;list-style:none;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.h-strook li{display:flex;flex-direction:column;gap:2px;padding:26px 28px}
.h-strook li + li{border-left:1px solid var(--h-lijn)}
.h-strook b{font-family:var(--h-serif);font-weight:500;font-size:30px;line-height:1.2}
.h-strook span{font-family:var(--h-sans);font-size:15px;color:var(--h-mat)}
@media(max-width:820px){
  .h-strook ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-strook li{padding:16px 14px}
  .h-strook li:nth-child(3){border-left:0}
  .h-strook li:nth-child(n+3){border-top:1px solid var(--h-lijn)}
  .h-strook b{font-size:22px}
  .h-strook span{font-size:13.5px;line-height:1.4}
}

/* ── het boek ─────────────────────────────────────────────────────────── */
.h-boekbeeld{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:40px;align-items:stretch}
.home .boekmock.echt{transform:none;height:100%;max-width:none;margin:0}
.home .boekmock.echt img{width:100%;height:100%;object-fit:cover;border:0;border-radius:16px;box-shadow:none}
.h-spread{display:flex;align-self:center;border-radius:4px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.14)}
.h-spread img{width:50%;height:auto}
.h-kenmerken{list-style:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;
  border-top:1px solid var(--h-lijn);margin-top:44px;padding-top:24px}
.h-kenmerken li{display:flex;align-items:center;gap:10px;font-family:var(--h-sans);font-size:16px;font-weight:500}
.h-kenmerken li::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--h-rood);flex:none}
.h-nietweet{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:18px 48px;align-items:start;
  margin-top:40px;padding:34px 36px;border:2px dashed var(--h-rood);border-radius:18px}
.h-nietweet>div{display:flex;flex-direction:column;gap:8px}
.home .h-nietweet h3{font-size:28px;line-height:1.15}
.h-nietweet p{margin:0;color:var(--h-mat);font-size:17px;line-height:1.55}
.h-nietweet blockquote{display:flex;flex-direction:column;gap:10px;margin:0}
.h-nietweet blockquote p{font-style:italic;font-size:21px;line-height:1.5;color:var(--h-inkt)}
.h-verder{margin:28px 0 0;font-family:var(--h-sans);font-size:16px;font-weight:600}
.home .h-verder a{text-underline-offset:4px}
@media(max-width:820px){
  .h-boekbeeld{grid-template-columns:1fr;gap:20px}
  .home .boekmock.echt img{height:auto;aspect-ratio:5/4}
  .h-kenmerken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px}
  .h-kenmerken li{font-size:14px}
  .h-nietweet{grid-template-columns:1fr;padding:24px 22px}
}

/* ── voorbeelden: vijf adressen ───────────────────────────────────────── */
.h-voorbeelden{background:var(--h-perkament);padding:var(--h-sectie) var(--h-rand)}
.h-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:20px}
.h-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:62px;
  padding:12px 16px;border-radius:14px;border:1px solid var(--h-lijn);background:var(--h-wit);
  cursor:pointer;text-align:left;font-family:var(--h-sans);color:var(--h-inkt)}
.h-tabs button span{font-size:15px;font-weight:600}
.h-tabs button small{font-size:13px;color:var(--h-mat)}
.h-tabs button:hover{border-color:var(--h-goud)}
.h-tabs button[aria-selected="true"]{background:var(--h-nacht);border-color:var(--h-nacht);color:#FBF8F1}
.h-tabs button[aria-selected="true"] small{color:var(--h-maan)}
.h-paneel{display:grid;grid-template-columns:380px minmax(0,1fr);gap:48px;align-items:start;
  padding:40px;background:var(--h-wit);border:1px solid var(--h-lijn);border-radius:18px}
.h-paneelbeeld{margin:0;display:flex;flex-direction:column;gap:8px}
.h-paneelbeeld>span{display:flex;align-items:center;justify-content:center;height:530px;
  background:var(--h-perkament);border-radius:8px;padding:18px}
.h-paneelbeeld img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:3px;box-shadow:0 14px 30px rgba(0,0,0,.16)}
.h-paneelbeeld.h-foto>span{padding:0;overflow:hidden}
.h-paneelbeeld.h-foto img{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}
.h-paneeltekst{display:flex;flex-direction:column;gap:18px;padding-top:4px}
.home .h-paneeltekst h3{font-size:38px;line-height:1.1;text-wrap:balance}
.h-draait{font-family:var(--h-sans);font-size:17px;font-weight:600;color:var(--h-mat);margin:0}
.h-paneeltekst blockquote{margin:0}
.h-paneeltekst blockquote p{font-style:italic;font-size:23px;line-height:1.45;color:var(--h-inkt);margin:0}
.h-inhoud{border-top:1px solid var(--h-lijn);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.h-inhoud ol{padding-left:22px;display:flex;flex-direction:column;gap:5px;font-size:18px;line-height:1.4}
.h-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 0}
.h-feiten div{display:flex;flex-direction:column-reverse;gap:4px;padding-left:12px;border-left:2px solid var(--h-rood)}
.h-feiten dt{font-family:var(--h-serif);font-weight:500;font-size:38px;line-height:1}
.h-feiten dd{margin:0;font-family:var(--h-sans);font-size:14px;line-height:1.35;color:var(--h-mat)}
.h-uitleg{margin:0;font-size:17px;line-height:1.55;color:var(--h-mat)}
.h-hoofdstukken{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:18px;line-height:1.4}
.h-hoofdstukken li{display:flex;align-items:center;gap:10px}
.h-hoofdstukken li::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid var(--h-rood);flex:none}
.h-drieluik{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.h-drieluik span{position:relative;display:block;border-radius:8px;overflow:hidden}
.h-drieluik img{width:100%;aspect-ratio:1/1;object-fit:cover}
.h-drieluik b{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:999px;background:rgba(24,32,49,.86);
  color:#FBF8F1;font-family:var(--h-sans);font-size:13px;font-weight:600}
.h-drieluik figcaption{grid-column:1 / -1}
.h-belofte{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:40px;text-align:center}
.h-belofte p{font-style:italic;font-size:20px;line-height:1.5;color:var(--h-mat);max-width:760px;margin:0}
@media(max-width:900px){
  /* De rij met huistypes plakt onder de menubalk zolang je in deze sectie leest:
     anders moest je voor elk ander huis terug naar boven (Tom, 26 sep 2026).
     --h-topbalk meet voorbeeldverhalen.js; 82 px is de balk op een telefoon. */
  .h-tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--h-rand) * -1);
    padding:10px var(--h-rand);margin-top:-10px;
    position:sticky;top:var(--h-topbalk,82px);z-index:20;background:var(--h-perkament);
    box-shadow:0 8px 12px -10px rgba(24,32,49,.25)}
  .h-tabs::-webkit-scrollbar{display:none}
  .h-tabs button{flex:0 0 auto}
  .h-paneel{grid-template-columns:1fr;gap:22px;padding:20px}
  .h-paneelbeeld>span{height:400px}
  .home .h-paneeltekst h3{font-size:28px}
  .h-draait{font-size:15px}
  .h-paneeltekst blockquote p{font-size:19px}
  .h-inhoud ol,.h-hoofdstukken{font-size:16px}
  .h-feiten dt{font-size:28px}
  .h-feiten dd{font-size:12.5px}
  .h-belofte p{font-size:17px}
}

/* ── een kijkje in één boek ───────────────────────────────────────────── */
.h-kijkje{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;margin-top:44px}
.h-kolom{display:flex;flex-direction:column;gap:16px}
.home .h-kolom h3{font-size:28px;line-height:1.2}
.h-kaart{display:flex;flex-direction:column;gap:14px}
.h-kaartradio{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.h-kaartvenster{aspect-ratio:1/.92;border-radius:16px;overflow:hidden;background:var(--h-perkament)}
.h-kaartvenster img{display:none;width:100%;height:100%;object-fit:cover}
.h-jaren{display:flex;flex-wrap:wrap;gap:6px}
.h-jaren label{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--h-lijn);background:var(--h-wit);cursor:pointer;
  font-family:var(--h-sans);font-size:15px;font-weight:600;color:var(--h-inkt)}
.h-jaren label:hover{border-color:var(--h-goud)}
#kaartjaar-1815:checked ~ .h-kaartvenster [data-jaar="1815"],
#kaartjaar-1850:checked ~ .h-kaartvenster [data-jaar="1850"],
#kaartjaar-1900:checked ~ .h-kaartvenster [data-jaar="1900"],
#kaartjaar-1925:checked ~ .h-kaartvenster [data-jaar="1925"],
#kaartjaar-1965:checked ~ .h-kaartvenster [data-jaar="1965"],
#kaartjaar-1985:checked ~ .h-kaartvenster [data-jaar="1985"],
#kaartjaar-nu:checked ~ .h-kaartvenster [data-jaar="nu"]{display:block}
#kaartjaar-1815:checked ~ .h-jaren [for="kaartjaar-1815"],
#kaartjaar-1850:checked ~ .h-jaren [for="kaartjaar-1850"],
#kaartjaar-1900:checked ~ .h-jaren [for="kaartjaar-1900"],
#kaartjaar-1925:checked ~ .h-jaren [for="kaartjaar-1925"],
#kaartjaar-1965:checked ~ .h-jaren [for="kaartjaar-1965"],
#kaartjaar-1985:checked ~ .h-jaren [for="kaartjaar-1985"],
#kaartjaar-nu:checked ~ .h-jaren [for="kaartjaar-nu"]{background:var(--h-nacht);border-color:var(--h-nacht);color:#FBF8F1}
#kaartjaar-1815:focus-visible ~ .h-jaren [for="kaartjaar-1815"],
#kaartjaar-1850:focus-visible ~ .h-jaren [for="kaartjaar-1850"],
#kaartjaar-1900:focus-visible ~ .h-jaren [for="kaartjaar-1900"],
#kaartjaar-1925:focus-visible ~ .h-jaren [for="kaartjaar-1925"],
#kaartjaar-1965:focus-visible ~ .h-jaren [for="kaartjaar-1965"],
#kaartjaar-1985:focus-visible ~ .h-jaren [for="kaartjaar-1985"],
#kaartjaar-nu:focus-visible ~ .h-jaren [for="kaartjaar-nu"]{outline:2px solid var(--h-rood);outline-offset:3px}
.h-knipsel,.h-archieffoto{margin:0;display:flex;flex-direction:column;gap:8px}
.h-knipsel img{border-radius:4px;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.h-archieffoto img{width:100%;height:190px;object-fit:cover;border-radius:12px}
.h-beginletter{margin:0;font-size:19px;line-height:1.6}
.h-beginletter::first-letter{float:left;font-weight:600;font-size:66px;line-height:.82;
  padding:6px 10px 0 0;color:var(--h-rood)}
@media(max-width:820px){
  .h-kijkje{grid-template-columns:1fr;gap:40px;margin-top:28px}
  .home .h-kolom h3{font-size:24px}
  .h-kaartvenster{aspect-ratio:1/1}
  .h-jaren label{min-height:40px;padding:0 13px;font-size:14px}
  .h-beginletter{font-size:17px}
  .h-beginletter::first-letter{font-size:56px}
}

/* ── wijnregel ────────────────────────────────────────────────────────── */
.h-wijn{background:var(--h-perkament)}
.h-wijnrij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:64px;align-items:center}
.home .h-wijnrij h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05}
.h-wijnrij h2 span{display:block;font-style:italic;color:var(--h-rood)}
.h-momentfoto{width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:18px;
  border:10px solid var(--h-wit);box-shadow:0 20px 40px rgba(24,32,49,.16)}
@media(max-width:820px){.h-wijnrij{grid-template-columns:1fr;gap:28px}}

/* ── reviews (inhoud en poort: assets/ervaringen.js) ─────────────────── */
.home #ervaringen{background:var(--h-perkament);border-block:0;padding:var(--h-sectie) 0}
.home #ervaringen .ervaringen-inner{max-width:calc(var(--h-maat) + 2 * var(--h-rand));
  padding-inline:var(--h-rand);text-align:left}
.home #ervaringen .h-kop{margin-bottom:36px}
.home #ervaringen .ervaringen-waardering{justify-self:end;align-self:end;margin:0;display:flex;
  gap:10px;font-family:var(--h-sans);font-size:16px;letter-spacing:0;text-transform:none;color:var(--h-inkt)}
.home #ervaringen .ervaringen-sterren{color:#B8904A;font-size:20px;letter-spacing:.08em}
.home #ervaringen .ervaringen-rij{margin-top:0}
.home #ervaringen .ervaring-beeld{display:none}
.home #ervaringen .ervaring + .ervaring::before{display:none}
.home #ervaringen .ervaring-tekst{height:100%;background:var(--h-wit);border:1px solid var(--h-lijn);
  border-radius:18px;padding:26px}
.home #ervaringen .ervaring-kenmerken{order:3;min-height:0;margin:0;font-family:var(--h-sans);
  font-size:14px;letter-spacing:0;text-transform:none;color:var(--h-mat)}
.home #ervaringen .ervaring-tekst blockquote{order:1}
.home #ervaringen .ervaring-tekst blockquote p{font-family:var(--h-serif);font-style:italic;
  font-size:19px;line-height:1.5;color:var(--h-inkt)}
.home #ervaringen .ervaring-voet{order:2;margin-top:auto;padding-top:16px;border-top:1px solid var(--h-lijn)}
.home #ervaringen .ervaring-tekst figcaption{font-family:var(--h-sans);font-size:15px;color:var(--h-mat)}
.home #ervaringen .ervaring-tekst figcaption b{color:var(--h-inkt)}
.home #ervaringen .ervaring:first-child .ervaring-tekst{background:var(--h-nacht);border-color:var(--h-nacht)}
.home #ervaringen .ervaring:first-child blockquote p{color:#FBF8F1}
.home #ervaringen .ervaring:first-child .ervaring-voet{border-color:rgba(255,255,255,.16)}
.home #ervaringen .ervaring:first-child figcaption,
.home #ervaringen .ervaring:first-child .ervaring-kenmerken{color:var(--h-maan)}
.home #ervaringen .ervaring:first-child figcaption b{color:#FBF8F1}
@media(min-width:901px){
  .home #ervaringen .ervaringen-rij{display:block}
  .home #ervaringen .ervaringen-pijl{display:none}
  .home #ervaringen .ervaringen-strook{overflow:visible}
  .home #ervaringen .ervaringen-lijst{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(2,minmax(0,1fr));gap:20px}
  .home #ervaringen .ervaring,.home #ervaringen .ervaring:has(.ervaring-beeld){display:block;padding:0}
  .home #ervaringen .ervaring:first-child{grid-row:span 2}
  .home #ervaringen .ervaring:first-child .ervaring-tekst{padding:44px;justify-content:center}
  .home #ervaringen .ervaring:first-child blockquote p{font-size:32px;line-height:1.3}
  .home #ervaringen .ervaring:first-child .ervaring-voet{margin-top:32px}
}
@media(max-width:900px){
  .home #ervaringen .ervaringen-rij{grid-template-columns:minmax(0,1fr);margin-inline:calc(var(--h-rand) * -1)}
  .home #ervaringen .ervaringen-pijl{display:none}
  .home #ervaringen .ervaringen-strook{padding-inline:var(--h-rand);scroll-padding-inline:var(--h-rand)}
  .home #ervaringen .ervaringen-lijst{gap:12px}
  .home #ervaringen .ervaring,.home #ervaringen .ervaring:has(.ervaring-beeld){flex:0 0 300px;display:block;padding:0}
  .home #ervaringen .ervaring:last-child{flex-basis:300px;padding-right:0}
  .home #ervaringen .ervaring-tekst{padding:24px}
  .home #ervaringen .ervaring-tekst blockquote p{font-size:18px}
  .home #ervaringen .ervaringen-waardering{justify-self:start}
}

/* ── zo werkt het + prijs ─────────────────────────────────────────────── */
.h-werkprijs{max-width:calc(var(--h-maat) + 2 * var(--h-rand));margin:0 auto;padding:var(--h-sectie) var(--h-rand);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:start}
.home .h-werkprijs .h-sectie{padding:0}
.home #zo-werkt-het{display:flex;flex-direction:column;gap:12px}
.h-stappen{list-style:none;margin-top:16px}
.h-stappen li{display:grid;grid-template-columns:48px minmax(0,1fr) 150px;gap:14px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--h-lijn)}
.h-stappen li:last-child{border-bottom:1px solid var(--h-lijn)}
.h-stapnr{font-style:italic;font-size:28px;color:var(--h-rood)}
.h-stappen h3{font-size:24px;line-height:1.2;margin-bottom:6px}
.h-stappen p{margin:0;font-size:17px;line-height:1.5;color:var(--h-mat)}
.h-wanneer{font-family:var(--h-sans);font-size:15px;color:var(--h-mat);text-align:right}
.h-prijskaart{background:var(--h-nacht);color:#FBF8F1;border-radius:18px;overflow:hidden;margin-top:12px}
.h-prijsboven{padding:40px 44px 8px;display:flex;flex-direction:column;gap:12px}
.home .h-prijskaart h2{font-family:var(--h-sans);font-size:15px;font-weight:600;letter-spacing:0;color:var(--h-maan)}
.h-bedrag{display:flex;align-items:baseline;gap:12px;margin:0}
.h-bedrag .cijfer{font-weight:500;font-size:88px;line-height:.95;color:var(--h-goudl)}
.h-bedrag em{font-size:19px;color:var(--h-maan)}
.h-prijsboven p{margin:0;font-size:18px;line-height:1.55}
.h-prijsboven .h-later{font-size:16px;color:var(--h-maan)}
.home .h-prijskaart .founder{margin:22px 0 0;padding:22px 44px;background:var(--h-nacht2);
  border:0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;align-items:center;gap:18px}
.home .h-prijskaart .founder img{width:84px;height:84px;object-position:62% 30%}
.home .h-prijskaart .founder p{font-style:italic;font-size:18px;line-height:1.45;color:#FBF8F1}
.home .h-prijskaart .founder .ondertekening{margin-top:8px;font-family:var(--h-sans);font-style:normal;
  font-size:14px;letter-spacing:0;text-transform:none;color:#FBF8F1}
.home .h-prijskaart .founder .rol{font-family:var(--h-sans);font-style:normal;font-size:14px;
  letter-spacing:0;text-transform:none;color:var(--h-maan)}
.h-prijsknop{margin:0;padding:26px 44px 36px}
.home .h-prijskaart .knop{background:#FBF8F1;color:var(--h-nacht)}
.home .h-prijskaart .knop:hover{background:#fff}
.home .h-prijskaart :focus-visible{outline-color:var(--h-goudl)}
@media(max-width:900px){
  .h-werkprijs{grid-template-columns:1fr;gap:48px}
  .h-stappen li{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .h-wanneer{grid-column:2;grid-row:1;text-align:left;font-size:13px}
  .h-stappen li>div{grid-column:2}
  .h-stapnr{grid-row:1 / span 2;font-size:24px}
  .h-stappen h3{font-size:21px}
  .h-stappen p{font-size:16px}
  .h-prijsboven{padding:28px 26px 4px}
  .h-bedrag .cijfer{font-size:68px}
  .home .h-prijskaart .founder{padding:20px 26px}
  .home .h-prijskaart .founder img{width:68px;height:68px}
  .home .h-prijskaart .founder p{font-size:17px}
  .h-prijsknop{padding:22px 26px 28px}
  .home .h-prijskaart .knop{width:100%}
}

/* ── bestellen: het bestaande formulier in de nieuwe stijl ───────────── */
.home #bestellen{background:var(--h-perkament)}
.h-bestelvel{max-width:800px;margin:0 auto;background:var(--h-wit);border:1px solid var(--h-lijn);
  border-radius:18px;padding:clamp(24px,4.4vw,48px);display:flex;flex-direction:column;gap:8px}
.home .h-bestelvel h2{margin-bottom:24px}
.home #bestellen .veldgroep{margin-bottom:26px}
.home #bestellen .veldgroep label,.home #bestellen legend{font-family:var(--h-sans);font-size:15px;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--h-inkt);margin-bottom:8px;display:block}
.home #bestellen .veldgroep label small{font-weight:400;color:var(--h-mat)}
.home #bestellen input:not([type=checkbox]):not([type=radio]){min-height:54px;border:1px solid var(--h-lijn);
  border-radius:12px;background:var(--h-wit);padding:0 16px;font-family:var(--h-serif);font-size:18px;
  color:var(--h-inkt);box-shadow:none}
.home #bestellen input:not([type=checkbox]):not([type=radio]):focus{outline:2px solid var(--h-rood);outline-offset:0}
.home #bestellen .suggesties{border-radius:12px;overflow:hidden;border-color:var(--h-lijn);
  box-shadow:0 18px 40px rgba(24,32,49,.16)}
.home .suggesties button{font-family:var(--h-serif)}
.home #bestellen .adres-ok{font-family:var(--h-sans);font-size:14px;letter-spacing:0}
.home .kaftkeuze-inleiding{font-size:16px;color:var(--h-mat)}
/* Kaarten bovenaan: gecentreerd naast het hoge kaftvoorbeeld begon de keuze pas halverwege (dogfood 25 sep). */
.home .kaftkeuze-layout{align-items:start}
.home .kaftkeuze-kaart{border:2px solid var(--h-lijn);border-radius:14px;background:var(--h-wit);box-shadow:none}
.home .kaftkeuze-kaart strong{font-family:var(--h-sans);font-size:17px;font-weight:600}
.home .kaftkeuze-kaart small{font-size:15px;color:var(--h-mat)}
.home .kaftkeuze-radio:checked + .kaftkeuze-kaart{border-color:var(--h-rood);background:var(--h-wit);
  box-shadow:0 10px 26px rgba(166,61,48,.12)}
.home .kaftkeuze-radio:checked + .kaftkeuze-kaart .kaftkeuze-vink{background:var(--h-rood);border-color:var(--h-rood)}
.home .kaftkeuze-radio:focus-visible + .kaftkeuze-kaart{outline:2px solid var(--h-rood);outline-offset:3px}
.home .kaftvoorbeeld-reeks,.home .kaftvoorbeeld-voet,.home .kaft-voorbeeldlabel{font-family:var(--h-sans)}
.home .kaftvoorbeeld-boek>strong{font-family:var(--h-serif);font-weight:500}
.home .kaftvoorbeeld figcaption{font-family:var(--h-sans);font-size:13.5px;color:var(--h-mat)}
.home #bestellen .keuze{font-family:var(--h-sans);font-size:16px}
.home #bestellen .keuze input{accent-color:var(--h-nacht)}
.home #bestellen .voor-wie-opties .keuze{border:2px solid var(--h-lijn);border-radius:12px;
  background:var(--h-wit);padding:12px 14px;font-weight:500;align-items:center}
.home #bestellen .voor-wie-opties .keuze:has(input:checked){border-color:var(--h-nacht)}
.home #bestellen .bestel-samenvatting{margin-top:10px;padding:14px 0 12px;border-color:var(--h-lijn);
  font-family:var(--h-sans);font-size:16px;color:var(--h-inkt)}
.home #bestellen .bestel-samenvatting strong{font-family:var(--h-serif);font-weight:500;font-size:24px;color:var(--h-inkt)}
.home #bestellen .start-uitleg,.home #bestellen .veilig-betalen{font-family:var(--h-sans);font-size:14px;
  line-height:1.5;color:var(--h-mat)}
.home #bestellen .start-uitleg{margin-top:12px}
.home #bestellen .start-uitleg a{color:var(--h-inkt)}
.home #bestellen .hint{font-family:var(--h-serif);font-size:16px;letter-spacing:0;color:var(--h-mat);margin-top:6px}
.home #bestellen .fout{font-family:var(--h-sans);border-radius:12px}
.home #bestellen .knop.blok{width:100%;margin-top:18px;min-height:60px;font-size:17px;font-weight:700}
.home #bestellen .knop.blok:disabled{background:var(--h-lijn);color:var(--h-mat);opacity:1;cursor:not-allowed}
/* Onder de knop één regel; de garantie staat als geruststelling bij de prijs, in
   groen, en „Veilig betalen via Stripe" is weg — dat zegt het betaalscherm zelf.
   Tom (26 sep 2026): drie zinnen in drie letters vlak voor de knop was te veel. */
.home #bestellen .garantie.bij-prijs{margin:10px 0 0;font-family:var(--h-sans);font-size:14px;
  line-height:1.5;color:#46603F;text-wrap:pretty}
.home .kaftkeuze-inleiding,.home #bestellen .hint,.home #bestellen .start-uitleg{text-wrap:pretty}

/* ── vragen ───────────────────────────────────────────────────────────── */
.h-vragenrij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
.h-vragenrij>div:first-child{display:flex;flex-direction:column;gap:12px}
.home .qa details{border-color:var(--h-lijn)}
.home .qa summary{font-family:var(--h-serif);font-weight:500;font-size:22px;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--h-inkt);padding:20px 40px 20px 0}
.home .qa summary::after{font-family:var(--h-sans);font-size:26px;color:var(--h-rood);top:18px}
.home .qa summary:hover{color:var(--h-rood)}
.home .qa .antwoord{font-size:18px;line-height:1.6;color:var(--h-mat);max-width:62ch}
.home .qa .antwoord p + p{margin-top:10px}
.home .naar-check{margin-top:24px;text-align:left;font-family:var(--h-sans);font-size:16px;font-weight:600;letter-spacing:0}
.home .naar-check a{color:var(--h-inkt);border-bottom:0;text-decoration:underline;text-underline-offset:4px}
@media(max-width:820px){
  .h-vragenrij{grid-template-columns:1fr;gap:24px}
  .home .qa summary{font-size:19px}
  .home .qa .antwoord{font-size:17px}
}