/* Gouden Klusknop-kit: aanvullingen op de gouden template (stijl.css). Basis: de leadsite-laag van de gouden referentiesite
   (hero met formulier rechts, compacte offertekaart, Kort samengevat, tabellen, silo, mobiel). Daaronder de
   Klusknop-onderdelen: radiotegels, adres en foto's (adres-foto.js), samenvatting, AVG-zin, logo op een wit plateau
   in de zwarte footer. Kleuren en lettertype komen uit assets/css/merk.css (genereer.py, uit config.py). */

/* ---------- navigatie: zes items plus mail en knop moeten op 1440 passen ---------- */
@media(min-width:1201px) and (max-width:1560px){
  .nav-links{gap:20px}
  .nav-links>a,.nav .heeft-sub>a{font-size:15px}
  .nav .knop{font-size:14.5px;padding:10px 16px 11px}
  .nav-tel{font-size:14px;margin:0 8px 0 2px}
}

/* ---------- hero met formulier rechts ---------- */
.hero.hero-vloer{height:auto;min-height:640px}
/* De sfeerfoto's zijn licht (witte interieurs), dus de standaardwaas van de
   template is te zwak: witte koppen vallen dan weg. Egaal donkerder, en op de
   telefoon nog iets meer, want daar staat de tekst over de volle breedte. */
.hero-vloer .hero-dia::after,.geldhero .hero-foto::after{
  background:linear-gradient(180deg,
    rgba(var(--ink-rgb),.72) 0%,
    rgba(var(--ink-rgb),.62) 45%,
    rgba(var(--ink-rgb),.74) 100%);
}
@media(max-width:1023px){
  .hero-vloer .hero-dia::after,.geldhero .hero-foto::after{
    background:linear-gradient(180deg,
      rgba(var(--ink-rgb),.78) 0%,
      rgba(var(--ink-rgb),.70) 45%,
      rgba(var(--ink-rgb),.80) 100%);
  }
}
.hero-duo{
  position:relative;z-index:3;width:100%;max-width:1180px;margin-inline:auto;
  display:grid;gap:36px;align-items:center;
  padding:calc(var(--header-h) + 34px) 22px 54px;
}
.hero-duo .hero-tekst{color:var(--wit);text-align:center}
.hero-duo .hero-titel{margin-inline:auto}
.hero-vinkjes{list-style:none;padding:0;margin:20px auto 0;width:fit-content;text-align:left}
.hero-vinkjes li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;margin-bottom:9px;color:var(--wit)}
.hero-vinkjes li svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px}
@media(min-width:1024px){
  .hero-duo{grid-template-columns:1fr 470px;gap:48px}
  .hero-duo .hero-tekst{text-align:left}
  .hero-duo .hero-titel{margin-inline:0;max-width:520px}
  .hero-duo .hero-sub{margin-inline:0}
  .hero-duo .hero-knoppen{justify-content:flex-start}
  .hero-vinkjes{margin-inline:0}
}
/* subpagina-variant: zelfde opbouw, rustige foto-achtergrond met petrol-waas */
.geldhero{position:relative;overflow:hidden;background:var(--petrol);display:grid}
.geldhero .hero-foto{position:absolute;inset:0;background-size:cover;background-position:center}
.geldhero .hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.62),rgba(var(--petrol-rgb),.80))}
.geldhero h1{font-size:clamp(26px,3.2vw,40px);line-height:1.3;color:var(--wit);margin-bottom:12px}
.geldhero .hero-sub{font-size:16.5px;opacity:.94;max-width:560px;margin-inline:auto}
@media(min-width:1024px){.geldhero .hero-sub{margin-inline:0}}

