/* Vochtbestrijder Utrecht - aanvullingen op de gouden template (stijl.css).
   Bevat: hero met het offerteformulier rechts (vaste regel 14-09-2026), de
   compacte offertekaart, het Kort-samengevat-blok, responsieve tabellen en de
   kleine componenten van deze site. Vormgeving volgt stijl.css. */

/* ---------- 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:#5c6670;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:13px;color:#6b7680;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-eyebrow{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:13px;color:#6b7680}

/* ---------- 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:13px;color:#6b7680;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:420px){
  .logo-plateau .logo-beeld,.header.geschrompeld .logo-plateau .logo-beeld{height:34px;max-width:40vw}
}
@media(max-width:360px){
  .logo-plateau .logo-beeld,.header.geschrompeld .logo-plateau .logo-beeld{height:31px}
  .nav .knop{font-size:13px;padding:8px 10px 9px}
}
@media(max-width:340px){
  .nav > .knop{display:none}   /* zwevende knop "Aanvraag doen" neemt het over */
}

/* ---------- 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}
}

/* ---------- 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}}
.footer-doorgeef{max-width:1360px;margin:0 auto;padding:0 0 22px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.72)}
@media(max-width:640px){.footer-doorgeef{text-align:center}}

.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foto-veld,.of-veld{position:relative}
.adres-suggesties{position:absolute;left:0;right:0;top:100%;z-index:30;margin:4px 0 0;padding:6px 0;list-style:none;background:#fff;border:1px solid #d5dedb;border-radius:10px;box-shadow:0 10px 26px -8px rgba(0,0,0,.25);max-height:240px;overflow:auto}
.adres-suggesties li{padding:10px 14px;font-size:15px;cursor:pointer;color:var(--ink)}
.adres-suggesties li:hover{background:rgba(var(--accent-rgb),.08)}
.veld input[type="file"]{padding:10px 0;font-size:14px}
.foto-rij{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.foto-kaart{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid #d5dedb;background:#f6f6f6}
.foto-kaart img{width:100%;height:100%;object-fit:cover;display:block}
.foto-weg{position:absolute;top:2px;right:2px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:22px;cursor:pointer;padding:0}
.foto-melding{margin:6px 0 0;font-size:13px;color:var(--tekst)}
.foto-melding:empty{display:none}
.foto-knop{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1.5px dashed var(--accent);border-radius:10px;background:#fff;color:var(--accent-diep,var(--accent));font-size:15px;font-weight:700;cursor:pointer}
.foto-knop:hover{background:rgba(var(--accent-rgb),.08)}
.foto-knop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.foto-knop:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* =====================================================================
   SNELFORMULIER (pilot 13-10-2026). Vier stappen, tikbare kaarten met icoon,
   stappenbalk met korte labels, ronde knop. Opbouw en regels:
   ~/WERKWIJK/opdrachten/SNELFORMULIER-COMPONENT.md
   ===================================================================== */
.offerte{--of-lijn:#dbe3e0;--of-tint:rgba(var(--accent-rgb),.12);--of-tint-licht:rgba(var(--accent-rgb),.05);--of-schaduw:rgba(var(--accent-rgb),.55);
  position:relative;background:#fff;color:var(--ink);border-radius:18px;padding:26px 26px 22px;
  box-shadow:0 30px 70px -32px rgba(0,0,0,.65);text-align:left}
