/* lr-keuzehulp.css — lease-keuzehulp (shortcode [lr_keuzehulp]). Port van het goedgekeurde prototype (7-11-2026).
   Eén navy podium; de zin bovenin is voortgang en samenvatting, daaronder steeds één vraag.
   Alles staat onder .lr-kh en alle klassen hebben het voorvoegsel kh-, zodat niets botst met base.css. */
.lr-kh{
  --kh-bg:#070F36; --kh-ink:#FFFFFF; --kh-muted:rgba(255,255,255,.66); --kh-faint:rgba(255,255,255,.5);
  --kh-line:rgba(255,255,255,.14); --kh-glass:rgba(255,255,255,.05);
  --kh-pink:#FA9EBC; --kh-pink-deep:#E88AA3; --kh-pink-ink:#7A3148;
  --kh-ok-solid-bg:#E7F4EC; --kh-ok-solid:#1F8F5F;
  --kh-photo:#F4F1EE; --kh-navy:#0B1957;
  --kh-ease:cubic-bezier(0.22,1,0.36,1);
  position:relative; z-index:2; color:var(--kh-ink); font-family:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; font-size:15px; line-height:1.55; text-align:left;
}
.lr-kh *{box-sizing:border-box;}
.lr-kh button{font-family:inherit;}
.lr-kh p{margin:0;}
.lr-kh .kh-stage{scroll-margin-top:96px;border-radius:22px;background:var(--kh-bg);background-image:radial-gradient(ellipse 60% 50% at 85% 0%,rgba(250,158,188,.22),transparent 70%),radial-gradient(ellipse 50% 60% at 0% 100%,rgba(26,45,107,.9),transparent 70%);border:1px solid var(--kh-line);padding:clamp(20px,3.4vw,40px);display:flex;flex-direction:column;gap:26px;min-width:0;}
.lr-kh .kh-eb{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:11px;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;color:var(--kh-muted);}
.lr-kh .kh-eb::before{content:"";width:28px;height:3px;background-image:linear-gradient(to right,var(--kh-pink) 50%,transparent 50%);background-size:8px 3px;flex-shrink:0;}
.lr-kh .kh-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.lr-kh .kh-hint{font-size:13px;line-height:1.3;font-weight:500;color:var(--kh-faint);}
.lr-kh .kh-zin{font-weight:600;font-size:clamp(24px,3.3vw,42px);line-height:1.42;letter-spacing:-.03em;margin:0;max-width:1080px;text-wrap:pretty;color:#fff;}
.lr-kh .kh-zin.kh-small{font-size:clamp(19px,2.2vw,28px);letter-spacing:-.02em;}
.lr-kh .kh-dchip{font:inherit;letter-spacing:inherit;line-height:inherit;color:var(--kh-ink);background:transparent;border:0;margin:0;padding:0 .18em;border-radius:10px;box-shadow:inset 0 -4px 0 var(--kh-pink);cursor:pointer;white-space:nowrap;touch-action:manipulation;transition:background 150ms,color 150ms;text-transform:none;min-height:0;}
.lr-kh .kh-dchip:hover{background:rgba(255,255,255,.12);}
.lr-kh .kh-dchip.kh-act{background:var(--kh-pink);color:var(--kh-pink-ink);box-shadow:0 10px 30px -8px rgba(250,158,188,.6);}
.lr-kh .kh-dchip.kh-todo{color:var(--kh-muted);box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);background:transparent;padding:0 .3em;}
.lr-kh .kh-dchip.kh-todo:hover{background:rgba(255,255,255,.12);}
.lr-kh .kh-road{position:relative;height:4px;background-image:linear-gradient(to right,rgba(255,255,255,.16) 50%,transparent 50%);background-size:20px 4px;}
.lr-kh .kh-road span{position:absolute;left:0;top:0;bottom:0;background-image:linear-gradient(to right,var(--kh-pink) 50%,transparent 50%);background-size:20px 4px;transition:width 600ms var(--kh-ease);}
.lr-kh .kh-lbl{font-size:11px;line-height:1.3;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--kh-muted);}
.lr-kh .kh-q{display:flex;flex-direction:column;gap:16px;min-width:0;}
.lr-kh .kh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:14px;}
.lr-kh .kh-grid.kh-res{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));}
.lr-kh .kh-ptile{position:relative;display:block;width:100%;aspect-ratio:4/3;max-width:100%;border:0;padding:0;margin:0;border-radius:20px;overflow:hidden;background:var(--kh-photo);cursor:pointer;text-align:left;touch-action:manipulation;box-shadow:0 1px 2px rgba(0,0,0,.2),0 20px 40px -24px rgba(0,0,0,.7);transition:transform 260ms var(--kh-ease),box-shadow 260ms var(--kh-ease);}
.lr-kh .kh-ptile:hover{transform:translateY(-3px);}
.lr-kh .kh-ptile.kh-static{cursor:default;}
.lr-kh .kh-ptile.kh-static:hover{transform:none;}
.lr-kh .kh-ptile img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 62%;}
.lr-kh .kh-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,15,54,0) 40%,rgba(7,15,54,.55) 65%,rgba(7,15,54,.95) 100%);}
.lr-kh .kh-cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:3px;}
.lr-kh .kh-t{font-weight:600;font-size:19px;line-height:1.15;letter-spacing:-.02em;color:#fff;}
.lr-kh .kh-s{font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.82);}
.lr-kh .kh-ptile.kh-on{box-shadow:0 0 0 3px var(--kh-pink),0 24px 48px -20px rgba(250,158,188,.7);}
.lr-kh .kh-ptile.kh-dim img{filter:grayscale(1);opacity:.42;}
.lr-kh .kh-chk{position:absolute;top:12px;right:12px;font-weight:600;font-size:12px;line-height:1;padding:8px 11px;border-radius:999px;background:var(--kh-pink);color:var(--kh-pink-ink);}
.lr-kh .kh-chk.kh-ok{background:var(--kh-ok-solid-bg);color:var(--kh-ok-solid);}
.lr-kh .kh-chk.kh-alt{background:#fff;color:var(--kh-navy);}
.lr-kh .kh-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;background:#fff;overflow:hidden;}
.lr-kh .kh-nw{white-space:nowrap;}
.lr-kh .kh-ptile .kh-mosaic img{position:static;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center 60%;background:var(--kh-photo);}
.lr-kh .kh-dopt{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;padding:18px;border-radius:14px;background:var(--kh-glass);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.78);cursor:pointer;min-height:48px;touch-action:manipulation;transition:transform 200ms var(--kh-ease),border-color 200ms,background 200ms;}
.lr-kh .kh-dopt:hover{transform:translateY(-2px);}
.lr-kh .kh-dopt svg{width:22px;height:22px;}
.lr-kh .kh-dopt .kh-t{font-size:17px;line-height:1.2;}
.lr-kh .kh-dopt .kh-s{font-size:13px;line-height:1.4;color:var(--kh-muted);}
.lr-kh .kh-dopt.kh-on{background:rgba(250,158,188,.10);border-color:rgba(250,158,188,.6);color:var(--kh-pink);box-shadow:0 18px 48px -20px rgba(250,158,188,.6);}
.lr-kh .kh-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:4px;padding:4px;border-radius:28px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);}
.lr-kh .kh-seg button{border:0;background:transparent;cursor:pointer;text-align:center;padding:13px 0;min-height:44px;border-radius:999px;font-weight:600;font-size:14px;line-height:1;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;touch-action:manipulation;min-width:0;}
.lr-kh .kh-seg button.kh-on{background:var(--kh-pink);color:var(--kh-pink-ink);}
.lr-kh .kh-more{font-weight:500;font-size:14px;line-height:1.4;color:var(--kh-muted);}
.lr-kh .kh-note{font-size:14px;line-height:1.5;color:var(--kh-muted);max-width:640px;}
.lr-kh .kh-note a{color:#fff;}
.lr-kh .kh-big{font-weight:600;font-size:40px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;}
.lr-kh .kh-big small{font-weight:500;font-size:15px;line-height:1;color:var(--kh-muted);letter-spacing:0;}
.lr-kh .kh-brow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;}
.lr-kh .kh-scale{display:flex;justify-content:space-between;font-size:12px;line-height:1;color:var(--kh-faint);font-variant-numeric:tabular-nums;}
.lr-kh input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;height:40px;margin:0;padding:0;border:0;cursor:pointer;touch-action:pan-y;}
.lr-kh input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--kh-pink) var(--p,0%),rgba(255,255,255,.16) var(--p,0%));}
.lr-kh input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:linear-gradient(to right,var(--kh-pink) var(--p,0%),rgba(255,255,255,.16) var(--p,0%));}
.lr-kh input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-13px;border-radius:50%;background:#fff;border:3px solid var(--kh-pink);box-shadow:0 0 0 6px rgba(250,158,188,.18),0 6px 18px -4px rgba(250,158,188,.7);}
.lr-kh input[type=range]::-moz-range-thumb{box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--kh-pink);box-shadow:0 0 0 6px rgba(250,158,188,.18);}
.lr-kh .kh-empty{padding:18px 20px;border-radius:14px;background:var(--kh-glass);border:1px solid var(--kh-line);color:rgba(255,255,255,.85);}
.lr-kh .kh-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);}
.lr-kh .kh-foot[hidden]{display:none;}
.lr-kh .kh-count{display:flex;align-items:baseline;gap:12px;}
.lr-kh .kh-count b{font-weight:600;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--kh-pink);font-variant-numeric:tabular-nums;}
.lr-kh .kh-count span{font-weight:500;font-size:15px;line-height:1.3;color:rgba(255,255,255,.82);}
.lr-kh .kh-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.lr-kh .kh-kbtn{display:inline-block;border:0;cursor:pointer;padding:16px 24px;min-height:48px;border-radius:999px;background:var(--kh-pink);color:var(--kh-pink-ink);font-weight:600;font-size:15px;line-height:1;text-decoration:none;text-align:center;box-shadow:0 10px 30px -8px rgba(232,138,163,.45);touch-action:manipulation;transition:background 150ms,color 150ms;}
.lr-kh .kh-kbtn:hover{background:var(--kh-pink-deep);color:#fff;text-decoration:none;}
.lr-kh .kh-kbtn.kh-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3);box-shadow:none;}
.lr-kh .kh-kbtn.kh-ghost:hover{background:rgba(255,255,255,.08);}
.lr-kh .kh-kbtn.kh-off{background:rgba(255,255,255,.12);color:var(--kh-faint);box-shadow:none;cursor:not-allowed;}
.lr-kh .kh-rcard{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--kh-glass);border:1px solid var(--kh-line);min-width:0;}
.lr-kh .kh-rcard.kh-best{box-shadow:0 0 0 2px var(--kh-pink),0 24px 48px -24px rgba(250,158,188,.6);}
.lr-kh .kh-rcard .kh-ptile{border-radius:0;box-shadow:none;}
.lr-kh .kh-rbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1;}
.lr-kh .kh-spacer{flex:1;}
.lr-kh .kh-rnote{font-size:14px;line-height:1.45;color:rgba(255,255,255,.88);}
.lr-kh .kh-contract{display:flex;justify-content:space-between;gap:12px;padding-top:12px;margin-top:4px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;line-height:1.4;color:var(--kh-muted);font-variant-numeric:tabular-nums;}
.lr-kh .kh-rcard .kh-kbtn{margin-top:8px;width:100%;}
.lr-kh .kh-lead{display:flex;gap:24px;flex-wrap:wrap;align-items:center;padding:clamp(20px,3vw,28px);border-radius:22px;background:var(--kh-glass);border:1px solid var(--kh-line);}
.lr-kh .kh-leadtitle{font-weight:600;font-size:24px;line-height:1.2;letter-spacing:-.025em;margin:0;text-wrap:balance;color:#fff;}
.lr-kh .kh-leadtitle span{color:var(--kh-pink);}
.lr-kh .kh-lead p{color:var(--kh-muted);}
.lr-kh .kh-lead .kh-leadtitle{color:#fff;}
.lr-kh .kh-txt{flex:1 1 320px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.lr-kh .kh-leadcta{flex:0 1 auto;display:flex;flex-direction:column;gap:10px;min-width:0;}
.lr-kh .kh-fine{font-size:13px;line-height:1.5;color:var(--kh-faint);max-width:560px;}
.lr-kh :focus-visible{outline:3px solid var(--kh-pink);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){.lr-kh *{transition-duration:1ms !important;}}

/* Mobiel (80% van het verkeer): fototegels en keuzes in 2 kolommen, zodat een vraag in één scherm past. */
@media (max-width:600px){
  .lr-kh .kh-stage{border-radius:18px;gap:20px;}
  .lr-kh .kh-hint{display:none;}
  .lr-kh .kh-zin{font-size:21px;line-height:1.45;letter-spacing:-.02em;}
  .lr-kh .kh-zin.kh-small{font-size:17px;}
  .lr-kh .kh-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .lr-kh .kh-grid.kh-res,.lr-kh .kh-grid.kh-when{grid-template-columns:1fr;}
  /* Smalle tegels: foto in zijn eigen 3:2-verhouding bovenaan (hele auto in beeld), naam en subregel eronder op navy. */
  .lr-kh .kh-grid:not(.kh-res) .kh-ptile{aspect-ratio:auto;display:flex;flex-direction:column;border-radius:16px;background:#101B4D;}
  .lr-kh .kh-grid:not(.kh-res) .kh-ptile>img,.lr-kh .kh-grid:not(.kh-res) .kh-mosaic{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;object-position:center;flex-shrink:0;}
  .lr-kh .kh-grid:not(.kh-res) .kh-fade{display:none;}
  .lr-kh .kh-grid:not(.kh-res) .kh-cap{position:static;padding:10px 12px 12px;flex:1;}
  .lr-kh .kh-grid.kh-res .kh-cap{left:16px;right:16px;bottom:14px;}
  .lr-kh .kh-t{font-size:16px;}
  .lr-kh .kh-s{font-size:12.5px;}
  .lr-kh .kh-grid.kh-res .kh-t{font-size:19px;}
  .lr-kh .kh-grid.kh-res .kh-s{font-size:13.5px;}
  .lr-kh .kh-chk{top:8px;right:8px;padding:6px 8px;font-size:11px;}
  .lr-kh .kh-dopt{padding:14px;}
  .lr-kh .kh-dopt .kh-t{font-size:16px;}
  .lr-kh .kh-dopt .kh-s{font-size:12.5px;}
  .lr-kh .kh-seg{border-radius:22px;}
  .lr-kh .kh-count b{font-size:36px;}
  .lr-kh .kh-foot{gap:12px;}
  .lr-kh .kh-foot .kh-btns{width:100%;}
  .lr-kh .kh-foot .kh-btns .kh-kbtn{flex:1;}
  .lr-kh .kh-leadcta,.lr-kh .kh-leadcta .kh-kbtn{width:100%;}
  .lr-kh .kh-resfoot .kh-btns{flex-direction:column;width:100%;}
  .lr-kh .kh-resfoot .kh-btns .kh-kbtn{width:100%;}
  .lr-kh .kh-leadtitle{font-size:21px;}
}

/* Inbedding op de keuzehulp-pagina (blokkenpagina): ruimte tussen intro en podium, en 4 keuzekaarten als 2x2. */
.lr-kh-hero .lr-kh{margin-top:36px;}
.lr-bp .pr-grid.kh-grid4{grid-template-columns:repeat(2,1fr);}
@media(max-width:760px){.lr-bp .pr-grid.kh-grid4{grid-template-columns:1fr;}}
@media(max-width:600px){.lr-kh-hero .lr-kh{margin-top:24px;}}
/* Euro-icoon bestaat in lr-blocks.css alleen voor .inc-item; zelfde oplossing (€-teken) voor de kaart. Links in de kaarten herkenbaar. */
.lr-bp .kh-grid4 .pr-card.ico-euro::after{content:"€";display:flex;align-items:center;justify-content:center;background:none;-webkit-mask:none;mask:none;font-size:17px;font-weight:300;color:var(--pink-deep);}
.lr-bp .kh-grid4 .pr-card p a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px;}
/* Vormtegels (vraag 1) vanaf tablet: naam en subregel bovenin, verloop van boven, zodat de tekst niet over de auto staat (Teun, 7-11-2026). */
@media (min-width:601px){
  .lr-kh .kh-ptile[data-a=body] .kh-cap{top:16px;bottom:auto;}
  .lr-kh .kh-ptile[data-a=body] .kh-fade{background:linear-gradient(to top,rgba(7,15,54,0) 52%,rgba(7,15,54,.5) 74%,rgba(7,15,54,.9) 100%);}
  .lr-kh .kh-ptile[data-a=body] .kh-chk{top:auto;bottom:12px;}
  /* Geen voorkeur: tekst op navy bovenin, de 4 auto's eronder helemaal in beeld (niet meer alleen de daken). */
  .lr-kh .kh-ptile[data-id=any]{background:#101B4D;}
  .lr-kh .kh-ptile[data-id=any] .kh-fade{display:none;}
  .lr-kh .kh-ptile[data-id=any] .kh-mosaic{top:64px;background:#101B4D;}
  .lr-kh .kh-ptile[data-id=any] .kh-mosaic img{object-position:center 62%;}
}
/* Geen voorkeur, Safari/iPad: het raster (grid) liet de foto's te groot renderen (alleen daken zichtbaar). Flex met vaste helften werkt in alle browsers. */
@media (min-width:601px){
  .lr-kh .kh-ptile[data-id=any] .kh-mosaic{display:flex;flex-wrap:wrap;gap:2px;}
  .lr-kh .kh-ptile[data-id=any] .kh-mosaic img{flex:0 0 calc(50% - 1px);width:calc(50% - 1px);height:calc(50% - 1px);}
}
@media (min-width:601px){.lr-kh .kh-ptile[data-id=any] .kh-cap{top:12px;}}
/* Vormtegels: 2 rijen van 3 i.p.v. 4+2 (Teun, 7-11-2026). */
@media (min-width:900px){.lr-kh .kh-grid:has(> [data-a=body]){grid-template-columns:repeat(3,minmax(0,1fr));}}
/* Geen pills in de foto s van budgetstrook en top 3 (Teun, 7-11-2026). Alleen ✓ Gekozen bij vraag 1 blijft. */
.lr-kh .kh-ptile:not([data-a=body]) .kh-chk{display:none;}
/* 7-11-2026 (Teun): zin in vijf regels; foto-tekst als naam / prijs / leasevorm; top 3 = hele kaart klikbaar naar de autopagina. */
.lr-kh .kh-zl{display:block;}
.lr-kh a.kh-rcard{text-decoration:none;color:inherit;cursor:pointer;transition:transform 260ms var(--kh-ease,ease),border-color 200ms;}
@media (hover:hover){.lr-kh a.kh-rcard:hover{transform:translateY(-3px);border-color:rgba(250,158,188,.55);}}
@media (hover:hover){.lr-kh a.kh-rcard:hover .kh-rgo{background:rgba(255,255,255,.08);}}
.lr-kh a.kh-rcard:focus-visible{outline:3px solid var(--kh-pink,#FA9EBC);outline-offset:3px;}
.lr-kh .kh-rcard .kh-ptile{display:block;}
.lr-kh .kh-trim{margin:0;font-size:14px;line-height:1.4;color:rgba(255,255,255,.75);}
/* Mobiel compacter (Teun, 7-11-2026): de eerste vraag moet zonder scrollen in beeld komen. Intro blijft in de HTML (SEO), alleen verborgen op mobiel. */
@media (max-width:600px){
  section.page-hero.lr-kh-hero{padding-top:20px;padding-bottom:40px;}
  .lr-kh-hero .ph-crumbs{margin-bottom:12px;}
  .lr-kh-hero .ph-eyebrow{margin-bottom:10px;}
  .lr-kh-hero .ph-title{font-size:30px;line-height:1.08;margin-bottom:0;}
  .lr-kh-hero .ph-sub{display:none;}
  .lr-kh-hero .lr-kh{margin-top:18px;}
  .lr-kh .kh-zin{font-size:19px;}
}
/* Ondertitel hero: gewoon doorlopen i.p.v. balance (polish.css) die vroeg afbreekt (Teun, 7-11-2026). */
.lr-kh-hero .ph-sub{max-width:640px;}