/* ---------- compacte offertekaart (in de hero op desktop) ---------- */
.calc-hero{
  background:var(--wit);border-radius:24px;
  box-shadow:0 26px 60px -18px rgba(var(--ink-rgb),.45);
  padding:clamp(20px,2.4vw,30px);text-align:left;
  width:100%;max-width:470px;margin-inline:auto;
}
.calc-hero .calc{padding:0}
.calc-hero .eyebrow{margin-bottom:6px}
.calc-hero .calc-kop{font-size:21px;margin-bottom:4px;color:var(--ink)}
.calc-hero .calc-ondertitel{font-size:13.5px;color:#7a7268;margin-bottom:14px}
.calc-hero .calc-voortgang{margin-bottom:14px}
.calc-hero .calc h3{font-size:17px}
.calc-hero .calc .calc-sub{font-size:13px;margin-bottom:12px}
.calc-hero .calc-tegels{gap:9px}
.calc-hero .calc-tegel{padding:12px 8px}
.calc-hero .calc-tegel svg{width:19px;height:19px;margin-bottom:6px}
.calc-hero .calc-tegel b{font-size:12.5px}
.calc-hero .calc-stap-blok{min-height:238px}
.calc-hero .calc-acties{padding-top:14px}
.calc-hero .calc-velden .veld{margin-bottom:9px}
.calc-hero .calc-velden .veld label{font-size:12.5px}
.calc-hero .calc-velden .veld input{padding:10px 12px;font-size:14.5px}
/* pill-keuzes (oppervlakte, oude vloer): twee per rij */
.calc-pills{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.calc-pills .calc-tegel{display:flex;align-items:center;justify-content:center;padding:11px 8px}
.calc-pills .calc-tegel b{font-size:13px}
.calc-gerust-mini{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;
  font-size:12px;color:#8a8177;justify-content:center}
.calc-gerust-mini span{display:inline-flex;align-items:center;gap:5px}
.calc-gerust-mini svg{width:13px;height:13px;flex:0 0 13px}
.hero-vinkjes li svg,.uniek-vinkjes li svg{flex:0 0 17px}
.tip-kader .vinkjes svg,.spec-lijst svg{width:15px;height:15px;flex:0 0 15px}

/* ---------- Kort samengevat (AI-laag) ---------- */
.kortblok{
  max-width:840px;margin:0 auto;background:var(--tint);
  border-left:4px solid var(--accent);border-radius:12px;
  padding:18px 22px;text-align:left;
}
.kortblok .kort-label{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-donker);margin-bottom:6px}
.kortblok p{font-size:15.5px;color:var(--ink)}
.kortblok .kort-datum{display:block;margin-top:8px;font-size:12.5px;color:#8a8177}

/* ---------- tabellen: schuifrand en stapelen op de telefoon ---------- */
.tabelwrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;
  background:
    linear-gradient(90deg,var(--wit) 30%,rgba(255,255,255,0)),
    linear-gradient(270deg,var(--wit) 30%,rgba(255,255,255,0)),
    linear-gradient(90deg,rgba(var(--ink-rgb),.14),rgba(0,0,0,0) 14px),
    linear-gradient(270deg,rgba(var(--ink-rgb),.14),rgba(0,0,0,0) 14px);
  background-attachment:local,local,scroll,scroll;
  background-position:left,right,left,right;background-repeat:no-repeat;
  background-size:44px 100%,44px 100%,14px 100%,14px 100%;
}
table.prijstabel{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
table.prijstabel th,table.prijstabel td{padding:11px 14px;text-align:left;border-bottom:1px solid rgba(var(--ink-rgb),.10)}
table.prijstabel th{font-weight:700;color:var(--ink);background:var(--tint2)}
table.prijstabel tr:last-child td{border-bottom:0}
@media(max-width:640px){
  table.stapel{min-width:0}
  table.stapel tr:has(th){display:none}
  table.stapel tr{display:block;border:1px solid rgba(var(--ink-rgb),.10);border-radius:10px;margin-bottom:10px;padding:6px 10px}
  table.stapel td{display:flex;justify-content:space-between;gap:14px;border:0;padding:7px 2px;font-size:14px}
  table.stapel td[data-label]::before{content:attr(data-label);font-weight:600;color:var(--ink)}
  table.stapel td.kop{font-weight:700;color:var(--ink)}
}

/* ---------- kleine componenten ---------- */
.artikel-meta .tip-tag{background:rgba(var(--accent-rgb),.14);color:var(--accent-donker)}
.bron-citeer{background:var(--tint2);border-radius:12px;padding:16px 20px;font-size:14.5px;
  color:var(--tekst);margin-top:22px;overflow-wrap:anywhere}
.bron-citeer p,.bron-citeer a{overflow-wrap:anywhere;word-break:break-word}
/* nooit horizontale scroll door een lange URL of een lang woord ergens op de pagina */
.artikel-inhoud,.container p,.kortblok p,.faq p{overflow-wrap:anywhere}
.bron-citeer code{font-size:13px;word-break:break-all}
.inspiratie-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.inspiratie-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.inspiratie-grid{grid-template-columns:1fr}}
.landing-terug{font-size:14px;margin-top:14px}
/* vier prijsfactoren met veel tekst: 2x2 leest beter dan vier smalle kolommen */
.stappen.vier-blokken{grid-template-columns:1fr 1fr;max-width:920px;margin-inline:auto}
@media(max-width:760px){.stappen.vier-blokken{grid-template-columns:1fr}}
.submenu.twee-kolom{min-width:420px;columns:2;column-gap:6px}
.submenu.twee-kolom li{break-inside:avoid}
@media print{
  .header,.footer,.zwevend-knop,.bel-knoppen,.calc-hero,.cta-strook{display:none!important}
  body{background:#fff;color:#000}
}

/* ---------- logo in het plateau: strak, met lucht eromheen (Simon 19-09) ---------- */
.logo-plateau .logo-beeld{height:64px;max-width:min(20vw,260px)}
.header.geschrompeld .logo-plateau .logo-beeld{height:54px}
@media(max-width:1100px){
  .logo-plateau .logo-beeld{height:56px}
  .header.geschrompeld .logo-plateau .logo-beeld{height:48px}
}
@media(max-width:640px){
  .logo-plateau .logo-beeld{height:40px;max-width:46vw}
  .header.geschrompeld .logo-plateau .logo-beeld{height:36px}
}
.footer .footer-logo .logo-beeld-donker{height:60px}

/* ---------- wizard: foto's en adres-autocomplete ---------- */
.calc-fotoknop{display:block;cursor:pointer}
.calc-fotoknop input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.calc-fotoknop-tekst{display:flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px dashed var(--accent);border-radius:12px;padding:16px 14px;
  font-size:14.5px;font-weight:600;color:var(--ink);background:rgba(var(--accent-rgb),.06);
  transition:background .3s var(--ease)}
.calc-fotoknop-tekst svg{width:20px;height:20px;stroke:var(--accent);fill:none}
.calc-fotoknop:hover .calc-fotoknop-tekst{background:rgba(var(--accent-rgb),.12)}
.calc-fotoknop input:focus-visible + .calc-fotoknop-tekst{outline:2px solid var(--accent);outline-offset:2px}
.calc-fotos{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
.calc-fotos:empty{display:none}
.calc-foto{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--tint2)}
.calc-foto img{width:100%;height:100%;object-fit:cover}
.calc-foto button{position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:16px;line-height:24px;cursor:pointer;padding:0}
.calc-fotohint{font-size:12px;color:#8a8177;margin-top:10px}
.calc-adresveld{position:relative}
.calc-adreslijst{position:absolute;left:0;right:0;top:100%;z-index:20;margin:2px 0 0;padding:6px 0;list-style:none;
  background:var(--wit);border:1px solid rgba(var(--ink-rgb),.14);border-radius:12px;
  box-shadow:0 14px 34px -12px rgba(var(--ink-rgb),.35);max-height:240px;overflow:auto;text-align:left}
.calc-adreslijst li{padding:10px 14px;font-size:14.5px;color:var(--ink);cursor:pointer}
.calc-adreslijst li:hover{background:var(--tint)}
.calc-hero .calc-stap-blok{min-height:300px}
.calc-hero .calc-velden .form-rij{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:640px){
  .calc-fotos{grid-template-columns:repeat(4,1fr)}
  .calc-hero .calc-velden .form-rij{grid-template-columns:1fr}
  .calc-hero .calc-stap-blok{min-height:0}
  .calc-velden .veld input{font-size:16px}   /* geen inzoomen op iOS bij focus */
}

/* ---------- mobiele header: logo en knop mogen elkaar nooit raken ---------- */
@media(max-width:640px){
  .logo-plateau{padding:0 12px}
  .logo-plateau .logo-beeld{height:40px;max-width:46vw}
  .header.geschrompeld .logo-plateau .logo-beeld{height:36px}
  .nav .knop{font-size:13.5px;padding:9px 12px 10px;margin-left:0}
  .hamburger{margin-left:4px}
}
@media(max-width:360px){
  .logo-plateau .logo-beeld{height:36px}
  .nav .knop{font-size:13px;padding:8px 10px 9px}
}

/* ---------- silo: verder lezen ---------- */
.silo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin-inline:auto}
.silo-kolom{background:var(--wit);border:1px solid rgba(var(--ink-rgb),.08);border-radius:16px;padding:20px 22px;text-align:left}
.silo-kolom h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-donker);margin-bottom:10px}
.silo-kolom ul{list-style:none;padding:0;margin:0}
.silo-kolom li{padding:5px 0;border-bottom:1px solid rgba(var(--ink-rgb),.06);font-size:14.5px}
.silo-kolom li:last-child{border-bottom:0}
.silo-kolom a{color:var(--ink);text-decoration:none}
.silo-kolom a:hover{color:var(--accent-donker);text-decoration:underline}
@media(max-width:900px){.silo-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.silo-grid{grid-template-columns:1fr;gap:14px}}

/* ---------- telefoon: staande uitsnede van dezelfde herofoto's (vaste regel) ---------- */
@media(max-width:900px){
  .hero-baan .hero-dia:nth-child(1){background-image:url('../img/hero-1-m.webp')!important}
  .hero-baan .hero-dia:nth-child(2){background-image:url('../img/hero-2-m.webp')!important}
  .hero-baan .hero-dia:nth-child(3){background-image:url('../img/hero-3-m.webp')!important}
  /* MOBIELE HERO-HOOGTE (garagedeurmonteurlimburg 03-11-2026): de hero met offertekaart is op de telefoon ~1650px hoog;
     met cover over die hoogte zag je alleen de bovenste strook van de foto. De foto beslaat nu een schermhoogte en loopt
     onderaan uit in de hero-achtergrond, zodat het onderwerp van de staande uitsnede in beeld is. */
  .hero-vloer .hero-baan{bottom:auto;height:max(100svh,640px);
    -webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}
}
/* MOBIELE HERO, kit v3.2 (03-11-2026, na garagedeur en parket): op de telefoon is een hero met offertekaart 1.300 tot
   1.700px hoog. Een foto met cover over die hele hoogte toont alleen een sterk ingezoomde middenstrook (onderwerp weg).
   Daarom beslaat de foto op ELKE hero met formulier (home .hero-vloer en subpagina's .geldhero) een schermhoogte en
   loopt hij in de laatste 45% zacht uit in de DONKERSTE merkkleur (--ink). Die kleur ligt dicht bij foto + donkere waas,
   dus er is geen zichtbare lijn; onder de foto staat de offertekaart op een egale donkere achtergrond (geen wit vlak).
   Gemeten op 390x844 en 390x660 (badkamer, parket, garagedeur): home, plaats, dienst en kosten. */
@media(max-width:900px){
  .hero.hero-vloer,.geldhero{background-color:var(--ink)}
  .geldhero .hero-foto{bottom:auto;height:max(100svh,640px);
    -webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}
}

/* ---------- tap-targets en leesbaarheid op de telefoon ---------- */
@media(max-width:640px){
  .silo-kolom li{padding:8px 0}
  .silo-kolom a,.footer li a{display:inline-block;padding:4px 0;min-height:24px}
  .zijbalk-blok li a{display:inline-block;padding:5px 0}
  .calc-gerust-mini,.calc-fotohint,.kortblok .kort-datum,.usp-c span{font-size:13px}
  .review-datum{font-size:13px}
}

/* ---------- strook met mensen aan het werk (onder het stappenplan) ---------- */
.werk-strook{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(36px,4vw,52px)}
.werk-strook figure{margin:0}
.werk-strook img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-kaart)}
.werk-strook figcaption{margin-top:10px;font-size:14.5px;color:var(--tekst);text-align:center}
@media(max-width:860px){.werk-strook{grid-template-columns:1fr;gap:18px}}