.of-kop{text-align:center;margin:0 0 18px}
.of-eyebrow{display:inline-block;border:1px solid var(--accent);color:var(--ink);border-radius:999px;
  padding:5px 14px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.offerte h2{font-size:24px;line-height:1.2;margin:0 0 4px}
.offerte .sub{font-size:14.5px;color:var(--tekst);margin:0}
.of-voortgang{margin:0 0 20px}
.of-spoor{height:6px;border-radius:99px;background:#e3e9e6;overflow:hidden}
.of-spoor i{display:block;height:100%;width:25%;border-radius:inherit;
  background:linear-gradient(90deg,var(--accent),var(--accent-donker));transition:width .5s cubic-bezier(.22,.61,.36,1)}
.of-labels{display:flex;justify-content:space-between;gap:6px;list-style:none;padding:0;margin:9px 0 0}
.of-labels li{margin:0;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:#8a949a;text-align:center;transition:color .3s}
.of-labels li.aan{color:var(--accent-donker)}
.of-teller{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.of-stappen{position:relative}
.of-terug{position:absolute;left:-10px;top:-10px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;
  background:transparent;color:var(--tekst);display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .25s,color .25s}
.of-terug:hover{background:var(--tint2);color:var(--ink)}
.of-terug[hidden]{display:none}
.offerte .of-stap{display:none}
.offerte .of-stap.actief{display:block;animation:of-in .45s cubic-bezier(.22,.61,.36,1)}
@keyframes of-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.offerte .vraag{font-size:19px;font-weight:750;line-height:1.3;text-align:center;margin:0 34px 4px;outline:none;color:var(--ink)}
.of-hint{font-size:14px;color:var(--tekst);text-align:center;margin:0 0 14px}
.offerte .vraag+:not(.of-hint){margin-top:16px}
/* keuzekaarten */
.of-tegels{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.of-tegel{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:11px 12px;
  border:1.5px solid var(--of-lijn);border-radius:14px;background:#fff;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s,background .25s,box-shadow .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
.of-tegel input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.of-ic{flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:var(--of-tint);color:var(--accent);
  display:grid;place-items:center;transition:background .25s,color .25s}
.of-label{font-size:15px;font-weight:650;line-height:1.25;color:var(--ink)}
.of-check{position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:50%;background:var(--accent);
  color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .25s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){
  .of-tegel:hover{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 12px 26px -18px var(--of-schaduw);transform:translateY(-1px)}
}
.of-tegel:active{transform:scale(.98)}
.of-tegel:has(input:checked){border-color:var(--accent);background:var(--of-tint-licht);box-shadow:0 12px 26px -18px var(--of-schaduw)}
.of-tegel input:checked~.of-ic{background:var(--accent);color:#fff}
.of-tegel input:checked~.of-check{transform:scale(1)}
.of-tegel:has(input:focus-visible){outline:3px solid rgba(var(--accent-rgb),.4);outline-offset:2px}
/* velden */
.of-veld{display:block;position:relative;margin:0 0 12px}
.of-veld>span{display:block;font-size:13.5px;font-weight:700;color:var(--tekst);margin:0 0 6px}
.of-veld em{font-style:normal;font-weight:500}
.of-veld input{width:100%;min-height:50px;border:1.5px solid var(--of-lijn);border-radius:12px;padding:12px 14px;
  font:inherit;font-size:16px;line-height:1.3;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.of-veld input::placeholder{color:#9aa3a8}
.of-veld input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14)}
.offerte [aria-invalid="true"]{border-color:#C0392B;box-shadow:0 0 0 4px rgba(192,57,43,.12)}
.of-foto{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:2px 0 16px}
.of-foto .foto-knop{min-height:44px;padding:10px 16px;border-radius:999px;font-size:14.5px;gap:8px}
.of-foto .foto-rij,.of-foto .foto-melding{flex:0 0 100%}
.of-optioneel{font-size:13px;color:var(--tekst)}
.offerte .fout{background:#FDECEC;border:1px solid #F4C7C7;color:#8C1F1F;border-radius:10px;padding:10px 13px;
  font-size:14px;line-height:1.45;margin:0 0 12px;text-align:center}
.offerte .of-stap>.fout:last-child,.of-tegels+.fout{margin:12px 0 0}
.offerte .fout[hidden]{display:none}
/* knop */
.of-knop{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:54px;margin:6px 0 0;
  padding:14px 26px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:inherit;font-size:16.5px;
  font-weight:750;cursor:pointer;box-shadow:0 14px 30px -14px rgba(var(--accent-rgb),.8);
  transition:background .25s,transform .25s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover){.of-knop:hover{background:var(--accent-donker);transform:translateY(-1px)}}
.of-knop:focus-visible{outline:3px solid rgba(var(--accent-rgb),.45);outline-offset:3px}
.of-knop[disabled]{cursor:progress;background:var(--accent-donker);transform:none}
.of-doorgeef{font-size:12.5px;line-height:1.55;color:var(--tekst);text-align:center;margin:12px 0 0}
.of-doorgeef a{color:inherit}
/* zonder JavaScript: alle stappen onder elkaar, gewoon versturen */
html.no-js .offerte .of-stap{display:block;margin-bottom:22px}
html.no-js .offerte [data-volgende],html.no-js .of-voortgang,html.no-js .of-terug{display:none}
@media (prefers-reduced-motion:reduce){
  .offerte .of-stap.actief{animation:none}
  .of-tegel,.of-check,.of-spoor i{transition:none}
}

/* telefoon: kaarten met icoon gecentreerd boven de tekst */
@media (max-width:560px){
  .offerte{padding:20px 14px 18px;border-radius:16px}
  .offerte h2{font-size:21px}
  .offerte .sub{font-size:14px}
  .of-kop{margin-bottom:14px}
  .of-voortgang{margin-bottom:16px}
  .of-labels li{font-size:10.5px;letter-spacing:.05em}
  .offerte .vraag{font-size:18px}
  .of-tegel{flex-direction:column;justify-content:center;text-align:center;gap:7px;min-height:92px;padding:12px 8px}
  .of-ic{flex:0 0 auto;width:38px;height:38px}
  .of-label{font-size:14.5px}
  .of-veld>span{text-align:center}
  .of-foto{justify-content:center;text-align:center}
}



/* inpassing in template 4: kaart in de hero, losse kaart op de offertepagina */
.of-wrap{width:100%;min-width:0}
.of-wrap.of-groot{max-width:680px;margin-inline:auto}
.offerte{box-shadow:0 24px 60px -28px rgba(0,0,0,.55)}
.of-spoor i{background:linear-gradient(90deg,var(--accent),var(--accent-donker))}
.of-labels li.aan{color:var(--accent-donker)}
.of-tegel input:checked~.of-ic{color:var(--op-accent)}
.of-check{color:var(--op-accent)}
.of-knop{color:var(--op-accent)}
.of-knop:focus-visible{outline-color:rgba(var(--accent-rgb),.5)}
.offerte .of-hint{margin-top:0}
.of-eyebrow{font-size:11.5px}
/* zwevende knop (mobiel): weg zodra het formulier in beeld is */
.zwevend-knop{transition:transform .45s var(--ease),opacity .45s var(--ease),visibility 0s}
.zwevend-knop.weg{transform:translateY(calc(100% + 40px));opacity:0;visibility:hidden;pointer-events:none}
@media print{.of-wrap{display:none!important}}

/* =====================================================================
   Rustiger mobiel beeld (fase A, 13-10-2026): kop, een korte zin, drie vinkjes,
   dan meteen het formulier. De lange hero-tekst staat eronder. Alles gecentreerd.
   ===================================================================== */
.hero-zin,.hero-vinken{display:none}
@media(max-width:720px){
  .hero-duo{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:calc(var(--header-h) + 20px) 18px 34px}
  .hero-duo .hero-tekst{display:contents}
  .hero-duo .hero-label{display:none}
  .hero-duo h1{order:2;text-align:center;font-size:26px;line-height:1.25;margin:0;max-width:none}
  .hero-duo .hero-zin{display:block;order:3;margin:0;text-align:center;color:#fff;font-size:16.5px;line-height:1.5;opacity:.95}
  .hero-duo .hero-vinken{display:grid;order:4;gap:6px;list-style:none;padding:0;margin:2px auto 6px;width:fit-content;max-width:100%;text-align:left}
  .hero-duo .hero-vinken li{display:flex;align-items:flex-start;gap:9px;margin:0;color:#fff;font-weight:600;font-size:15.5px;line-height:1.35}
  .hero-duo .hero-vinken li svg{width:17px;height:17px;flex:0 0 17px;margin-top:2px}
  .hero-duo .of-wrap{order:5}
  .hero-duo .hero-sub{order:6;margin:8px auto 0;padding:0;text-align:center;font-size:15.5px;line-height:1.6;max-width:none}
  .hero-duo .hero-sub.hero-sub-dubbel{display:none}
  .hero-duo .hero-vinkjes,.hero-duo .hero-knoppen{display:none}
  .usp-balk{display:none}
  .kortblok{text-align:center}
  .of-wrap.of-groot{max-width:none}
}

/* tikdoel: knop in de header minimaal 44px hoog */
.nav .knop{min-height:44px;display:inline-flex;align-items:center}

/* paragrafen onder elkaar krijgen lucht; het vinkje van de lijst komt al uit de svg (niet dubbel) */
p.reveal+p.reveal{margin-top:16px}
.uniek-vinkjes li::before{display:none}
@media(max-width:720px){
  section h2,section h3,section p,.container p,.container h2,.container h3,.artikel-inhoud p,.artikel-inhoud h2,.artikel-inhoud h3,.faq p,.faq summary{text-align:center}
  .container p.kort-datum,.kortblok .kort-datum{text-align:center}
  .silo-kolom,.silo-kolom h3,.silo-kolom li,.silo-kolom a{text-align:center}
  .silo-kolom ul{padding-left:0}
}