/*
 * Jas 2: het nieuwe visuele jasje (2 okt 2026).
 *
 * Richting: productadvies voor een onzekere koper, "stil zeker". Koel wit
 * canvas, één diep grasgroen accent, zachte gelaagde diepte, Outfit voor de
 * koppen en de grote getallen, Geist voor de lopende tekst. Vormen zijn
 * zacht en consequent: kaarten 16 px, knoppen 10 px, labels rond.
 *
 * Alles staat onder body.jas-2, zodat een pagina per stuk kan overstappen.
 * De tokens hieronder overschrijven die uit tokens.css; de oude componenten
 * volgen dan vanzelf, en wat echt anders moet staat hier expliciet.
 */

@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/outfit-latin-500.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/outfit-latin-600.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/outfit-latin-700.woff2') format('woff2')}

body.jas-2{
  /* kleur */
  --canvas:#f6f7f5;
  --paper:#ffffff;
  --cream:#f6f7f5;
  --ink:#15171a;
  --black:#15171a;
  --depth:#15171a;
  --rule:#e3e6e2;
  --muted:#5b6168;
  --muted-2:#7c838a;
  --groen:#1f7a3e;
  --groen-diep:#175d30;
  --groen-tint:#e6f3ea;
  --groen-rand:#bfe0cb;
  --lime:var(--groen);
  --lime-diep:var(--groen-diep);
  --mint:var(--groen-rand);
  --mint-wash:var(--groen-tint);
  /* letter */
  --outfit:"Outfit",var(--geist);
  --t-h1:60px; --lh-h1:1.02; --ls-h1:-.035em;
  --t-h2:40px; --lh-h2:1.08; --ls-h2:-.03em;
  --t-h3:22px; --lh-h3:1.2;  --ls-h3:-.015em;
  /* vorm en diepte */
  --r-btn:10px;
  --r-card:16px;
  --r-img:12px;
  --sh:0 1px 2px rgba(21,23,26,.04),0 8px 24px rgba(21,23,26,.06);
  --sh-hoog:0 2px 4px rgba(21,23,26,.05),0 18px 44px rgba(21,23,26,.10);
  --sectie:96px;
  background:var(--paper);
  color:var(--ink);
}
@media (max-width:940px){body.jas-2{--t-h1:40px;--t-h2:30px;--sectie:60px}}

/* ---------- basis ---------- */
.jas-2 h1,.jas-2 h2,.jas-2 h3{font-family:var(--outfit);font-weight:600;color:var(--ink)}
.jas-2 h1{font-weight:700}
.jas-2 ::selection{background:var(--groen-tint);color:var(--ink)}
.jas-2 :focus-visible{outline:2px solid var(--groen);outline-offset:3px;border-radius:6px}
.jas-2 .btn{border-radius:var(--r-btn);padding:13px 22px;font-weight:var(--w-medium);border:1px solid var(--rule);background:var(--paper);color:var(--ink);
  box-shadow:0 1px 2px rgba(21,23,26,.04);transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,background-color .2s,border-color .2s}
