/* xnovo 3.0 · alleen de homepage (na basis.css en secties.css)
   De opening met het blok en de lijnlaptop (.h), en de speeltuin (.sp).
   Uitgesplitst uit studio2.css + studio3.css (6 okt 2026); volgorde van de regels is bewaard. */

/* ---------------------------------------------------------------- opening */
.h{background:var(--inkt);color:var(--papier)}
.h-pin{position:relative;height:100svh;overflow:hidden}
.h-tekst{position:absolute;z-index:3;left:var(--rand);right:var(--rand);bottom:clamp(28px,4vw,56px);display:flex;flex-direction:column;gap:22px}
.h-boven{margin:0;font:500 14px/1 var(--sans);letter-spacing:.01em;opacity:.85}
.h-tekst h1{font-size:var(--groot);max-width:11.5em}
.h-onder{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.h-acties{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.h-bewijs{margin:0;font-size:15px;color:rgba(244,244,241,.8)}
.h-bewijs b{font-weight:600;color:var(--papier)}
@media (max-width:900px){
  .h-tekst h1{font-size:clamp(42px,11.5vw,60px)}
  .h-acties{width:100%}
}
.h-acties .knop3{height:58px}

/* ---------------------------------------------------------------- speeltuin (Warm & Fuzzy) */
.sp{position:relative;overflow:clip}
.sp{--sp-bg:#C7E34B;--sp-fg:#121110;background:var(--sp-bg);color:var(--sp-fg);height:150svh}
.sp-vast{position:sticky;top:0;height:100svh;overflow:hidden}
.sp-band{position:absolute;left:0;right:0;top:50%;translate:0 -50%;overflow:hidden;pointer-events:none}
.sp-rij{display:flex;gap:.35em;white-space:nowrap;font:500 clamp(110px,17vw,290px)/.9 var(--sans);letter-spacing:-.06em;will-change:transform}
.sp-rij span{flex:none}
.sp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;cursor:pointer}
.sp-kader{position:absolute;z-index:3;border:1.5px solid #2F6BFF;pointer-events:none}
.sp-kader i{position:absolute;width:10px;height:10px;background:#fff;border:1.5px solid #2F6BFF}
.sp-kader i:nth-child(1){left:-6px;top:-6px}.sp-kader i:nth-child(2){right:-6px;top:-6px}.sp-kader i:nth-child(3){left:-6px;bottom:-6px}.sp-kader i:nth-child(4){right:-6px;bottom:-6px}
.sp-kader span{position:absolute;left:-1.5px;top:-28px;background:#2F6BFF;color:#fff;font:600 12px/1 var(--sans);padding:6px 8px;border-radius:3px 3px 0 0;white-space:nowrap}
.sp-hint{position:absolute;z-index:3;left:var(--rand);bottom:90px;margin:0;font-size:14px}
.sp-uitleg{position:absolute;z-index:3;right:var(--rand);bottom:90px;margin:0;max-width:22em;font-size:17px;text-align:right}
@media (max-width:900px){
  .sp-rij{font-size:clamp(84px,26vw,140px)}
  .sp-uitleg{left:var(--rand);right:var(--rand);text-align:left;top:112px;bottom:auto;font-size:16px;max-width:none}
}
.sp-hint{font-size:16px;font-weight:500}
/* hero-bewijs: het getal draagt, de uitleg staat ernaast */
.h-bewijs{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.3}
.h-bewijs b{font:430 clamp(44px,4.2vw,64px)/.8 var(--sans);letter-spacing:-.05em}
@media (max-width:900px){.h-bewijs b{font-size:40px}}
.sp-hint{top:auto;bottom:auto;background:var(--sp-fg);color:var(--sp-bg)!important;color:var(--papier);padding:10px 16px;border-radius:999px;font-size:15px}
@media (max-width:900px){.sp-uitleg{top:150px}}
.sp{height:calc(150svh + var(--blok-h))}
/* speeltuin: het idee als kop, het kader in onze kleuren */
.sp-uitleg{top:96px;bottom:auto;left:var(--rand);right:auto;text-align:left;max-width:15em;font:430 clamp(30px,2.8vw,46px)/1.02 var(--sans);letter-spacing:-.04em}
.sp-uitleg small{display:block;margin-top:12px;font:400 17px/1.45 var(--sans);letter-spacing:0;max-width:22em}
.sp-kader{border-color:var(--sp-fg)}
.sp-kader i{background:var(--sp-bg);border-color:var(--sp-fg)}
.sp-kader span{background:var(--sp-fg);color:var(--sp-bg)}
.sp-hint{position:absolute;white-space:nowrap;opacity:0;transition:opacity .4s var(--ease-uit)}
@media (max-width:900px){
  .sp-uitleg{top:88px;font-size:26px;max-width:none;right:var(--rand)}
  .sp-uitleg small{font-size:15px}
}
/* speeltuin: aanwijzing als pil onder de uitleg, de reuzetekst iets terug */
.sp-uitleg .sp-hint{position:static;display:inline-block;margin-top:16px;opacity:1;font:500 15px/1 var(--sans);letter-spacing:0}
.sp-rij{opacity:.85}

/* ---------------------------------------------------------------- opening: één kop, één blok, rust */
.h{background:var(--papier);color:var(--inkt)}
.h-pin{position:relative;height:100svh;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto 1fr;column-gap:var(--kol);align-content:start;padding:clamp(108px,13vh,132px) var(--rand) 0}
.h-tekst{position:relative;z-index:3;grid-column:1 / -1;grid-row:1 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;pointer-events:none}
.h-tekst > *{pointer-events:auto}
.h .h-boven{grid-column:1 / -1;grid-row:1;margin:0;font:500 14px/1 var(--sans);color:var(--steen);opacity:1}
.h h1{grid-column:1 / -1;grid-row:2;margin-top:22px;font-size:clamp(52px,7.7vw,150px);line-height:.92;letter-spacing:-.052em}
.h .h-onder{grid-column:1 / span 5;grid-row:3;align-self:start;margin-top:clamp(36px,5.5vh,56px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:28px}
.h .h-lead{color:var(--grafiet);max-width:26em}
.h .h-acties{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.h .h-bewijs{color:var(--grafiet)}
.h .h-bewijs b{color:var(--inkt)}
.h-blok{position:relative;z-index:4;grid-column:7 / -1;grid-row:3;margin-top:clamp(36px,5.5vh,56px);aspect-ratio:16 / 10.5;pointer-events:none}
.h-blok-label{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;gap:16px;margin:0;font:500 13px/1.2 var(--sans);color:rgba(244,244,241,.66)}
.h-laag{position:absolute;inset:0;z-index:2;background:var(--inkt);clip-path:inset(100% 0 0 0)}
.h-laag canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.h-bron{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
@media (max-width:900px){
  .h-pin{grid-template-columns:minmax(0,1fr);padding-top:92px}
  .h h1{font-size:clamp(44px,12.4vw,64px);margin-top:16px}
  .h .h-onder{grid-column:1;margin-top:22px;gap:22px}
  .h-blok{grid-column:1;grid-row:4;margin-top:28px;aspect-ratio:1}
  .h-blok-label span:last-child{display:none}
}
.h .h-tekst{inset:auto;column-gap:var(--kol);row-gap:0}
/* speeltuin: de reuzetekst mag naar onder uitlopen (staarten van g en j), alleen opzij wordt hij afgesneden */
.sp-band{overflow-x:clip;overflow-y:visible}
.sp-rij{padding-bottom:.18em}

/* ---------------------------------------------------------------- opening (BYQ Stringer Hero 5) */
.h .h-boven{grid-column:1 / span 8}
.h h1{grid-column:1 / span 8;font-size:clamp(48px,6.6vw,128px)}
.h .h-onder{grid-column:9 / -1;grid-row:1 / 3;align-self:end;margin-top:0;gap:24px;padding-bottom:.4em}
.h .h-lead{max-width:24em}
.h-blok{grid-column:1 / span 8;grid-row:3;margin-top:clamp(32px,5vh,52px);aspect-ratio:16 / 10}
@media (max-width:900px){
  .h .h-boven,.h h1{grid-column:1}
  .h h1{font-size:clamp(44px,12.4vw,64px)}
  .h .h-onder{grid-column:1;grid-row:3;align-self:start;margin-top:22px;padding-bottom:0}
  .h-blok{grid-column:1;grid-row:4;margin-top:28px;aspect-ratio:1}
}

/* ---------------------------------------------------------------- opening 6: één leesroute
   kop over de breedte; daaronder op dezelfde linkerlijn uitleg → knop → bewijs; rechts daarnaast het blok */
.h-pin{grid-template-rows:auto auto 1fr}
.h .h-boven{grid-column:1 / -1;grid-row:1}
.h h1{grid-column:1 / span 10;grid-row:2;font-size:clamp(52px,7vw,124px)}
.h .h-onder{grid-column:1 / span 4;grid-row:3;align-self:start;margin-top:clamp(32px,5vh,52px);padding-bottom:0;gap:26px}
.h .h-lead{max-width:22em}
.h .h-acties{gap:22px}
.h-blok{grid-column:6 / -1;grid-row:3;margin-top:clamp(32px,5vh,52px);aspect-ratio:16 / 9.6}
@media (max-width:1100px) and (min-width:901px){.h .h-onder{grid-column:1 / span 5}}
@media (max-width:900px){
  .h-pin{grid-template-rows:auto auto auto 1fr}
  .h .h-boven,.h h1,.h .h-onder{grid-column:1}
  .h h1{font-size:clamp(44px,12.4vw,64px)}
  .h .h-onder{grid-row:3;margin-top:22px;gap:22px}
  .h-blok{grid-column:1;grid-row:4;margin-top:28px;aspect-ratio:1}
}

/* ---------------------------------------------------------------- 8 okt: verkoop (groep A uit audit/home) */
/* opening: onder de knop wat het je kost (niets) en hoe snel je antwoord hebt */
.h-knop{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.h .h-risico{color:var(--grafiet)}
/* werk: naast de knop de weg naar alle projecten */
.w-jij-acties{display:flex;align-items:center;justify-content:center;gap:12px 26px;flex-wrap:wrap}
.w-jij-klein{line-height:1.5}

/* voor wie: drie situaties in de woorden van de klant; per rij nu, wordt en wat wachten kost */
.vw-dienst{display:block;margin-top:4px}
.vw-regels{display:grid;gap:6px;margin-top:18px;font:400 17px/1.45 var(--sans);letter-spacing:0;color:var(--grafiet);max-width:40em}
.vw-regels > span{display:grid;grid-template-columns:7.4em minmax(0,1fr);column-gap:14px}
.vw-regels b{font-weight:500;color:var(--steen)}
.vw-regels .vw-wordt{color:var(--inkt)}
.vw .rij-actie{flex-direction:column;align-items:flex-end;gap:2px}
.vw-begin{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 16px/1 var(--sans);color:inherit;text-decoration:none}
.vw-begin i{font-style:normal;font-size:20px;transition:transform .5s var(--ease-uit)}
.vw-begin:hover i,.vw-begin:focus-visible i{transform:translateX(5px)}
.vw .rij:hover{background-size:100% 2px}
@media (max-width:900px){
  .vw-regels{font-size:16px;gap:8px;margin-top:14px}
  .vw-regels > span{display:block}
  .vw-regels b{margin-right:6px}
  .vw-regels b::after{content:":"}
  .vw .rij-actie{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;width:100%}
}

/* labels boven de motto-koppen: wat deze sectie is */
.s-label{color:var(--inkt);margin-bottom:calc(14px - clamp(40px,7vh,88px))}
.r-label{margin-bottom:20px}
.t-label{margin-bottom:20px;color:rgba(244,244,241,.62)}

/* wat we bouwen: elke dienst ook naar zijn eigen pagina */
.d-acties{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 24px}
.d-tekst .d-acties .lnk{margin-top:0}

/* prijs: risico onder de knop, het eerste jaar opgeteld */
.r-kaart .r-risico{margin-top:4px}
.r-jaar{grid-column:1 / -1;margin:2px 0 6px;max-width:none;font-size:17px;color:var(--grafiet)}

/* wie: de echte foto van Milan en Enric samen, met de trap; namen ernaast (niet per persoon in de foto) */
.t-samen{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--kol);align-items:end;margin-top:clamp(40px,5vw,72px)}
.t-foto{grid-column:1 / span 8;margin:0;aspect-ratio:3 / 2;overflow:hidden;background:#1d1c1a;clip-path:polygon(0 0,100% 0,100% 82%,90% 82%,90% 88%,80% 88%,80% 94%,70% 94%,70% 100%,0 100%)}
.t-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.t-namen{grid-column:9 / -1;display:flex;flex-direction:column;gap:30px}
.t-namen .t-maker:nth-child(2){margin-top:0}
.t-namen .t-maker h3{margin-top:0}
/* wat klanten zeggen, onder de foto en de namen */
.t-citaten{margin:clamp(48px,6vw,88px) 0 0;padding-bottom:clamp(72px,9vw,140px)}
.t-feiten{margin:0;padding-top:16px;border-top:1px solid rgba(244,244,241,.2);font-size:16px;line-height:1.5;color:rgba(244,244,241,.66)}
@media (max-width:900px){
  .t-samen{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .t-foto,.t-namen{grid-column:1}
  .t-foto{aspect-ratio:4 / 3}
}

/* vragen: na de twijfels meteen de stap */
.v-actie{grid-column:7 / span 6;margin-top:clamp(28px,3vw,40px)}
@media (max-width:900px){.v-actie{grid-column:1 / -1}}

/* gesprek: wat er gebeurt na je bericht */
/* opening op een telefoon: knop over de volle breedte, dan de link, de vinkjes en het bewijs (zoals Webdesign) */
@media (max-width:900px){
  .h-knop{gap:10px;align-self:stretch;align-items:stretch}
  .h .h-acties{row-gap:6px}
  .h-acties .knop3{flex:1 1 100%}
}
/* voor wie: de regels lopen over de volle breedte (niet gebalanceerd zoals de grote regel) */
.vw-regels{text-wrap:pretty}
@media (max-width:900px){
  .vw .rij-actie{align-items:flex-end}
  .vw-begin{align-items:flex-end;padding-bottom:2px}
}
/* gesprek op een telefoon: eerst het formulier, daarna wat er gebeurt na je bericht */
@media (max-width:900px){
  .t-namen{gap:24px}
}
.d-acties{row-gap:10px}
/* werk → voor wie: de blokken (inkt naar papier) staan onder de laatste kaart, niet eroverheen */
#werk{padding-bottom:calc(var(--blok-h) + 32px)}
/* wat we bouwen op een telefoon: de twee links naast elkaar, kort */
@media (max-width:900px){
  .d-acties{flex-wrap:nowrap;gap:20px}
  .d-lang{display:none}
}

/* 8 okt: de opening op dezelfde kolommen als de andere pagina's (beeld op kolom 7, uitleg in de maat van .lead) */
.h .h-onder{grid-column:1 / span 5}
.h .h-lead{max-width:24em}
.h-blok{grid-column:7 / -1}
@media (max-width:1100px) and (min-width:901px){.h .h-onder{grid-column:1 / span 6}.h-blok{grid-column:7 / -1}}
@media (max-width:900px){.h .h-onder{grid-column:1}.h-blok{grid-column:1}}
/* tikdoelen van de prijscheck: minstens 44 px */
.pw-demos button{min-height:44px}
.pw-foto-knop{height:auto;min-height:44px}
/* heel lage telefoons (375x548): het bewijs blijft in het eerste scherm */
@media (max-width:900px) and (max-height:620px){
  .h-pin{padding-top:76px}
  .h .h-boven{display:none}
  .h h1{margin-top:0}
  .h .h-onder{margin-top:14px;gap:14px}
  .h .h-lead{font-size:16px;line-height:1.42}
  .h-knop{gap:8px}
  .h-acties .knop3{height:52px}
  .h .h-risico{column-gap:14px}
  .h-bewijs b{font-size:34px}
}

/* telefoon (8 okt): de opening is zo hoog als het scherm met ingeklapte adresbalk, zodat het blok als het groeit echt het hele
   scherm vult (geen lichte strook onderin); de inhoud blijft binnen het kleinste scherm */
@media (max-width:900px){
  .h-pin{height:100vh;height:100lvh;padding-bottom:calc(100lvh - 100svh)}
}

/* opening (8 okt): geen showreel-tekst meer; een scroll-hint linksonder in het blok */
.h-scroll{position:absolute;left:18px;bottom:16px;z-index:5;display:flex;align-items:center;gap:10px;margin:0;font:500 13px/1 var(--sans);letter-spacing:.02em;color:rgba(244,244,241,.72);pointer-events:none}
.h-scroll i{position:relative;display:block;width:1.5px;height:24px;background:rgba(244,244,241,.22);overflow:hidden}
.h-scroll i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--vonk);animation:xn-scroll 1.6s var(--ease-energie) infinite}
@media (prefers-reduced-motion:reduce){.h-scroll i::after{animation:none;top:30%}}

/* ---------------------------------------------------------------- voor wie: herken je dit? Vier uitspraken als praatbubbels rond één kop
   Vaste opbouw: twee bubbels boven, de kop op één regel in het midden, twee eronder; elk staartje wijst naar de kop. */
.vw--bel{overflow:clip}
.vw-veld{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"b1 b2" "kop kop" "b3 b4";align-items:center;row-gap:clamp(28px,3.4vw,52px);column-gap:var(--kol)}
.vw-midden{grid-area:kop;position:relative;z-index:1;text-align:center}
.vw-midden .label{margin-bottom:16px}
.vw-midden h2{font:500 clamp(64px,9.4vw,172px)/.9 var(--sans);letter-spacing:-.06em;white-space:nowrap}
.vw-hint{display:inline-flex;align-items:center;gap:12px;margin:24px auto 0;font:500 18px/1.3 var(--sans);color:var(--inkt)}
.vw-hint::before{content:"";flex:none;width:8px;height:8px;background:var(--vonk)}
.vw-bel{--bel:#fff;--bel-fg:var(--inkt);position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;width:min(460px,100%);padding:26px 28px 22px;border-radius:32px;background:var(--bel);color:var(--bel-fg);text-decoration:none;box-shadow:0 1px 0 rgba(18,17,16,.06),0 26px 52px -28px rgba(18,17,16,.45);transition:background .35s var(--ease-energie),color .35s var(--ease-energie),translate .45s var(--ease-uit),rotate .45s var(--ease-uit)}
.vw-bel::after{content:"";position:absolute;width:34px;height:26px;background:var(--bel);transition:background .35s var(--ease-energie)}
.vw-bel q{font:430 clamp(26px,2.3vw,38px)/1.06 var(--sans);letter-spacing:-.03em;quotes:"“" "”";text-wrap:balance}
.vw-bel-soort{font:500 14px/1 var(--sans);color:var(--steen);transition:color .35s var(--ease-energie)}
.vw-bel-actie{display:inline-flex;align-items:center;gap:8px;font:500 16px/1 var(--sans)}
.vw-bel-actie i{font-style:normal;transition:translate .35s var(--ease-uit)}
.vw-bel:hover,.vw-bel:focus-visible{--bel:var(--inkt);--bel-fg:var(--papier);translate:0 -4px}
.vw-bel:hover .vw-bel-soort,.vw-bel:focus-visible .vw-bel-soort{color:rgba(244,244,241,.6)}
.vw-bel:hover .vw-bel-actie i{translate:4px 0}
.vw-bel:focus-visible{outline:2px solid var(--vonk);outline-offset:4px}
/* plek en staartje: boven links en rechts, onder iets naar binnen; elk staartje wijst naar de kop */
/* elke staart wijst omlaag naar het poppetje eronder: links bij de linker bubbels, rechts bij de rechter (buiten de kop "Herken je dit?") */
.vw-veld{--fw:clamp(200px,17vw,264px);--fh:calc(var(--fw) * .8)}
.vw-bel--1{grid-area:b1;justify-self:start;rotate:-2deg;--oorsprong:12% 100%}
.vw-bel--1::after{left:56px;bottom:-18px;clip-path:polygon(0 0,100% 0,15% 100%)}
.vw-bel--2{grid-area:b2;justify-self:end;margin-top:clamp(40px,6vw,104px);rotate:1.5deg;--oorsprong:88% 100%}
.vw-bel--2::after{right:56px;bottom:-18px;clip-path:polygon(0 0,100% 0,85% 100%)}
.vw-bel--3{grid-area:b3;justify-self:start;margin-left:clamp(32px,7vw,128px);margin-bottom:calc(var(--fh) + 20px);rotate:1deg;--oorsprong:12% 100%}
.vw-bel--3::after{left:56px;bottom:-18px;clip-path:polygon(0 0,100% 0,15% 100%)}
.vw-bel--4{grid-area:b4;justify-self:end;margin-right:clamp(16px,3vw,56px);margin-bottom:calc(var(--fh) + 20px);rotate:-1.5deg;--oorsprong:88% 100%}
.vw-bel--4::after{right:56px;bottom:-18px;clip-path:polygon(0 0,100% 0,85% 100%)}
.vw-bel:hover{rotate:0deg}
/* het poppetje onder de staart; het draait tegen de bubbel in, zodat het recht op zijn sokkel blijft staan */
.vw-fig{position:absolute;top:calc(100% + 12px);width:var(--fw);transition:rotate .45s var(--ease-uit)}
.vw-bel--1 .vw-fig,.vw-bel--3 .vw-fig{left:calc(73px - var(--fw) / 2)}
.vw-bel--2 .vw-fig,.vw-bel--4 .vw-fig{right:calc(73px - var(--fw) / 2)}
.vw-bel--1 .vw-fig{rotate:2deg}.vw-bel--2 .vw-fig{rotate:-1.5deg}.vw-bel--3 .vw-fig{rotate:-1deg}.vw-bel--4 .vw-fig{rotate:1.5deg}
.vw-bel:hover .vw-fig{rotate:0deg}
/* "klik op mij": een klein label aan de eerste bubbel */
.vw-klik{position:absolute;right:-14px;top:-14px;padding:8px 13px;border-radius:999px;background:var(--vonk);color:var(--inkt);font:600 13px/1 var(--sans);letter-spacing:.01em;rotate:6deg;animation:vw-wip 2.4s var(--ease-energie) infinite}
@keyframes vw-wip{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media (prefers-reduced-motion:reduce){.vw-klik{animation:none}}
@media (max-width:900px){
  .vw-veld{display:flex;flex-direction:column;align-items:stretch;gap:22px}
  .vw-midden{text-align:left;margin-bottom:6px}
  .vw-midden h2{font-size:clamp(48px,14vw,64px);white-space:normal}
  .vw-hint{margin:14px 0 0;font-size:17px}
  .vw-bel{width:auto;max-width:90%;margin:0;padding:20px 22px 18px;border-radius:26px}
  .vw-bel q{font-size:23px}
  .vw-bel--1,.vw-bel--3{align-self:flex-start}
  .vw-bel--2,.vw-bel--4{align-self:flex-end}
  .vw-bel--1{rotate:-1.5deg}.vw-bel--2{rotate:1.2deg}.vw-bel--3{rotate:-.8deg}.vw-bel--4{rotate:1deg}
  .vw-bel--1::after,.vw-bel--3::after{left:30px;right:auto;top:auto;bottom:-14px;clip-path:polygon(0 0,100% 0,15% 100%)}
  .vw-bel--2::after,.vw-bel--4::after{right:30px;left:auto;top:auto;bottom:-14px;clip-path:polygon(0 0,100% 0,85% 100%)}
  .vw-klik{right:-6px;top:-12px}
  .vw-veld{--fw:150px}
  .vw-bel{margin-bottom:calc(var(--fh) + 8px)}
  .vw-bel--4{margin-bottom:calc(var(--fh) + 8px)}
  .vw-bel--1 .vw-fig,.vw-bel--3 .vw-fig{left:0;right:auto}
  .vw-bel--2 .vw-fig,.vw-bel--4 .vw-fig{right:0;left:auto}
  .vw-bel--1 .vw-fig{rotate:1.5deg}.vw-bel--2 .vw-fig{rotate:-1.2deg}.vw-bel--3 .vw-fig{rotate:.8deg}.vw-bel--4 .vw-fig{rotate:-1deg}
}

/* opening op een telefoon, kaal (Milan, 6 nov: "veel tekst", "overweldigend en niet duidelijk"): kop in twee regels, één regel uitleg,
   de knop met één klein regeltje eronder. Het werk in de laptop eronder is het bewijs. Weg op de telefoon: de regel boven de kop,
   "Bekijk het werk" (het werk begint er direct onder), de drie vinkjes en het grote 40+; dat laatste staat samengevat in .tel-mini (basis.css). */
@media (max-width:900px){
  .h-pin{padding-top:104px}
  .h .h-boven,.h .h-acties .lnk,.h .h-risico,.h .h-bewijs{display:none}
  .h h1{margin-top:0;font-size:min(calc((100vw - 34px) / 9),60px);line-height:1}
  .h .h-onder{margin-top:16px;gap:28px}
  .h-knop{gap:12px}
  .h-blok{margin-top:32px}
}
@media (max-width:900px) and (max-height:620px){
  .h-pin{padding-top:76px}
  .h .h-onder{margin-top:12px;gap:20px}
  .h-knop{gap:8px}
  .h-blok{margin-top:20px}
}