/* 16-10-2026: adreslijst loopt mee in de pagina in plaats van over knoppen te zweven */
.calc-adreslijst{position:static!important;margin:6px 0 0!important;max-height:none!important;box-shadow:none!important;text-align:left}
.calc-adreslijst li{min-height:44px;display:flex;align-items:center}
.calc-adreslijst li:nth-child(n+5){display:none}

/* =====================================================================================================
   KLUSKNOP-ONDERDELEN (gouden kit, 03-11-2026)
   ===================================================================================================== */
/* radiotegels: het label is de tegel, de radio zit onzichtbaar erin (codes als value, label zichtbaar) */
.calc-tegel{position:relative}
.calc-tegel input[type="radio"]{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.calc-tegel:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.10);transform:translateY(-1px)}
.calc-tegel:has(input:checked) svg{stroke:var(--petrol)}
.calc-tegel:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.calc-vraag{outline:none}
.calc-pills.klein .calc-tegel{padding:9px 6px}
.calc-pills.klein .calc-tegel b{font-size:12.5px}
.calc-label-klein{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:12px 0 6px}
.calc .veld label,.calc .veld .veldnaam{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px}
.calc .veld input{width:100%;padding:11px 13px;border:1.5px solid #e3e9e6;border-radius:10px;font-family:inherit;font-size:15px;color:var(--ink);background:var(--wit)}
.calc .veld input:focus{outline:none;border-color:var(--accent)}
.calc .veld input[aria-invalid="true"]{border-color:#c0392b}
.calc .veld-hint{display:block;font-size:12px;color:#7a7268;margin-top:4px}
.calc .veld{margin-bottom:10px;position:relative}
.calc-foutmelding[hidden]{display:none!important}
.calc-foutmelding:not([hidden]){display:block}
/* adres-suggesties (adres-foto.js) lopen mee in de kaart, net als de oude calc-adreslijst */
.adres-suggesties{list-style:none;margin:6px 0 0;padding:4px 0;background:var(--wit);border:1px solid rgba(var(--ink-rgb),.14);border-radius:12px;text-align:left}
.adres-suggesties[hidden]{display:none}
.adres-suggesties li{min-height:44px;display:flex;align-items:center;padding:8px 14px;font-size:14.5px;color:var(--ink);cursor:pointer}
.adres-suggesties li:hover,.adres-suggesties li:focus{background:var(--tint);outline:none}
.adres-suggesties li:nth-child(n+5){display:none}
/* foto's (adres-foto.js zet .foto-rij en .foto-melding in .foto-veld) */
.foto-veld{margin-top:12px}
.foto-knop{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;cursor:pointer;
  border:1.5px dashed var(--accent);border-radius:12px;padding:13px 14px;font-size:14.5px;font-weight:600;color:var(--ink);
  background:rgba(var(--accent-rgb),.06);transition:background .3s var(--ease)}
.foto-knop:hover{background:rgba(var(--accent-rgb),.12)}
.foto-knop svg{width:20px;height:20px;stroke:var(--accent);fill:none;flex:0 0 20px}
.foto-knop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.foto-rij{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:10px}
.foto-rij:empty{display:none}
.foto-kaart{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--tint2)}
.foto-kaart img{width:100%;height:100%;object-fit:cover}
.foto-weg{position:absolute;top:3px;right:3px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:16px;line-height:24px;padding:0;cursor:pointer}
.foto-melding{font-size:12.5px;color:#7a7268;margin-top:6px}
.foto-melding:empty{display:none}
.calc-optioneel{font-size:12.5px;color:#7a7268;margin-top:6px}
/* samenvatting in stap 4 */
.calc-samen{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--tint);border-radius:10px;padding:9px 12px;margin-bottom:12px}
.calc-samen[hidden]{display:none}
.calc-samenvatting{font-size:13.5px;color:var(--ink);margin:0}
.calc-wijzig{background:none;border:0;color:var(--accent-donker);font-weight:700;font-family:inherit;font-size:13.5px;cursor:pointer;text-decoration:underline;min-height:32px}
/* de vaste bemiddelingszin (AVG) onder de verzendknop */
.calc-avg{font-size:12.5px;line-height:1.45;color:#7a7268;margin-top:12px;text-align:center}
.calc-avg a{color:var(--accent-donker)}
.honing{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
@media(max-width:640px){
  .calc .veld input{font-size:16px}
  .foto-rij{grid-template-columns:repeat(4,1fr)}
}
/* logo: hetzelfde bestand overal; in de zwarte footer op een eigen wit plateau (geen witte variant) */
.footer .footer-logo{display:inline-block;background:var(--wit);border-radius:16px;padding:12px 16px;margin-bottom:18px}
.footer .footer-logo img{height:56px;width:auto;display:block}
.footer-onder .veo{display:block;margin-top:6px;opacity:.85}
/* zwevende knop wijkt zolang het formulier zelf in beeld is */
.zwevend-knop.verborgen{opacity:0;pointer-events:none;transform:translateY(12px)}
.zwevend-knop{transition:opacity .4s var(--ease),transform .4s var(--ease)}
/* bronnenlijst onder de tekst */
.bronnen{max-width:840px;margin:28px auto 0;text-align:left;font-size:13.5px;color:var(--tekst)}
.bronnen b{display:block;color:var(--ink);margin-bottom:6px;font-size:14px}
.bronnen ul{list-style:none;padding:0;margin:0}
.bronnen li{padding:3px 0;overflow-wrap:anywhere}
.bronnen a{color:var(--accent-donker)}
/* feitenbalk op plaatspagina's: getallen uit CBS met bron */
.feiten-balk{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;max-width:900px;margin-inline:auto}
.feiten-balk>div{background:var(--wit);border:1px solid rgba(var(--ink-rgb),.08);border-radius:14px;padding:14px 12px;text-align:center}
.feiten-balk b{display:block;font-size:20px;color:var(--ink)}
.feiten-balk span{display:block;font-size:13px;color:var(--tekst);margin-top:2px}
/* tekstkaarten zonder foto (situaties en tips op de homepage) */
.tekstkaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:var(--schaduw);padding:24px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.tekstkaart h3{font-size:18px}
.tekstkaart p{font-size:14.5px;color:var(--tekst)}
.tekstkaart .tekstlink{margin-top:auto}
.tekstkaart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tekstkaart-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.tekstkaart-grid,.tekstkaart-grid:has(> :nth-child(4):last-child){grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tekstkaart-grid,.tekstkaart-grid:has(> :nth-child(4):last-child){grid-template-columns:1fr}}
.illustratie-label{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 7px;border-radius:6px}
/* cijferbalk: vier cijfers altijd op een rij op desktop (lange labels braken naar 3+1) */
@media(min-width:901px){.usp-cijfers{display:grid;grid-template-columns:repeat(4,1fr);max-width:1180px;margin-inline:auto}
  .usp-cijfers .usp-c{padding:2px 18px}}
/* mobiele header: een breed woordmerk-logo plus de knop passen niet naast elkaar; de knop staat dan in hero en zwevend */
@media(max-width:520px){
  .nav .knop.knop-accent{display:none}
  .logo-plateau .logo-beeld{height:34px;max-width:62vw}
  .header.geschrompeld .logo-plateau .logo-beeld{height:30px}
}
/* CTA halverwege de pagina (RANKEN 03-11-2026): passend bij het onderwerp, springt naar het formulier */
.cta-midden{max-width:840px;margin:30px auto;background:var(--tint);border:1px solid rgba(var(--accent-rgb),.25);border-radius:16px;padding:20px 24px;text-align:center}
.cta-midden p{font-size:15.5px;color:var(--ink);margin:0 0 12px}
.cta-midden .knop{margin:0}
#aanvraag{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ============================================================
   KWALITEITSCONTROLE 03-11-2026 (proefsite badkamerrenovatielimburg)
   ============================================================ */
/* header: doorzichtig over de hero, na het scrollen een dekkende achtergrond in de donkere huisstijlkleur
   (CLAUDE.md 14-10-2026, vervangt de oude regel "altijd doorzichtig"); logo en menu blijven gelijk */
.header{z-index:60;transition:background-color .4s ease}
.header.geschrompeld{background-color:rgba(var(--ink-rgb),.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* hero met offertekaart: op lage desktopschermen past alles (kop, vinkjes, knoppen, kaart) in het eerste scherm */
@media(min-width:1024px) and (max-height:860px){
  .hero-duo{padding-top:calc(var(--header-h) + 14px);padding-bottom:26px;align-items:start}
  .hero-duo .hero-tekst{padding-top:clamp(18px,7vh,70px)}
  .hero-duo .hero-titel{font-size:clamp(28px,3vw,40px)}
  .hero-vinkjes{margin-top:14px}
  .hero-vinkjes li{margin-bottom:6px}
  .calc-hero{padding:20px 24px}
  .calc-hero .calc-ondertitel{margin-bottom:10px}
  .calc-hero .calc-voortgang{margin-bottom:10px}
  .calc-hero .calc-tegel{padding:9px 6px}
  .calc-hero .calc-stap-blok{min-height:200px}
  .calc-hero .calc-acties{padding-top:10px}
}

/* zwevende knop op mobiel: compact (dekt minder af) en weg tijdens het naar beneden scrollen (aanvraag.js) */
.zwevend-knop{font-size:14px;padding:10px 16px;gap:6px}
.zwevend-knop svg{width:14px;height:14px}

/* eyebrows: overal dezelfde stijl (accentkleur, geen rand), ook de pill-variant en het label in Kort samengevat */
.eyebrow-pill{background:none;border:0;border-radius:0;padding:0;color:var(--accent);letter-spacing:.18em;margin-bottom:14px}
.kortblok .kort-label{color:var(--accent)}
/* tag in de donkere artikelhero: leesbaar wit op een licht vlak */
.pagina-hero .artikel-meta .tip-tag{background:rgba(255,255,255,.18);color:#fff}
.kortblok{margin-bottom:22px}

/* knop in de zijbalk: witte tekst (de linkkleur van de zijbalk gold ook voor de knop) */
.zijbalk-blok a.knop{color:var(--op-accent);text-decoration:none}
.zijbalk-blok a.knop:hover{text-decoration:none}

/* tijdlijn: ruimte voor de schaduw van de rechterkaarten (overflow-x:clip sneed ze af) */
.tijdlijn-vert{padding:10px 16px;max-width:892px}

/* kaarten met beeld op de home (situaties, kennisbank): zelfde opbouw als de dienstkaarten */
.tekstkaart.met-beeld{padding-top:0;overflow:hidden}
.tekstkaart-beeld{margin:0 -22px 6px;aspect-ratio:16/10;overflow:hidden}
.tekstkaart-beeld img{width:100%;height:100%;object-fit:cover;display:block}

/* juridische pagina's en Alle pagina's: minder lege ruimte, bredere kolom, links in de huisstijl */
.sectie:has(> .juridisch){padding-top:clamp(36px,4vw,56px)}
.juridisch{max-width:960px}
.juridisch ul{padding-left:0}
.juridisch ul li{margin-bottom:8px;break-inside:avoid}
.juridisch a{color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.35);transition:border-color .3s var(--ease)}
.juridisch a:hover{border-bottom-color:var(--accent)}
/* CTA-band boven de footer: de band hangt 90px over de footer (margin-bottom:-90px). In de leadsites staat de band in
   <main> en de footer erna, dus ".cta-strook + .footer" uit stijl.css greep niet: footerkoppen vielen onder de band. */
body:has(.cta-strook) .footer{padding-top:calc(clamp(56px,7vw,80px) + 90px)}
/* plaatsknoppen op de home: eigen klasse (geen tweede knopstijl naast de accentknop) */
.plaats-chip{display:inline-block;margin:5px;padding:10px 18px;border:1.5px solid rgba(var(--ink-rgb),.35);border-radius:8px;
  color:var(--ink);background:var(--wit);text-decoration:none;font-weight:500;font-size:15px;transition:border-color .3s var(--ease),color .3s var(--ease)}
.plaats-chip:hover{border-color:var(--accent);color:var(--accent-donker)}

/* ============================================================
   KWALITEITSCONTROLE RONDE 3 (03-11-2026)
   ============================================================ */
/* eyebrows: overal dezelfde ronde pill met een rand in de accentkleur (vaste eyebrow-regel), ook in de hero */
.eyebrow,.eyebrow-pill{display:inline-block;background:transparent;border:1px solid var(--accent);color:var(--ink);
  border-radius:999px;padding:8px 20px;text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:600;margin-bottom:16px}
.calc-hero .eyebrow{padding:6px 14px;font-size:11.5px;margin-bottom:10px}
.hero-label{display:inline-block;border:1px solid var(--accent);border-radius:999px;padding:7px 18px;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--wit);margin-bottom:18px}
/* alle h1's in zinsvorm (home-hero en hubs stonden in hoofdletters) */
.hero-titel,.pagina-hero h1,.geldhero h1{text-transform:none}
/* logovak even hoog als de header, logo verticaal in het midden */
:root{--plateau-h:var(--header-h)}
.logo-plateau{height:var(--header-h);padding-bottom:0}
/* focusrand alleen bij toetsenbordgebruik */
.hamburger:focus:not(:focus-visible){outline:none}
/* footer-vinkjes op mobiel in een kolom */
@media(max-width:900px){.footer-boven>div:first-child ul{display:block;columns:1;grid-template-columns:1fr;width:fit-content;margin-inline:auto;text-align:left}
  .footer-boven>div:first-child ul li{margin-bottom:8px}}
/* mobiele hero: lichtere waas, zodat de badkamer herkenbaar blijft */
@media(max-width:1023px){
  .hero-vloer .hero-dia::after,.geldhero .hero-foto::after{
    background:linear-gradient(180deg,rgba(var(--ink-rgb),.62) 0%,rgba(var(--ink-rgb),.48) 45%,rgba(var(--ink-rgb),.70) 100%)}
}
.calc .eyebrow,.calc-hero .eyebrow{display:inline-block;width:auto}

/* ============================================================
   KIT v3 (03-11-2026): dienst-, plaats-, kosten-, situatie- en keuzepagina's in de artikelopbouw
   ============================================================ */
.artikel-layout>*{min-width:0}   /* een brede feitenbalk of tabel mag de kolom nooit breder maken dan het scherm */
.artikel-inhoud .feiten-balk{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));max-width:none;margin:24px 0}
@media(max-width:640px){.artikel-inhoud .feiten-balk{grid-template-columns:repeat(2,minmax(0,1fr))}}
.artikel-inhoud .fotogrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:640px){.artikel-inhoud .fotogrid{grid-template-columns:1fr 1fr!important}.artikel-inhoud .fotogrid>*:nth-child(3){grid-column:1/-1}}
.artikel-inhoud .tabelwrap{margin:8px 0 6px}
.artikel-inhoud .cta-midden{margin-inline:0}
.artikel-inhoud h3{font-size:18px}

/* ============================================================
   KIT v3.1 (03-11-2026, na kwaliteitscontrole ronde 4)
   ============================================================ */
/* herofoto's: waas ~50% (links iets donkerder voor de tekst), foto blijft zichtbaar; tekstschaduw houdt wit leesbaar */
.hero-vloer .hero-dia::after,.geldhero .hero-foto::after{
  background:linear-gradient(90deg,rgba(var(--ink-rgb),.62) 0%,rgba(var(--ink-rgb),.50) 50%,rgba(var(--ink-rgb),.40) 100%)}
.pagina-hero::before{background:linear-gradient(90deg,rgba(var(--ink-rgb),.58),rgba(var(--ink-rgb),.48));opacity:1}
@media(max-width:1023px){
  .hero-vloer .hero-dia::after,.geldhero .hero-foto::after{
    background:linear-gradient(180deg,rgba(var(--ink-rgb),.55) 0%,rgba(var(--ink-rgb),.50) 50%,rgba(var(--ink-rgb),.58) 100%)}
}
.hero-titel,.geldhero h1,.pagina-hero h1,.hero-sub,.geldhero .hero-sub,.hero-vinkjes li,.hero-label,.pagina-hero .artikel-meta{
  text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 16px rgba(0,0,0,.35)}

/* hero-offertekaart past op lage desktopschermen (1280x720, 1366x768) volledig binnen 100svh minus de header */
@media(min-width:1024px) and (max-height:940px){
  .hero-duo{padding-top:calc(var(--header-h) + 10px);padding-bottom:16px}
  .calc-hero{padding:14px 22px 12px;border-radius:20px}
  .calc-hero .eyebrow{padding:4px 12px;font-size:10.5px;margin-bottom:6px}
  .calc-hero .calc-kop{font-size:18px;margin-bottom:2px}
  .calc-hero .calc-ondertitel{font-size:12.5px;line-height:1.4;margin-bottom:8px}
  .calc-hero .calc-voortgang{margin-bottom:6px}
  .calc-hero .calc-stapnr{margin-bottom:2px}
  .calc-hero .calc h3{font-size:15.5px;margin-bottom:2px}
  .calc-hero .calc .calc-sub{font-size:12px;margin-bottom:8px}
  .calc-hero .calc-tegels{gap:7px}
  .calc-hero .calc-tegel{padding:7px 6px}
  .calc-hero .calc-tegel svg{width:16px;height:16px;margin-bottom:3px}
  .calc-hero .calc-tegel b{font-size:12px}
  .calc-hero .calc-stap-blok{min-height:0}
  .calc-hero .calc-acties{padding-top:8px}
  .calc-hero .calc-volgende{padding-top:11px;padding-bottom:11px}
  .calc-hero .calc-gerust-mini{display:none}          /* staan al als vinkjes in de hero ernaast */
  .calc-hero .calc-avg{font-size:11.5px;line-height:1.35;margin-top:6px}
}

/* zwevende knop: nooit over de laatste regels; onderaan ruimte = knophoogte + 16px */
@media(max-width:900px){.footer{padding-bottom:56px}}
.calc>.eyebrow{align-self:flex-start;justify-self:start}   /* .calc is soms flex/grid: geen uitgerekte pill */

/* PAGINA-HERO ZIJMARGE (parketvloerenlimburg 03-11-2026): de kop van kennisartikelen, offerte en hubs (.pagina-hero) had op
   390px geen zijruimte; een lange h1 liep tot tegen de schermrand. */
.pagina-hero>div{padding-inline:20px;box-sizing:border-box;max-width:100%}
@media(max-width:640px){.pagina-hero>div{padding-inline:16px}}

/* ============================================================
   KIT v3.3 (03-11-2026, fixes van boomverzorgerlimburg en anderen)
   ============================================================ */
/* /alle-paginas/: twee kolommen (inline columns:2) gaven op 375/390 zijwaarts scrollen bij lange woorden */
@media(max-width:600px){.juridisch ul[style*="columns"]{columns:1!important}}
.juridisch li a{overflow-wrap:anywhere}
/* paginahero: zijruimte en een gebalanceerde, begrensde titel (lange h1's liepen op 1280 van rand tot rand) */
.pagina-hero{padding-left:24px;padding-right:24px}
.pagina-hero h1{max-width:1100px;margin-inline:auto;text-wrap:balance}
@media(max-width:640px){.pagina-hero{padding-left:16px;padding-right:16px}}
/* cijferbalk en feitenbalk: labels afbreken met een koppelteken op lettergreep (lang="nl"), nooit midden in een woord */
.usp-c span,.feiten-balk span,.feiten-balk b,.feiten-balk div{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;word-break:normal}
/* van sloopwerklimburg (QC): secundaire knop in het CTA-blok transparant met witte rand (geen kleur buiten het palet) */
.cta-blok .knop-licht{background:transparent;color:var(--wit);border:2px solid rgba(255,255,255,.88)}
.cta-blok .knop-licht:hover{background:rgba(255,255,255,.12)}
/* hero-offertekaart op desktop: geen gereserveerde lege ruimte tussen keuzetegels en knop */
@media(min-width:1024px){.calc-hero .calc-stap-blok{min-height:0}}
.pagina-hero h1{overflow-wrap:break-word}

/* header-waas (03-11-2026, laadpaalinstallateurlimburg): de gradient uit stijl.css is 140px hoog terwijl de header op mobiel
   76px en op desktop 106px is; daardoor eindigde de waas met een harde lijn op lichte herofoto's (lucht). Nu loopt hij precies
   tot de onderkant van de header uit naar doorzichtig. */
.header{background-size:100% 100%}

/* mobiele heroversie op subpagina's (04-11-2026, laadpaalinstallateurlimburg): genereer.py preloadde foto-m.webp op mobiel maar
   toonde de brede foto; nu toont de hero de staande uitsnede als die bestaat (--hero-m in de inline style) */
@media(max-width:900px){.geldhero .hero-foto[style*="--hero-m"]{background-image:var(--hero-m)!important}}

/* hero-kop zonder wees-woord (04-11-2026, ongediertebestrijderlimburg): de wisselende hero-titels braken af met een los woord
   ("is") op de tweede regel met regelafstand 1.5. Nu gebalanceerd en met een strakkere regelafstand. */
.hero-titel{text-wrap:balance;line-height:1.2}
/* focusrand hamburger in de huisstijl (04-11-2026, ongediertebestrijderlimburg): de controleur zag de blauwe standaardrand
   van de browser na toetsenbordfocus; nu de accentkleur met wat ruimte, zoals de andere focusranden */
.hamburger:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;box-shadow:none}

/* losse woorden in de gedeelde CTA-kop (04-11-2026, ongediertebestrijderlimburg): "regio" stond alleen op de tweede regel */
.cta-blok h2{text-wrap:balance}
/* offertekaart in de hero: nergens de extra vinkjesrij (04-11-2026, ongediertebestrijderlimburg): die stond alleen op 1920 en 2560,
   de hero ernaast heeft dezelfde vinkjes al */
.calc-hero .calc-gerust-mini{display:none}