/* Welke Hond Match - stijlen, alles valt onder .whp zodat je thema ongemoeid blijft */

/* Breakout: secties lopen over de volle breedte, ook binnen een smalle themakolom */
.whp{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body{overflow-x:clip}
.whp .whp-full{width:100vw;position:relative;left:50%;margin-left:-50vw}
.whp a{text-decoration:none}
.whp .prose a,.whp p a{text-decoration:underline}
.whp button{font-family:inherit;letter-spacing:normal;text-transform:none}
.whp h1,.whp h2,.whp h3{color:inherit;text-transform:none}
.whp ul{margin:0}
.whp{--cream:#f7f0e4;--cream-2:#efe5d3;--paper:#fffdf8;
  --forest:#2c4a3b;--forest-2:#365a48;--sage:#5e8c5f;--sage-soft:#e7efe6;
  --clay:#c2643c;--honey:#e9b980;--ink:#1f2b24;--muted:#6a7268;--line:#e3d8c4;--mint:#c9d6cc;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px;}
.whp, .whp *{box-sizing:border-box}
.whp [hidden]{display:none!important}
.whp html{scroll-behavior:smooth}
.whp{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){.whp html{scroll-behavior:auto}
.whp, .whp *{animation:none!important;transition:none!important}}
.whp a{color:inherit}
.whp button{font-family:inherit}
.whp .wrap{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.whp .narrow{max-width:760px}
.whp .band{padding-block:clamp(56px,8vw,104px)}
.whp .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);display:flex;align-items:center;gap:10px}
.whp .eyebrow .dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}
.whp h1,.whp h2,.whp h3{font-family:var(--serif);font-weight:400;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
.whp h1 em,.whp h2 em,.whp h3 em{color:var(--sage)}
.whp h2{font-size:clamp(34px,4.6vw,54px)}
.whp p{margin:0}
.whp .lead{font-size:18px;color:var(--muted);max-width:56ch}
.whp .muted{color:var(--muted)}
.whp :focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:6px}
.whp .sr{position:absolute;left:-9999px}
.whp .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 15px/1 var(--sans);padding:15px 24px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .2s,background .2s;white-space:nowrap}
.whp .btn:hover{transform:translateY(-2px)}
.whp .btn .arr{transition:transform .2s}
.whp .btn:hover .arr{transform:translateX(4px)}
.whp .btn-dark{background:var(--ink);color:var(--paper)}
.whp .btn-green{background:var(--sage);color:var(--paper)}
.whp .btn-forest{background:var(--forest);color:var(--paper)}
.whp .btn-light{background:var(--paper);color:var(--forest)}
.whp .btn-ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px var(--forest)}
.whp .btn-sm{padding:10px 16px;font-size:14px}
.whp .hero{background:linear-gradient(180deg,var(--paper),var(--cream));overflow:hidden}
.whp .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-block:clamp(48px,7vw,88px)}
.whp .hero h1{font-size:clamp(48px,7vw,92px);margin:18px 0 22px}
.whp .hero h1 em{position:relative;white-space:nowrap}
.whp .hero h1 em svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.3em}
.whp .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.whp .stats{display:flex;gap:clamp(20px,4vw,48px);margin-top:48px;flex-wrap:wrap}
.whp .stat b{display:block;font-family:var(--serif);font-size:52px;line-height:1;color:var(--forest);font-weight:400;font-variant-numeric:tabular-nums}
.whp .stat span{font-size:14px;color:var(--muted)}
.whp .hero-art{position:relative;aspect-ratio:1/1.02;max-width:100%}
.whp .arch{position:absolute;inset:4% 8% 0 8%;background:var(--forest);border-radius:999px 999px 28px 28px;overflow:hidden}
.whp .arch::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;background:var(--sage);border-radius:50%;opacity:.55}
.whp .arch .sun{position:absolute;width:30%;aspect-ratio:1;border-radius:50%;background:var(--honey);top:10%;right:12%;opacity:.9}
.whp .arch svg.big{position:absolute;left:50%;bottom:-2%;width:86%;transform:translateX(-50%)}
.whp .chip{position:absolute;background:var(--paper);border-radius:16px;padding:12px 16px;box-shadow:0 18px 40px -18px rgba(31,43,36,.45);font-size:13px;display:flex;gap:12px;align-items:center;animation:whp-float 6s ease-in-out infinite}
.whp .chip b{display:block;font-size:15px}
.whp .chip small{color:var(--muted)}
.whp .chip .pct{font-family:var(--serif);font-size:30px;color:var(--sage);line-height:1}
.whp .chip.c1{left:0;top:22%}
.whp .chip.c2{right:0;bottom:16%;animation-delay:-3s}
.whp .chip .bar{width:84px;height:6px;border-radius:9px;background:var(--cream-2);overflow:hidden;margin-top:6px}
.whp .chip .bar i{display:block;height:100%;width:60%;background:var(--clay);border-radius:9px}
@keyframes whp-float{50%{transform:translateY(-8px)}}
@media (max-width:860px){.whp .hero .wrap{grid-template-columns:1fr}
.whp .hero-art{max-width:440px;width:100%;margin:0 auto}}
.whp .phead{background:linear-gradient(180deg,var(--paper),var(--cream));padding-block:clamp(44px,6vw,76px) clamp(28px,4vw,44px)}
.whp .phead h1{font-size:clamp(44px,6vw,76px);margin:14px 0 16px}
.whp .crumbs{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.whp .crumbs a{text-decoration:none}
.whp .crumbs a:hover{color:var(--ink)}
.whp .quiz-band{background:var(--forest);color:var(--paper);position:relative;overflow:hidden}
.whp .paws{position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:radial-gradient(circle at 20px 20px,var(--paper) 5px,transparent 6px),radial-gradient(circle at 32px 12px,var(--paper) 3px,transparent 4px),radial-gradient(circle at 8px 12px,var(--paper) 3px,transparent 4px);background-size:120px 120px}
.whp .quiz-band .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;position:relative}
.whp .quiz-band .eyebrow{color:var(--honey)}
.whp .quiz-band h1,.whp .quiz-band h2{margin:18px 0 22px}
.whp .quiz-band h1{font-size:clamp(44px,6vw,72px)}
.whp .quiz-band h1 em,.whp .quiz-band h2 em{color:var(--honey)}
.whp .quiz-band .lead{color:var(--mint)}
.whp .how{display:grid;gap:14px;margin-top:32px;padding:0;list-style:none}
.whp .how li{display:flex;gap:14px;align-items:flex-start;color:#dfe8e1}
.whp .how li span{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--honey);color:var(--honey);display:grid;place-items:center;font-size:13px;font-weight:700}
.whp .qcard{background:var(--paper);color:var(--ink);border-radius:24px;padding:clamp(22px,3.4vw,36px);box-shadow:0 40px 80px -40px rgba(0,0,0,.55);min-width:0}
.whp .qtop{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:var(--muted);gap:12px}
.whp .qtop .eyebrow{font-size:11px}
.whp .progress{height:6px;background:var(--cream-2);border-radius:9px;margin:14px 0 26px;overflow:hidden}
.whp .progress i{display:block;height:100%;background:var(--sage);border-radius:9px;transition:width .4s ease}
.whp .qcard h3{font-size:clamp(28px,3.2vw,38px);margin-bottom:8px}
.whp .qhint{color:var(--muted);font-size:15px;margin-bottom:22px}
.whp .opts{display:grid;gap:10px}
.whp .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--cream);border:1.5px solid transparent;border-radius:14px;padding:16px 18px;font:500 16px/1.35 var(--sans);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.whp .opt:hover{border-color:var(--sage);background:var(--paper);transform:translateX(3px)}
.whp .opt.sel{border-color:var(--forest);background:var(--sage-soft)}
.whp .opt .ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--paper);display:grid;place-items:center;color:var(--forest)}
.whp .opt small{display:block;color:var(--muted);font-size:13px;font-weight:400}
.whp .qnav{display:flex;justify-content:space-between;margin-top:22px;align-items:center}
.whp .linkbtn{background:none;border:0;font:600 14px var(--sans);color:var(--muted);cursor:pointer;padding:8px 0;text-decoration:none}
.whp .linkbtn:hover{color:var(--ink)}
.whp .linkbtn:disabled{opacity:.35;cursor:default}
.whp .res-list{display:grid;gap:12px;margin:22px 0}
.whp .res{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;background:var(--cream);border-radius:16px;padding:14px 16px;text-decoration:none;transition:transform .15s}
.whp .res:hover{transform:translateX(3px)}
.whp .res:first-child{background:var(--sage-soft);box-shadow:inset 0 0 0 1.5px var(--sage)}
.whp .av{width:72px;height:72px;border-radius:50%;background:var(--cream-2);overflow:hidden;flex:none}
.whp .av svg{width:100%;height:100%}
.whp .res b{font-size:17px;display:block}
.whp .res .why{font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}
.whp .res .m{font-family:var(--serif);font-size:36px;color:var(--forest);line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.whp .res .m small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.whp .rank{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.whp .note{font-size:13px;color:var(--muted);background:var(--cream);border-radius:12px;padding:12px 14px;margin-bottom:18px}
@media (max-width:860px){.whp .quiz-band .wrap{grid-template-columns:1fr;gap:36px}}
@media (max-width:460px){.whp .res{grid-template-columns:52px 1fr auto;gap:12px}
.whp .res .av{width:52px;height:52px}
.whp .res .m{font-size:28px}}
.whp .shead{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:44px}
.whp .shead h2{margin-top:14px}
.whp .shead p{color:var(--muted);max-width:46ch;justify-self:end}
@media (max-width:760px){.whp .shead{grid-template-columns:1fr}
.whp .shead p{justify-self:start}}
.whp .white{background:var(--paper)}
.whp .breeds{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.whp .breed{background:var(--cream);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;position:relative}
.whp .white .breed,.whp .on-cream .breed{background:var(--cream)}
.whp .on-paper .breed{background:var(--paper)}
.whp .breed:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(31,43,36,.5)}
.whp .breed .pic{aspect-ratio:1/.86;display:grid;place-items:end center;position:relative;overflow:hidden}
.whp .breed .pic svg{width:78%;transition:transform .35s}
.whp .breed:hover .pic svg{transform:scale(1.05) rotate(-2deg)}
.whp .breed .pic .tag{position:absolute;top:14px;left:14px;background:var(--paper);font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px}
.whp .breed .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.whp .breed h3{font-size:28px}
.whp .traits{display:flex;flex-wrap:wrap;gap:6px}
.whp .traits span{font-size:12px;font-weight:600;color:var(--clay);background:var(--paper);padding:4px 10px;border-radius:999px}
.whp .on-paper .traits span{background:var(--cream)}
.whp .meter{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-top:auto;padding-top:6px}
.whp .dots{display:flex;gap:4px}
.whp .dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.whp .dots i.on{background:var(--sage)}
.whp .sec-cta{margin-top:40px}
@media (max-width:980px){.whp .breeds{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.whp .breeds{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.whp .breeds{grid-template-columns:1fr}}
.whp .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.whp .tile{background:var(--paper);border-radius:var(--r);padding:24px;text-decoration:none;display:grid;grid-template-columns:52px 1fr;gap:6px 18px;align-items:center;border:1.5px solid transparent;transition:border-color .2s,transform .2s;cursor:pointer;text-align:left;font:inherit;color:inherit}
.whp .tile:hover{border-color:var(--sage);transform:translateY(-3px)}
.whp .tile .ic{grid-row:span 2;width:52px;height:52px;border-radius:14px;background:var(--cream-2);display:grid;place-items:center;color:var(--forest)}
.whp .tile h3{font-size:24px}
.whp .tile .go{font-size:13px;font-weight:600;color:var(--sage);display:flex;gap:6px;align-items:center}
.whp .tile .go em{font-style:normal;color:var(--muted);font-weight:500}
@media (max-width:900px){.whp .tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.whp .tiles{grid-template-columns:1fr}}
.whp .dutch{display:grid;grid-template-columns:repeat(3,1fr) 1.15fr;gap:20px}
.whp .longread{background:var(--forest);color:var(--paper);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;text-decoration:none}
.whp .longread .eyebrow{color:var(--honey)}
.whp .longread h3{font-size:32px}
.whp .longread p{color:var(--mint);font-size:15px}
.whp .longread .btn{align-self:flex-start;margin-top:auto}
.whp .longread .flag{position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:linear-gradient(#b9413a 0 33%,var(--paper) 33% 66%,#2f4f8a 66%);opacity:.18}
@media (max-width:1000px){.whp .dutch{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.whp .dutch{grid-template-columns:1fr}}
.whp .shop{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.whp .cat{background:var(--cream);border-radius:var(--r);padding:26px 22px;text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:transform .2s,background .2s;border:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.whp .cat:hover{transform:translateY(-4px);background:var(--cream-2)}
.whp .cat .ic{width:56px;height:56px;border-radius:50%;background:var(--paper);display:grid;place-items:center;color:var(--clay)}
.whp .cat b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1}
.whp .cat small{color:var(--muted);font-size:13px}
.whp .banner{margin-top:20px;background:var(--forest);color:var(--paper);border-radius:var(--r);padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.whp .banner p{font-family:var(--serif);font-size:26px;line-height:1.15}
.whp .banner p em{color:var(--honey)}
@media (max-width:980px){.whp .shop{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.whp .shop{grid-template-columns:repeat(2,1fr)}}
.whp .story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.whp .story-art{position:relative;aspect-ratio:1/.9;background:var(--cream-2);border-radius:28px;overflow:hidden;max-width:100%}
.whp .story-art svg{position:absolute;inset:0;width:100%;height:100%}
.whp .story-art .fact{position:absolute;left:20px;bottom:20px;background:var(--paper);border-radius:16px;padding:16px 18px;max-width:240px;box-shadow:0 18px 40px -20px rgba(31,43,36,.4)}
.whp .story-art .fact b{font-family:var(--serif);font-size:44px;font-weight:400;color:var(--clay);line-height:1;display:block}
.whp .story-art .fact span{font-size:13px;color:var(--muted)}
.whp .story h2{margin:14px 0 22px}
.whp .story .txt p{color:var(--muted);max-width:52ch}
.whp .story .txt p+p{margin-top:16px}
.whp .pills{display:flex;gap:10px;margin:28px 0;flex-wrap:wrap}
.whp .pills span{font-size:13px;font-weight:600;background:var(--paper);border:1px solid var(--line);padding:7px 14px;border-radius:999px}
@media (max-width:860px){.whp .story .wrap{grid-template-columns:1fr;gap:40px}}
.whp .toolbar{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin-bottom:18px}
.whp .search{display:flex;align-items:center;gap:10px;background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:0 18px;min-width:0}
.whp .search:focus-within{border-color:var(--sage)}
.whp .search input{border:0;background:transparent;font:16px var(--sans);padding:14px 0;flex:1;min-width:0;outline:none;color:var(--ink)}
.whp select{font:600 14px var(--sans);padding:13px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.whp .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.whp .fchip{font:600 13px var(--sans);padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;transition:all .15s}
.whp .fchip:hover{border-color:var(--sage)}
.whp .fchip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.whp .count{font-size:14px;color:var(--muted);margin-bottom:18px}
.whp .empty{background:var(--paper);border-radius:var(--r);padding:40px;text-align:center;color:var(--muted)}
@media (max-width:560px){.whp .toolbar{grid-template-columns:1fr}}
.whp .detail-top{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.whp .detail-pic{border-radius:28px;aspect-ratio:1/.92;display:grid;place-items:end center;overflow:hidden;position:relative;max-width:100%}
.whp .detail-pic svg{width:76%}
.whp .detail-pic .fav{top:16px;right:16px;width:46px;height:46px}
.whp .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.whp .facts div{background:var(--paper);border-radius:14px;padding:14px 16px}
.whp .facts small{display:block;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em}
.whp .facts b{font-size:17px;font-variant-numeric:tabular-nums}
.whp .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px}
.whp .panel{background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,32px);min-width:0}
.whp .panel h2{font-size:clamp(28px,3vw,36px);margin-bottom:18px}
.whp .bars{display:grid;gap:14px}
.whp .barrow{display:grid;grid-template-columns:150px 1fr 34px;gap:14px;align-items:center;font-size:14px}
.whp .barrow .track{height:10px;background:var(--cream-2);border-radius:9px;overflow:hidden}
.whp .barrow .track i{display:block;height:100%;background:var(--sage);border-radius:9px}
.whp .barrow span:last-child{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.whp .week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.whp .day{background:var(--cream);border-radius:12px;padding:12px 10px;font-size:12px;line-height:1.4;min-width:0}
.whp .day b{display:block;font-size:13px;margin-bottom:6px}
.whp .day div{padding:4px 0;border-top:1px dashed var(--line)}
.whp .day div:first-of-type{border-top:0}
.whp .costs{width:100%;border-collapse:collapse;font-size:15px}
.whp .costs td{padding:11px 0;border-bottom:1px solid var(--line)}
.whp .costs td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.whp .costs tr.tot td{border-bottom:0;font-size:18px;padding-top:16px}
.whp .costs tr.tot td:last-child{font-family:var(--serif);font-size:34px;font-weight:400;color:var(--forest)}
.whp .prose{font-size:17px;color:#3c463f}
.whp .prose p+p{margin-top:14px}
.whp .prose h3{font-size:30px;margin:30px 0 12px;color:var(--ink)}
.whp .prose ul{padding-left:20px;margin:12px 0}
.whp .prose li{margin:6px 0}
.whp .goodbad{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.whp .goodbad div{border-radius:14px;padding:16px 18px;font-size:14px}
.whp .goodbad .g{background:var(--sage-soft)}
.whp .goodbad .b{background:#f6e3d8}
.whp .goodbad b{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.whp .goodbad ul{margin:0;padding-left:18px}
@media (max-width:900px){.whp .detail-top,.whp .dgrid{grid-template-columns:1fr}
.whp .week{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.whp .facts{grid-template-columns:repeat(2,1fr)}
.whp .week{grid-template-columns:repeat(2,1fr)}
.whp .barrow{grid-template-columns:110px 1fr 30px}
.whp .goodbad{grid-template-columns:1fr}}
.whp .add{width:42px;height:42px;border-radius:50%;border:0;background:var(--forest);color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:transform .15s,background .15s}
.whp .x{background:var(--cream);border:0;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;color:var(--ink)}
.whp .ok{background:var(--sage-soft);border-radius:14px;padding:18px 20px;font-size:15px}
.whp .view{animation:whp-fade .35s ease}
@keyframes whp-fade{from{opacity:.4;transform:translateY(6px)}}
/* Foto's */
.whp .breed .pic img,.whp .detail-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.whp .breed:hover .pic img{transform:scale(1.05)}
.whp .av img{width:100%;height:100%;object-fit:cover;display:block}
.whp .breed .pic .tag{z-index:1}
/* Quiz per ras */
.whp .rq-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;max-width:440px}
.whp .rq-specs div{background:rgba(255,253,248,.08);border:1px solid rgba(255,253,248,.15);border-radius:14px;padding:12px 14px}
.whp .rq-specs small{display:block;font-size:12px;color:var(--mint)}
.whp .rq-specs b{font-size:16px;color:var(--paper)}
.whp .rq-score{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.whp .rq-ring{--p:70;flex:none;width:96px;height:96px;border-radius:50%;background:conic-gradient(var(--sage) calc(var(--p)*1%),var(--cream-2) 0);display:grid;place-items:center}
.whp .rq-ring b{width:76px;height:76px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-family:var(--serif);font-size:30px;font-weight:400;color:var(--forest)}
.whp .rq-score h3{margin:4px 0 0}
.whp .rq-lines{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.whp .rq-lines li{font-size:14px;line-height:1.45;padding:10px 12px 10px 36px;border-radius:12px;position:relative;background:var(--cream)}
.whp .rq-lines li::before{position:absolute;left:12px;top:9px;font-weight:800}
.whp .rq-lines li.g{background:var(--sage-soft)}
.whp .rq-lines li.g::before{content:"✓";color:var(--sage)}
.whp .rq-lines li.m::before{content:"~";color:#b88a2c}
.whp .rq-lines li.b{background:#f6e3d8}
.whp .rq-lines li.b::before{content:"!";color:var(--clay)}
/* Vergelijker */
.whp .pop{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:24px}
.whp .pop>span{font-size:13px;font-weight:600;color:var(--muted);margin-right:4px}
.whp .cmp-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px 8px}
.whp .cmp-grid{display:grid;grid-template-columns:minmax(150px,1fr) repeat(var(--cols),minmax(180px,1.2fr));background:var(--paper);border-radius:var(--r);min-width:calc(150px + var(--cols)*180px)}
.whp .cmp-grid>div{padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px;min-width:0}
.whp .cmp-corner{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;position:sticky;left:0;background:var(--paper);z-index:1}
.whp .cmp-corner small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--clay)}
.whp .wins{display:flex;justify-content:space-between;gap:8px;font-size:13px}
.whp .wins b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--forest);line-height:1}
.whp .cmp-head{display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-block:18px!important}
.whp .cmp-pic{aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative;display:grid;place-items:end center}
.whp .cmp-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.whp .cmp-pic svg{width:70%}
.whp .cmp-empty{background:var(--cream);place-items:center;color:var(--muted);border:2px dashed var(--line)}
.whp .cmp-head select{width:100%;font-family:var(--serif);font-size:20px;font-weight:400;padding:10px 14px;border-radius:12px}
.whp .cmp-head .linkbtn{font-size:13px;padding:0;text-align:left}
.whp .cmp-g{background:var(--cream-2);display:flex;gap:12px;align-items:baseline;padding-block:10px!important}
.whp .cmp-g b{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.whp .cmp-g small{font-size:12px;color:var(--muted)}
.whp .cmp-l{font-weight:600;position:sticky;left:0;background:var(--paper);z-index:1}
.whp .cmp-l small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.whp .cmp-c{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.whp .cmp-c.win{background:var(--sage-soft);font-weight:700}
.whp .cmp-na{color:var(--line)}
.whp .cbar{flex:1;height:8px;border-radius:9px;background:var(--cream-2);overflow:hidden;max-width:140px}
.whp .cbar i{display:block;height:100%;background:var(--sage);border-radius:9px}
.whp .cnum{font-size:13px;color:var(--muted);min-width:28px}
.whp .wtag{color:var(--sage);font-weight:800}
.whp .verdicts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.whp .verdict{background:var(--paper);border-radius:var(--r);padding:18px 20px;display:flex;gap:14px;align-items:center}
.whp .verdict .ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--cream-2);display:grid;place-items:center;color:var(--forest)}
.whp .verdict small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.whp .verdict b{font-family:var(--serif);font-size:22px;font-weight:400;line-height:1.1}
@media (max-width:860px){.whp .verdicts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.whp .verdicts{grid-template-columns:1fr}.whp .cmp-grid{grid-template-columns:120px repeat(var(--cols),minmax(150px,1fr));min-width:calc(120px + var(--cols)*150px)}.whp .cmp-grid>div{padding:10px 12px;font-size:14px}}
.whp .sr{position:absolute;left:-9999px}
/* Hero-foto (16:9 met witte onderrand) passend in de boog */
.whp .arch img.hero-photo{position:absolute;top:0;left:0;height:134%;width:auto;max-width:none;transform:translateX(-60.5%)}
.whp .arch:has(img.hero-photo)::before{display:none}
/* ===== Raspagina: verhaal ===== */
.whp .story-card{background:var(--paper);border-radius:24px;padding:clamp(22px,4vw,48px);max-width:900px;margin:0 auto}
.whp .story-card h2{margin:8px 0 16px}
.whp .story-card h3{font-size:clamp(24px,2.6vw,30px);margin:34px 0 14px}
.whp .concept-tag{display:inline-block;background:#f6e3d8;color:var(--clay);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.whp .s-lead{font-size:18px;color:#3c463f;max-width:64ch}
.whp .story-card .note{margin-top:14px}
.whp .s-blocks{display:grid;gap:16px}
.whp .s-block{border-left:3px solid var(--sage);padding:2px 0 2px 18px}
.whp .s-block b{display:block;font-size:17px;margin-bottom:4px}
.whp .s-block p,.whp .s-why p{color:#3c463f}
.whp .s-why{font-size:17px;max-width:64ch}
.whp .s-why p+p{margin-top:12px}
.whp .s-surprise{background:var(--cream);border-radius:16px;padding:18px 20px}
.whp .s-surprise ul,.whp .s-fit ul{margin:0;padding-left:18px}
.whp .s-surprise li,.whp .s-fit li{margin:5px 0}
.whp .s-fit{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.whp .s-fit>div{border-radius:16px;padding:18px 20px}
.whp .s-fit .yes{background:var(--sage-soft)}
.whp .s-fit .no{background:#f6e3d8}
.whp .s-fit b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.whp .s-steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:10px}
.whp .s-steps li{counter-increment:st;background:var(--cream);border-radius:14px;padding:14px 16px 14px 56px;position:relative}
.whp .s-steps li::before{content:counter(st);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--forest);color:var(--paper);font-weight:700;font-size:13px;display:grid;place-items:center}
.whp .s-steps b{display:block;margin-bottom:2px}
.whp .s-steps span{color:#3c463f;font-size:15px}
.whp .s-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.whp .s-box{background:var(--cream);border-radius:16px;padding:18px 20px}
.whp .s-box b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:6px}
.whp .s-box p{font-size:15px;color:#3c463f}
.whp .s-src{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.whp .s-src ul{margin:6px 0 0;padding-left:18px}
.whp .s-src a{color:var(--muted);text-decoration:underline}
@media (max-width:640px){.whp .s-fit,.whp .s-two{grid-template-columns:1fr}}
/* ===== Raspagina: overzicht ===== */
.whp .ov-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:start}
.whp .ov-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.whp .ov-specs div{background:var(--cream);border-radius:14px;padding:12px 16px;min-width:0}
.whp .ov-specs small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.whp .ov-specs b{font-size:16px;font-variant-numeric:tabular-nums}
.whp .ov-scores{background:var(--cream);border-radius:18px;padding:20px 22px;display:grid;gap:12px}
.whp .ov-h{font-size:clamp(24px,2.6vw,30px);margin:36px 0 14px}
.whp .ov-fit{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.whp .ov-fit div{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--cream);border-radius:12px;padding:12px 14px;font-size:15px}
.whp .yn{flex:none;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.whp .yn.y{background:var(--sage-soft);color:var(--forest)}
.whp .yn.m{background:#f5ead2;color:#8a6a1f}
.whp .yn.n{background:#f6e3d8;color:var(--clay)}
@media (max-width:860px){.whp .ov-grid{grid-template-columns:1fr}}
/* ===== Raspagina: schema's ===== */
.whp .sch .panel{background:var(--paper);border-radius:var(--r);padding:clamp(20px,3vw,30px);min-width:0}
.whp .sch .panel h3{font-size:clamp(24px,2.6vw,30px);margin-bottom:4px}
.whp .sch .sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.whp .sch-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.whp .week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.whp .day{background:var(--cream);border-radius:12px;padding:12px 10px;font-size:12px;line-height:1.35;min-width:0}
.whp .day>b{display:block;font-size:14px;margin-bottom:6px}
.whp .day div{display:flex;justify-content:space-between;gap:4px;padding:5px 0;border-top:1px dashed var(--line)}
.whp .day div:first-of-type{border-top:0}
.whp .day em{font-style:normal;color:var(--muted);white-space:nowrap}
.whp .cost-bars{display:grid;gap:10px}
.whp .cb{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr 56px;gap:12px;align-items:center;font-size:14px}
.whp .cb .track{height:10px;background:var(--cream-2);border-radius:9px;overflow:hidden}
.whp .cb .track i{display:block;height:100%;background:var(--clay);border-radius:9px;opacity:.85}
.whp .cb b{text-align:right;font-variant-numeric:tabular-nums}
.whp .cost-tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin:14px 0 8px;padding-top:12px}
.whp .cost-tot b{font-family:var(--serif);font-weight:400;font-size:32px;color:var(--forest)}
.whp .costs{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.whp .costs td{padding:9px 0;border-bottom:1px solid var(--line)}
.whp .costs td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.whp .costs tr.tot td{border-bottom:0;font-size:16px}
.whp .timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line);display:grid;gap:16px}
.whp .timeline li{position:relative}
.whp .timeline li::before{content:"";position:absolute;left:-25px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 3px var(--paper)}
.whp .timeline .tw{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.whp .timeline b{display:block;font-size:16px}
.whp .timeline p{font-size:14px;color:#3c463f}
@media (max-width:900px){.whp .sch-two{grid-template-columns:1fr}.whp .week{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.whp .week{grid-template-columns:repeat(2,1fr)}.whp .ov-specs{grid-template-columns:1fr 1fr}}
/* ===== 2.2: groene overzichtsband ===== */
.whp .gov{background:var(--forest);color:var(--paper);padding-block:clamp(48px,7vw,88px);position:relative;overflow:hidden}
.whp .gov::before{content:"";position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:radial-gradient(circle at 20px 20px,#fff 5px,transparent 6px),radial-gradient(circle at 32px 12px,#fff 3px,transparent 4px),radial-gradient(circle at 8px 12px,#fff 3px,transparent 4px);background-size:120px 120px}
.whp .gov .wrap{position:relative}
.whp .gov .eyebrow{color:var(--honey)}
.whp .gov h2{font-size:clamp(40px,5.5vw,64px);margin:12px 0 10px;color:var(--paper)}
.whp .gov h2 em{color:var(--honey)}
.whp .gsub{color:var(--mint);max-width:60ch;margin:0 0 34px}
.whp .gov-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:20px}
.whp .gspecs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start}
.whp .gspec{background:rgba(255,253,248,.07);border:1px solid rgba(255,253,248,.14);border-radius:16px;padding:14px 18px;display:flex;gap:14px;align-items:center;min-width:0}
.whp .gspec svg{flex:none;color:var(--honey)}
.whp .gspec small{display:block;font-size:12px;color:var(--mint);font-weight:600;letter-spacing:.03em}
.whp .gspec b{font-size:17px;font-variant-numeric:tabular-nums;color:var(--paper)}
.whp .gscores{background:var(--paper);color:var(--ink);border-radius:20px;padding:22px 24px;display:grid;gap:13px;align-content:start}
.whp .gscores h3{font-size:24px;margin:0 0 4px;color:var(--ink)}
.whp .gbar{display:grid;grid-template-columns:140px 1fr 36px;gap:12px;align-items:center;font-size:15px}
.whp .dots5{display:flex;gap:5px}
.whp .dots5 i{flex:1;height:10px;border-radius:5px;background:var(--cream-2)}
.whp .dots5 i.on{background:var(--sage)}
.whp .gbar span:last-child{text-align:right;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.whp .gfit-h{font-size:28px;margin:40px 0 14px;color:var(--paper)}
.whp .gfit{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.whp .gfit div{background:rgba(255,253,248,.07);border:1px solid rgba(255,253,248,.14);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.whp .gfit span{font-size:15px;color:var(--paper)}
.whp .gyn{align-self:flex-start;font-style:normal;font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px}
.whp .gyn.y{background:#cfe3cf;color:#1f4a2a}
.whp .gyn.m{background:#f3dfb6;color:#6e4f0f}
.whp .gyn.n{background:#f2cdbd;color:#8a3517}
.whp .gverdict{margin-top:28px;background:var(--honey);color:var(--ink);border-radius:20px;padding:22px 26px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.whp .gverdict b{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;display:block}
.whp .gverdict p{font-size:16px;margin:0}
.whp .gverdict .big{font-family:var(--serif);font-size:56px;line-height:1;color:var(--forest)}
@media (max-width:900px){.whp .gov-grid{grid-template-columns:1fr}.whp .gfit{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.whp .gspecs{grid-template-columns:1fr}.whp .gfit{grid-template-columns:1fr}.whp .gbar{grid-template-columns:110px 1fr 32px}.whp .gverdict{grid-template-columns:1fr}}
/* ===== 2.2: lang artikel ===== */
.whp .art-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:48px;align-items:start}
.whp .toc{position:sticky;top:110px;background:var(--paper);border-radius:18px;padding:20px 22px;max-height:calc(100vh - 140px);overflow:auto}
.whp .toc>b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.whp .toc ol{margin:0;padding-left:20px;font-size:14px;line-height:1.5}
.whp .toc li{margin:7px 0;color:var(--muted)}
.whp .toc a{color:var(--ink);text-decoration:none}
.whp .toc a:hover{color:var(--sage);text-decoration:underline}
.whp .art-card{background:var(--paper);border-radius:24px;padding:clamp(24px,4.5vw,56px);min-width:0;font-size:17px;line-height:1.7}
.whp .art-h1{font-size:clamp(38px,5vw,56px);margin:10px 0 18px}
.whp .art-card .lead{font-size:20px;line-height:1.6;color:#3c463f;max-width:64ch}
.whp .art-card section{padding-top:40px;scroll-margin-top:110px}
.whp .art-h2{font-size:clamp(30px,3.4vw,40px);margin:0 0 16px;display:flex;gap:14px;align-items:baseline}
.whp .art-h2 .n{font-family:var(--sans);font-size:13px;font-weight:800;color:var(--clay);letter-spacing:.06em}
.whp .art-card p{max-width:68ch;color:#333d36;margin:0}
.whp .art-card p+p{margin-top:14px}
.whp .art-card h4{font-family:var(--serif);font-weight:400;font-size:24px;margin:24px 0 8px}
.whp .callout{background:var(--sage-soft);border-radius:16px;padding:18px 22px;margin:20px 0;max-width:68ch}
.whp .callout b{display:block;margin-bottom:4px}
.whp .aquote{border-left:4px solid var(--honey);padding:4px 0 4px 20px;margin:22px 0;font-family:var(--serif);font-size:24px;line-height:1.3;color:var(--forest);max-width:60ch}
.whp .aquote small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px}
.whp .alist{margin:12px 0;padding-left:20px;max-width:66ch}
.whp .alist li{margin:8px 0}
.whp .tw{overflow-x:auto}
.whp .health{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0}
.whp .health th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}
.whp .health td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.whp .health td:first-child{font-weight:700;width:28%}
.whp .art-card .s-fit,.whp .art-card .s-steps{margin-top:12px}
@media (max-width:900px){.whp .art-grid{grid-template-columns:1fr;gap:20px}.whp .toc{position:static;max-height:none}}
/* 2.3: tekst voor Google voordat JavaScript laadt, en bijwerkdatum */
.whp .whp-ssr{max-width:1160px;margin:0 auto;padding:40px 16px}
.whp .whp-ssr h2{font-size:32px;margin:0 0 16px}
.whp .whp-ssr dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin:0}
.whp .whp-ssr dl div{background:var(--cream);border-radius:12px;padding:10px 14px}
.whp .whp-ssr dt{font-size:12px;color:var(--muted)}
.whp .whp-ssr dd{margin:0;font-weight:700}
.whp .art-date{font-size:13px;color:var(--muted);margin:-6px 0 16px}