.jas-2 .btn:hover{transform:translateY(-1px);box-shadow:var(--sh);border-color:#cfd3cf}
.jas-2 .btn:active{transform:translateY(0);box-shadow:none}
.jas-2 .btn-lime{background:var(--groen);border-color:var(--groen);color:#fff}
.jas-2 .btn-lime:hover{background:var(--groen-diep);border-color:var(--groen-diep);color:#fff}
.jas-2 .pill{border-radius:9999px;border:1px solid var(--groen-rand);background:var(--groen-tint);color:var(--groen-diep);font-weight:var(--w-medium);letter-spacing:0;text-transform:none;font-size:14px;padding:5px 12px}
.jas-2 .cap{color:var(--muted-2)}
.jas-2 .intro{color:var(--muted);font-size:19px;max-width:60ch}
.jas-2 .cream{background:var(--canvas);border:0}
.jas-2 mark{background:var(--groen-tint);color:var(--groen-diep)}
.jas-2 .inhoud a,.jas-2 .letop dd a{text-decoration-color:var(--groen-rand)}
.jas-2 .inhoud a:hover,.jas-2 .letop dd a:hover{text-decoration-color:var(--groen)}

/* ---------- kop ---------- */
.jas-2 .kop{background:var(--paper);border-bottom:1px solid var(--rule)}
.jas-2 .kop .wrap{min-height:68px}
.jas-2 .merk{font-family:var(--outfit);font-weight:600;font-size:19px;letter-spacing:-.01em}
.jas-2 .menu a{font-size:15px;color:var(--muted);padding:8px 10px;border-radius:8px;white-space:nowrap}
.jas-2 .menu{gap:2px}
.jas-2 .menu a:hover{color:var(--ink);background:var(--canvas)}
.jas-2 .menu a[aria-current="true"]{color:var(--ink);font-weight:var(--w-medium)}
.jas-2 .kop .btn-lime{padding:10px 18px}

/* ---------- hero ---------- */
.jas-2 .hero{background:var(--canvas);padding:var(--s-56) 0 var(--s-64);position:relative;overflow:hidden}
.jas-2 .hero .halo{background:radial-gradient(60% 60% at 80% 20%,rgba(31,122,62,.14),transparent 70%);opacity:1;filter:none}
.jas-2 .hero .topo,.jas-2 .band .topo{opacity:.35}
.jas-2 .hero h1{margin:var(--s-16) 0 var(--s-20);max-width:14ch;text-wrap:balance}
.jas-2 .hero .dek{font-size:20px;color:var(--muted);max-width:44ch;line-height:1.5}
.jas-2 .hero-keuze{grid-template-columns:1.05fr .95fr;gap:var(--s-56)}
.jas-2 .keuze-kaart{background:var(--paper);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--sh-hoog);padding:var(--s-24) var(--s-24) var(--s-24)}
.jas-2 .hero .keuze-kaart{transform:rotate(-.6deg);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.jas-2 .hero .keuze-kaart:hover{transform:rotate(0) translateY(-2px)}
.jas-2 .keuze-beeld{height:250px;border-radius:var(--r-img);background:var(--canvas);margin-bottom:var(--s-20)}
.jas-2 .keuze-beeld img{max-height:230px;mix-blend-mode:multiply}
.jas-2 .kaart-label{font-size:14px;color:var(--groen-diep);font-weight:var(--w-medium);margin:0 0 var(--s-12)}
.jas-2 .keuze-kaart h3{font-size:24px;margin:0 0 var(--s-8)}
.jas-2 .keuze-score{font-size:15px;color:var(--muted)}
.jas-2 .keuze-score mark{background:var(--groen-tint);color:var(--groen-diep);font-family:var(--outfit);font-weight:600;font-size:17px;padding:2px 9px;border-radius:9999px}
.jas-2 .keuze-prijs{font-family:var(--outfit);font-weight:600;font-size:30px;letter-spacing:-.02em}
.jas-2 .keuze-koop .btn{min-width:160px}

/* ---------- specs als chips ---------- */
.jas-2 .rang-specs li{border-color:var(--rule);background:var(--canvas);color:var(--muted);font-size:13px;padding:4px 10px}
.jas-2 .rang-let{color:#b4532a}

/* ---------- past bij / past niet bij ---------- */
.jas-2 .past-grid{gap:var(--s-64)}
.jas-2 .past-grid h3{font-size:20px;margin-bottom:var(--s-16)}
.jas-2 .redenen li{border-top:0;padding:10px 0 10px 40px;font-size:17px;color:var(--muted);position:relative}
.jas-2 .redenen li::before{left:0;top:10px;width:26px;height:26px;border-radius:9999px;border:0;
  background:var(--groen-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23175d30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px 13px no-repeat}
.jas-2 .redenen.nee li::before{background:var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6168' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/12px 12px no-repeat;border:1px solid var(--rule)}

/* ---------- spec-tegels ---------- */
.jas-2 .spec-tegels{grid-template-columns:repeat(3,1fr);gap:var(--s-16)}
.jas-2 .spec-tegel{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-24) var(--s-24) var(--s-24);box-shadow:none;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.jas-2 .spec-tegel:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.jas-2 .spec-tegel.eerste{background:var(--groen-tint);border-color:var(--groen-rand);box-shadow:none}
.jas-2 .spec-tegel.eerste .spec-getal{color:var(--groen-diep)}
.jas-2 .spec-getal{font-family:var(--outfit);font-weight:700;font-size:40px;letter-spacing:-.03em;line-height:1;margin-bottom:var(--s-12)}
.jas-2 .spec-tegel h3{font-size:17px;color:var(--ink)}
.jas-2 .spec-tegel p{font-size:15.5px;color:var(--muted)}
.jas-2 .spec-foto{padding:0;overflow:hidden;position:relative;min-height:220px;border:0}
.jas-2 .spec-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.jas-2 .spec-foto span{position:absolute;left:var(--s-16);bottom:var(--s-16);background:rgba(255,255,255,.92);border-radius:9999px;padding:5px 12px;font-size:13px;color:var(--ink)}
@media (max-width:900px){.jas-2 .spec-tegels{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.jas-2 .spec-tegels{grid-template-columns:1fr}.jas-2 .spec-tegel.breed{grid-column:auto}}

/* ---------- begrippenlijst ---------- */
.jas-2 .letop{grid-template-columns:240px 1fr}
.jas-2 .letop dt{font-size:18px;border-color:var(--rule)}
.jas-2 .letop dd{border-color:var(--rule);font-size:16.5px}

/* ---------- onze keuze ---------- */
.jas-2 .keuze-paneel{background:var(--canvas);border:0;box-shadow:none;border-radius:24px;padding:var(--s-40)}
.jas-2 .keuze-kolom .keuze-kaart{box-shadow:var(--sh);border-color:var(--rule);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.jas-2 .keuze-kolom .keuze-kaart:hover{transform:translateY(-3px);box-shadow:var(--sh-hoog)}
.jas-2 .keuze-waarom p{color:var(--muted);font-size:16.5px}
@media (max-width:900px){.jas-2 .keuze-paneel{padding:var(--s-20);border-radius:16px}}

/* ---------- ranglijst ---------- */
.jas-2 .rang-item{border-radius:var(--r-card);border-color:var(--rule);box-shadow:none;padding:var(--s-20) var(--s-24);gap:var(--s-20);align-items:center}
.jas-2 .rang-item:first-child:not(.rang-keuze){border-color:var(--groen-rand);background:linear-gradient(90deg,var(--groen-tint) 0,var(--paper) 36%);box-shadow:none}
.jas-2 .rang-item:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:#cfd3cf}
.jas-2 .rang-nr{width:auto;height:auto;background:transparent;color:var(--muted-2);font-family:var(--outfit);font-weight:600;font-size:26px;justify-content:flex-start;padding-left:4px}
.jas-2 .rang-nr.top{background:transparent;color:var(--groen-diep)}
.jas-2 .rang-beeld{border-radius:var(--r-img);background:transparent}
.jas-2 .rang-tekst h3{font-size:19px;font-family:var(--geist);font-weight:var(--w-semibold)}
.jas-2 .rang-score b{background:var(--groen-tint);color:var(--groen-diep);font-family:var(--outfit);font-weight:600;border-radius:9999px;padding:2px 9px;font-size:16px}
.jas-2 .rang-prijs{font-family:var(--outfit);font-weight:600;font-size:24px}
.jas-2 .rang-uitleg{max-width:70ch}

/* ---------- vergelijkingstabel ---------- */
.jas-2 .tabel{border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.jas-2 .tabel thead th{background:var(--canvas);color:var(--muted-2);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:var(--w-medium)}
.jas-2 .tabel td{border-color:var(--rule);font-size:16px}
.jas-2 .vergelijking tr.keus td{background:var(--groen-tint)}
.jas-2 .vink{background-color:var(--groen);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* ---------- faq in twee kolommen ---------- */
.jas-2 .faq dl{border-top:0;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-56);row-gap:0}
.jas-2 .faq dl{row-gap:var(--s-24)}
.jas-2 .faq dt{padding:0 0 var(--s-24);font-family:var(--outfit);font-weight:600;font-size:19px;border-bottom:1px solid var(--rule)}
.jas-2 .faq dd{border-color:var(--rule);font-size:16px;margin:0;padding:0 0 var(--s-24)}
.jas-2 .faq dt:last-of-type,.jas-2 .faq dd:last-of-type{border-bottom:0}
.jas-2 .faq .wrap.smal{max-width:1200px}
@media (max-width:800px){.jas-2 .faq dl{grid-template-columns:1fr}}

/* ---------- afsluitend blok ---------- */
.jas-2 .slot{background:var(--groen-tint);border-radius:24px;padding:var(--s-40);display:grid;grid-template-columns:1fr auto;gap:var(--s-32);align-items:center}
.jas-2 .slot h2{margin:0 0 var(--s-8)}
.jas-2 .slot p{margin:0;color:var(--muted);max-width:56ch}
@media (max-width:760px){.jas-2 .slot{grid-template-columns:1fr;padding:var(--s-24)}}

/* ---------- voet ---------- */
.jas-2 .voet{background:var(--canvas);border-top:1px solid var(--rule)}
.jas-2 .voet h4{font-family:var(--outfit);font-weight:600;letter-spacing:0;text-transform:none;font-size:15px;color:var(--ink)}
.jas-2 .voet a{color:var(--muted)}
.jas-2 .voet a:hover{color:var(--ink)}

/* ---------- cookiebanner ---------- */
.jas-2 .bgm-cookie{border-radius:16px;box-shadow:var(--sh-hoog);border:1px solid var(--rule);background:var(--paper)}

/* ---------- beweging ----------
   Alleen hover en indrukken. Een scroll-animatie liet secties vervaagd
   achter in elke weergave die niet scrolt (schermafdrukken, printen, reader). */
.jas-2 .faq h2{margin-bottom:var(--s-24)}
@media (max-width:900px){.jas-2 .hero-keuze{grid-template-columns:1fr;gap:var(--s-32)}.jas-2 .hero .keuze-kaart{transform:none}}
.jas-2 .btn{white-space:nowrap}
@media (max-width:600px){.jas-2 .keuze-koop{flex-direction:column;align-items:stretch}.jas-2 .keuze-koop .btn{width:100%;min-width:0}.jas-2 .keuze-prijs{text-align:left}}

/* figuren in het nieuwe jasje: zacht afgerond, geen kader, bijschrift op canvas */
.jas-2 .figuur{border:0;border-radius:var(--r-card);box-shadow:var(--sh);background:var(--paper);margin:var(--s-24) 0 var(--s-32)}
.jas-2 .figuur svg{padding:var(--s-8) var(--s-8) 0}
.jas-2 .figuur figcaption{background:var(--paper);border-top:1px solid var(--rule);font-size:15px;color:var(--muted);padding:14px var(--s-20)}
/* twee knoppen onder elkaar in de kaart, naast elkaar in de lijst */
.jas-2 .keuze-koop{display:grid;grid-template-columns:auto 1fr 1fr;gap:var(--s-12);align-items:center}
.jas-2 .keuze-koop .cap{grid-column:1/-1;margin-bottom:-6px}
.jas-2 .keuze-koop .btn{min-width:0;padding-left:12px;padding-right:12px}
.jas-2 .rang-koop{min-width:200px}
@media (max-width:600px){.jas-2 .keuze-koop{grid-template-columns:1fr 1fr}.jas-2 .keuze-koop .keuze-prijs{grid-column:1/-1}}

/* ---------- overzichtspagina: zes soorten met onze keuze ---------- */
.jas-2 .soorten-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-24);margin-top:var(--s-8)}
.jas-2 .soort-kaart{display:grid;grid-template-columns:1fr 300px;gap:var(--s-24);align-items:start;padding:var(--s-24);border:1px solid var(--rule);border-radius:20px;background:var(--paper);transition:box-shadow .25s,transform .25s cubic-bezier(.16,1,.3,1)}
.jas-2 .soort-kaart:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.jas-2 .soort-kaart h3{font-size:26px;margin:0 0 4px}
.jas-2 .soort-kaart h3 a{text-decoration:none;color:var(--ink)}
.jas-2 .soort-kaart h3 a:hover{color:var(--groen-diep)}
.jas-2 .soort-wanneer{color:var(--groen-diep);font-weight:var(--w-medium);font-size:15px;margin:0 0 var(--s-12)}
.jas-2 .soort-tekst p{color:var(--muted);font-size:16px;line-height:1.55}
.jas-2 .soort-link{display:inline-block;margin-top:var(--s-8);font-size:15px;font-weight:var(--w-medium);color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--groen-rand)}
.jas-2 .soort-link:hover{text-decoration-color:var(--groen)}
.jas-2 .soort-keuze .keuze-kaart{box-shadow:none;border-color:var(--rule);padding:var(--s-16)}
.jas-2 .soort-keuze .keuze-beeld{height:170px}
.jas-2 .soort-keuze .keuze-kaart h3{font-size:18px}
.jas-2 .soort-keuze .keuze-prijs{font-size:24px}
.jas-2 .soort-keuze .keuze-koop{grid-template-columns:1fr 1fr}
.jas-2 .soort-keuze .keuze-koop .keuze-prijs{grid-column:1/-1}
.jas-2 .soort-keuze .rang-specs{display:none}
.jas-2 .soort-leeg{display:flex;align-items:center;justify-content:center;min-height:200px;border:1px dashed var(--rule);border-radius:16px;padding:var(--s-16);text-align:center}
@media (max-width:1100px){.jas-2 .soorten-grid{grid-template-columns:1fr}}
@media (max-width:640px){.jas-2 .soort-kaart{grid-template-columns:1fr}}
/* drie stappen */
.jas-2 .stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-24)}
.jas-2 .stap{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-card);padding:var(--s-24)}
.jas-2 .stap-nr{display:inline-flex;width:36px;height:36px;border-radius:9999px;background:var(--groen);color:#fff;align-items:center;justify-content:center;font-family:var(--outfit);font-weight:600;font-size:18px;margin-bottom:var(--s-12)}
.jas-2 .stap h3{font-size:20px;margin:0 0 var(--s-8)}
.jas-2 .stap p{color:var(--muted);font-size:16px;margin:0}
@media (max-width:800px){.jas-2 .stappen{grid-template-columns:1fr}}

/* compacte keuzekaart: kleinere knoppen, nooit afgekapt */
.jas-2 .soort-keuze .btn,.jas-2 .keuze-koop .btn{font-size:14px;padding:10px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jas-2 .soort-keuze .keuze-koop{gap:8px}
.jas-2 .keuze-grid>.keuze-kolom:only-child{max-width:720px}

/* adviesvlak: geen donkere sectie in een lichte pagina (taste-skill) */
.jas-2 .advies{background:var(--groen-tint);color:var(--ink);border:1px solid var(--groen-rand);box-shadow:none;border-radius:20px}
.jas-2 .advies h3{color:var(--ink)}
.jas-2 .advies p{color:var(--muted)}
.jas-2 .advies .num{color:var(--ink)}
.jas-2 .advies .pill{border-color:var(--groen-rand);color:var(--groen-diep);background:var(--paper)}
.jas-2 .advies mark{background:var(--groen);color:#fff}
.jas-2 .advies .melding{color:var(--muted-2)}
.jas-2 .advies .btn{background:var(--paper)}
.jas-2 .advies .btn-lime{background:var(--groen);color:#fff}
/* rekening-drieluik en typenkaarten: zachte kaarten */
.jas-2 .rekening .k{border-radius:var(--r-card);border-color:var(--rule);box-shadow:none}
.jas-2 .rekening .k.win{border-color:var(--groen-rand);background:var(--groen-tint)}
.jas-2 .stat,.jas-2 .doelkaart,.jas-2 .kaart,.jas-2 .modelkaart,.jas-2 .rekenkaart,.jas-2 .tool{border-radius:var(--r-card);box-shadow:none}
.jas-2 .doelkaart:hover,.jas-2 .modelkaart:hover{border-color:#cfd3cf;box-shadow:var(--sh);transform:translateY(-2px)}
.jas-2 .modelkaart.eerste,.jas-2 .kaart-hard{border-color:var(--groen-rand);box-shadow:none}
.jas-2 .mk-feiten dd.hl,.jas-2 .rekenkaart .hl b{background:var(--groen-tint);color:var(--groen-diep)}
.jas-2 .winst::before{background-color:var(--groen-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23175d30' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.jas-2 .hero-enkel{max-width:720px}

/* adviesblok, stappenplan en benodigdheden in het nieuwe jasje */
.jas-2 .bgm__ed{background:var(--groen-tint);border:1px solid var(--groen-rand);border-left-width:1px;border-radius:16px;padding:var(--s-20) var(--s-24)}
.jas-2 .bgm__ed__l{color:var(--groen-diep);text-transform:none;letter-spacing:0;font-size:14px;font-weight:var(--w-semibold);font-family:var(--outfit)}
.jas-2 .bgm__ed p{color:var(--ink);font-size:16.5px}
.jas-2 .bgm__ed a{color:var(--groen-diep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--groen-rand);font-weight:var(--w-medium)}
.jas-2 .bgm__ed a:hover{text-decoration-color:var(--groen)}
.jas-2 .stappenplan li{border-color:var(--rule)}
.jas-2 .stappenplan .stap-nr{background:var(--groen);color:#fff;font-family:var(--outfit)}
.jas-2 .stappenplan h3{font-family:var(--outfit);font-size:21px}
.jas-2 .benodigd{background:var(--canvas);border:0;border-radius:16px}
.jas-2 .benodigd .redenen li{padding-left:36px;font-size:16px}
.jas-2 .benodigd .redenen li::before{width:22px;height:22px;top:9px;background-size:11px 11px}
.jas-2 .inhoud .tabelinline td,.jas-2 .inhoud .tabelinline th{font-size:16px}

.jas-2 .handig{background:var(--canvas);border:0;border-radius:16px}
.jas-2 .handig h3{font-family:var(--outfit);font-size:20px}
.jas-2 .handig li a{color:var(--ink);text-decoration-color:var(--groen-rand)}
.jas-2 .handig li a:hover{text-decoration-color:var(--groen)}
.jas-2 .hero-foto{border:0;border-radius:20px;box-shadow:var(--sh-hoog);transform:rotate(.6deg)}
.jas-2 .hero-foto img{height:300px;object-fit:cover}
.jas-2 .hero-foto .cp{border-top:1px solid var(--rule);background:var(--paper)}
@media (max-width:900px){.jas-2 .hero-foto{transform:none}.jas-2 .hero-foto img{height:220px}}

/* genummerde stappen in de lopende tekst lezen als stappenplan */
.jas-2 .inhoud ol{list-style:none;padding:0;margin:var(--s-20) 0;counter-reset:st}
.jas-2 .inhoud ol>li{position:relative;padding:12px 0 12px 48px;border-top:1px solid var(--rule);margin:0;counter-increment:st}
.jas-2 .inhoud ol>li:first-child{border-top:0}
.jas-2 .inhoud ol>li::before{content:counter(st);position:absolute;left:0;top:10px;width:32px;height:32px;border-radius:9999px;background:var(--groen);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--outfit);font-weight:600;font-size:15px}
.jas-2 .inhoud ol.stappenplan>li::before{display:none}

/* gazonkalender */
.jas-2 .maand{border-color:var(--rule);border-radius:16px;box-shadow:none}
.jas-2 .maand h3{font-family:var(--outfit);font-size:21px}
.jas-2 .maand li::before{background:var(--groen)}
.jas-2 .maand li a{color:var(--ink);text-decoration-color:var(--groen-rand)}
.jas-2 .maand li a:hover{text-decoration-color:var(--groen)}
.jas-2 .maand.nu{border-color:var(--groen);box-shadow:0 0 0 1px var(--groen);background:linear-gradient(180deg,var(--groen-tint) 0,var(--paper) 90px)}
.jas-2 .maand .nu-label{background:var(--groen);color:#fff}
.jas-2 table.matrix td.vol span,.jas-2 .legenda .vol{background:var(--groen)}
.jas-2 table.matrix td.kan span,.jas-2 .legenda .kan{border-color:var(--groen);background:var(--paper)}
.jas-2 table.matrix th.nu,.jas-2 table.matrix td.nu{background:var(--groen-tint)}
.jas-2 table.matrix tbody th a{color:var(--ink);text-decoration-color:var(--groen-rand)}

/* hoofdmenu met uitklappanelen */
.jas-2 .mi-top{font-size:15px;color:var(--muted);padding:8px 10px;border-radius:8px;white-space:nowrap}
.jas-2 .mi:hover .mi-top,.jas-2 .mi.open .mi-top{color:var(--ink);background:var(--canvas)}
.jas-2 .mi-top[aria-current="true"]{color:var(--ink);font-weight:var(--w-medium)}
.jas-2 .mi-knop:hover{color:var(--ink)}
.jas-2 .mi-binnen{border-radius:16px;border-color:var(--rule)}
.jas-2 .mi-lijst a{color:var(--ink)}
.jas-2 .mi-lijst a:hover{background:var(--groen-tint);color:var(--groen-diep)}
.jas-2 .mi-uit{background:var(--canvas);border:0}
.jas-2 .mi-uit:hover .mi-uit-kop{color:var(--groen-diep)}
.jas-2 .mi-uit-kop{font-family:var(--outfit);font-weight:600;font-size:16px;color:var(--ink)}
.jas-2 .menu{gap:0}
.jas-2 .mi-lijst a,.jas-2 .mi-uit,.jas-2 .mi-uit span{white-space:normal}

/* ---------- keuzehulp in jasje 2 ---------- */
.jas-2 .tool{background:var(--paper);border:1px solid var(--rule);border-radius:20px;box-shadow:var(--sh-hoog);margin-top:var(--s-40)}
.jas-2 .tool-hd,.jas-2 .tool-ft{background:var(--paper);border-color:var(--rule)}
.jas-2 .tool-hd .lbl{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:var(--w-medium)}
.jas-2 .voortgang-stappen i.aan{background:var(--groen)}
.jas-2 .status{background:var(--groen-tint);border-color:var(--groen-rand);color:var(--groen-diep)}
.jas-2 .status::before{background:var(--groen)}
.jas-2 .tool-bd{padding:var(--s-40) var(--s-40) var(--s-32)}
.jas-2 .vraag h2{font-size:30px;letter-spacing:-.02em;margin-bottom:8px}
.jas-2 .vraag .hint{font-size:16.5px;margin-bottom:var(--s-24)}
.jas-2 .opt{border-radius:14px;border-color:var(--rule);box-shadow:none;padding:var(--s-16) 18px 14px;position:relative;transition:border-color .15s,background .15s,transform .2s cubic-bezier(.16,1,.3,1)}
.jas-2 .opt:hover{border-color:var(--groen);box-shadow:none;transform:translateY(-2px)}
.jas-2 .opt.sel{background:var(--groen-tint);border-color:var(--groen);box-shadow:none}
.jas-2 .opt.sel b{color:var(--groen-diep)}
.jas-2 .opt.sel span{color:var(--groen-diep)}
.jas-2 .opt.sel::after{content:"";position:absolute;right:14px;top:16px;width:20px;height:20px;border-radius:9999px;
  background:var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat}
.jas-2 .opt b{font-family:var(--outfit);font-weight:600;font-size:17px;padding-right:26px}
.jas-2 .tool-ft .btn{padding:10px 16px}
.jas-2 .tool-ft .cap{color:var(--muted-2)}

.jas-2 .uitslag-top{grid-template-columns:1.1fr .9fr;gap:var(--s-40);align-items:start}
.jas-2 .uitslag-top h2{font-size:38px;letter-spacing:-.025em;margin:var(--s-12) 0 var(--s-16)}
.jas-2 .uitslag .redenen li{padding:8px 0 8px 38px;font-size:16.5px}
.jas-2 .uitslag .redenen li::before{top:8px}
.jas-2 .tool-tegels{grid-template-columns:repeat(3,1fr);gap:var(--s-12)}
.jas-2 .tool-tegels .spec-tegel{padding:var(--s-20);border-radius:14px}
.jas-2 .tool-tegels .spec-tegel:hover{transform:none;box-shadow:none}
.jas-2 .tool-tegels .spec-getal{font-size:30px;margin-bottom:8px}
.jas-2 .tool-tegels h3{font-size:15px}
.jas-2 .tool-tegels p{font-size:14px;line-height:1.45}
.jas-2 .uitslag .aannames{margin-top:var(--s-16)}
.jas-2 .uitslag .aannames span{background:var(--canvas);border:0;color:var(--muted)}
.jas-2 .uitslag-kaart .keuze-kaart{box-shadow:var(--sh);transform:none}
.jas-2 .uitslag-kaart .keuze-beeld{height:210px}
.jas-2 .uitslag-kaart .keuze-beeld img{max-height:190px}
.jas-2 .uitslag-kaart .melding{margin-top:var(--s-12)}
.jas-2 .uitslag .niet{background:var(--canvas);color:var(--ink);border-radius:16px;padding:var(--s-24) var(--s-32);margin-top:var(--s-40);border:1px solid var(--rule)}
.jas-2 .uitslag .niet h3{color:var(--ink);font-size:20px}
.jas-2 .uitslag .niet p{color:var(--muted);font-size:16.5px}
.jas-2 .uitslag .niet b{color:var(--ink);font-family:var(--outfit);font-weight:600}
.jas-2 .uitslag .modellen{margin-top:var(--s-40)}
.jas-2 .uitslag .modellen h3{font-size:24px;letter-spacing:-.02em}
.jas-2 .uitslag .rang{margin-top:var(--s-20)}
.jas-2 .uitslag .rang-item{padding:var(--s-16) var(--s-20)}
@media (max-width:940px){
  .jas-2 .tool-bd{padding:var(--s-24) var(--s-20)}
  .jas-2 .uitslag-top{grid-template-columns:1fr}
  .jas-2 .tool-tegels{grid-template-columns:1fr}
  .jas-2 .uitslag .niet{padding:var(--s-20)}
}

/* typekaarten op de homepage */
.jas-2 .typekaart{border-radius:var(--r-card);transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .15s}
.jas-2 .typekaart:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--groen-rand)}
.jas-2 .typekaart-beeld{background:var(--canvas);border-radius:14px}
.jas-2 .typekaart h3{font-family:var(--outfit);color:var(--ink)}
.jas-2 .typekaart:hover h3{color:var(--groen-diep)}
.jas-2 .typekaart-keuze{color:var(--groen-diep);font-weight:var(--w-medium)}
.jas-2 .kortstrip li::before{background:var(--groen)}
.jas-2 .kortstrip .lbl{color:var(--muted-2)}
.jas-2 .typekaart h3{text-decoration-color:var(--groen-rand)}
.jas-2 .typekaart:hover h3{text-decoration-color:var(--groen)}
.jas-2 .typekaart-meer{color:var(--groen-diep)}
.jas-2 .typekaart:hover .typekaart-meer{text-decoration:underline;text-underline-offset:3px}