/* De Trapliftcentrale - 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:#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-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: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}
  /* dit logo is breder (4,1:1) dan dat van de referentiesite: 46vw raakte de knop */
  .logo-plateau .logo-beeld{height:40px;max-width:37vw}
  .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}
}

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

/* =====================================================================
   DE TRAPLIFTCENTRALE: palet en senior-vriendelijke laag (05-10-2026)
   Rustig bosgroen als drager, terracotta als accent, grotere letters,
   grotere knoppen en veel contrast: de doelgroep is 70+ en hun kinderen.
   ===================================================================== */
:root{
  --ink:#173d35; --petrol:#2b6656; --accent:#b0501d;
  --tint:#edf4f1; --tint2:#e5eeea; --tint3:#d9e7e0; --salie:#b9d0c6; --bg:#f7faf8;
  --accent-donker:#8f3f15; --petrol-donker:#1f4f42; --ink-donker:#0f2a24;
  --tekst:#2c3a36; --op-accent:#ffffff;
  --accent-rgb:176,80,29; --petrol-rgb:43,102,86; --ink-rgb:23,61,53;
}
body{font-size:18px;line-height:1.6}
p{font-size:18px;line-height:1.65}
.artikel-inhoud p{font-size:18px;line-height:1.7}
.kortblok p{font-size:17.5px;line-height:1.6}
.kortblok .kort-datum{font-size:14px;color:#55625e}
.faq summary{font-size:17.5px}
.faq details p{font-size:17px}
.knop{font-size:18px;padding:15px 26px 16px;min-height:52px}
.tekstlink{font-size:18px}
.nav-links>a,.nav .heeft-sub>a{font-size:16.5px}
.submenu a{font-size:16px}
.silo-kolom li{font-size:16px}
.footer li,.footer li a{font-size:16px}
.hero-vinkjes li{font-size:17px}
.hero-sub{font-size:18.5px}
.geldhero .hero-sub{font-size:18px}
.calc-tegel b{font-size:15px}
.calc-hero .calc-tegel b{font-size:14px}
.calc h3{font-size:20px}
.calc-hero .calc h3{font-size:18.5px}
.calc .calc-sub{font-size:15px}
.calc-hero .calc .calc-sub{font-size:14.5px}
.calc-pills .calc-tegel b,.calc-hero .calc-pills .calc-tegel b{font-size:14.5px}
.calc-pills .calc-tegel{min-height:54px}
.calc-velden .veld label,.calc-hero .calc-velden .veld label{font-size:14.5px}
.calc-velden .veld input,.calc-hero .calc-velden .veld input{font-size:17px;padding:12px 14px}
.calc-volgende{font-size:18px}
.calc-foutmelding{font-size:15.5px;font-weight:600}
.calc-gerust-mini{font-size:13.5px;color:#55625e}
.calc-hero .calc-ondertitel{font-size:14.5px;color:#55625e}
.calc-fotohint{color:#55625e}
.review p{font-size:16px}
@media(max-width:640px){
  body,p{font-size:17.5px}
  .knop{font-size:17px}
}

/* ---------- belknop: gelijkwaardige CTA naast de offerteknop ---------- */
.nav-bel{display:inline-flex;align-items:center;gap:8px;color:var(--wit);background:transparent;
  border:2px solid rgba(255,255,255,.75);border-radius:var(--r-knop);padding:9px 15px;margin-right:10px;
  font:600 16px/1.1 inherit;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background-color .3s var(--ease)}
.nav-bel svg{width:18px;height:18px}
.nav-bel:hover{background:rgba(255,255,255,.14)}
@media(max-width:1200px){.nav-bel{display:none}}
.knop-bel,.knop-bel-hero{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.knop-bel{background:var(--wit);color:var(--petrol);border:2px solid var(--petrol)}
.knop-bel:hover{background:var(--tint)}
.knop-bel-hero{background:transparent;color:var(--wit);border:2px solid rgba(255,255,255,.85)}
.knop-bel-hero:hover{background:rgba(255,255,255,.14)}
.knop-bel svg,.knop-bel-hero svg{width:20px;height:20px;flex:0 0 20px}
.knop-licht.terugbel-open,.knop-licht[href^="tel:"]{display:inline-flex;align-items:center;gap:9px;font-family:inherit;border:0;cursor:pointer}
.knop-licht svg{width:20px;height:20px}
.hero-bel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:20px 0 4px}
.hero-bel span{color:var(--wit);font-size:16.5px;opacity:.95}
.hero-bel .knop{padding:11px 20px 12px;min-height:48px;font-size:17px}
@media(min-width:1024px){.hero-bel{justify-content:flex-start}}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
@media(min-width:1024px){.hero-knoppen{justify-content:flex-start}}
.knop-tekst{background:none;border:0;padding:0;color:var(--accent-donker);font:inherit;font-weight:700;
  cursor:pointer;text-decoration:underline;display:inline-flex;align-items:center;gap:8px}
.knop-tekst svg{width:18px;height:18px}

/* ---------- tussen-CTA: nooit meer dan ~600 woorden zonder knop ---------- */
.tussen-cta{max-width:840px;margin:34px auto;background:var(--tint);border-radius:16px;
  padding:22px 24px;text-align:center;border:1px solid rgba(var(--ink-rgb),.08)}
.tussen-cta p{font-weight:600;color:var(--ink);margin:0 0 14px}
.tussen-knoppen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.sectie-tint2 .tussen-cta,.sectie-grijs .tussen-cta{background:var(--wit)}

/* ---------- terugbelverzoek (dialoog) ---------- */
.terugbel-dialoog{border:0;border-radius:20px;padding:0;width:calc(100% - 32px);max-width:460px;
  box-shadow:0 30px 70px -20px rgba(var(--ink-rgb),.55);color:var(--ink)}
.terugbel-dialoog::backdrop{background:rgba(15,42,36,.6)}
.terugbel{position:relative;padding:30px 28px 24px;text-align:left}
.terugbel h2{font-size:26px;margin:4px 0 8px}
.terugbel p{font-size:16.5px;color:var(--tekst)}
.terugbel .veld{margin-top:14px}
.terugbel label{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.terugbel input,.terugbel select{width:100%;padding:13px 14px;font-size:17px;font-family:inherit;color:var(--ink);
  border:1.5px solid rgba(var(--ink-rgb),.25);border-radius:10px;background:var(--wit)}
.terugbel input:focus,.terugbel select:focus{outline:2px solid var(--accent);outline-offset:1px}
.terugbel-sluit{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--tint);color:var(--ink);font-size:26px;line-height:40px;cursor:pointer}
.terugbel-fout{color:#a3261b;font-weight:600;min-height:0;margin:10px 0 0}
.terugbel-fout:empty{display:none}
.terugbel-verstuur{width:100%;margin-top:16px}
.terugbel-klein{font-size:14px!important;margin-top:10px;text-align:center}
.terugbel-klaar{text-align:center;padding:10px 0}

/* ---------- mobiele balk: aanvraag + bellen, op elke pagina ---------- */
.mobiel-balk{display:none}
@media(max-width:900px){
  .mobiel-balk{display:flex;gap:10px;position:fixed;left:12px;right:12px;bottom:12px;z-index:60}
  .mobiel-balk .zwevend-knop{position:static;display:inline-flex;flex:1 1 0;justify-content:center;margin:0}
  .zwevend-bel{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--wit);color:var(--petrol);border:2px solid var(--petrol);border-radius:999px;
    font:700 16px/1.1 inherit;font-family:inherit;padding:12px 14px;cursor:pointer;text-decoration:none;
    box-shadow:0 10px 26px -10px rgba(var(--ink-rgb),.45)}
  .zwevend-bel svg{width:18px;height:18px}
  body{padding-bottom:86px}
}
.menu-bel{display:flex;align-items:center;justify-content:center;gap:9px;margin:12px 0 0;width:100%;
  background:var(--wit);color:var(--petrol);border:2px solid var(--petrol);border-radius:12px;
  padding:15px;font:700 17px/1.1 inherit;font-family:inherit;cursor:pointer;text-decoration:none}
.menu-bel svg{width:20px;height:20px}

/* ---------- galerij, lijsten en bron ---------- */
.fotogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fotogrid .foto img,.artikel-foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-kaart)}
@media(max-width:700px){.fotogrid{grid-template-columns:1fr}}
.artikel-foto{margin:24px 0}
.kb-lijsten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
@media(max-width:900px){.kb-lijsten{grid-template-columns:1fr}}
.alle-lijst{list-style:none;columns:2;margin:0 0 22px;padding:0}
.alle-lijst li{padding:3px 0;break-inside:avoid}
@media(max-width:640px){.alle-lijst{columns:1}}
table.bron-tabel{min-width:960px;font-size:15px}
table.bron-tabel td{vertical-align:top}
@media(max-width:640px){table.bron-tabel{min-width:0}
  table.stapel td{flex-direction:column;gap:2px}}
.kaart-grid.vier{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.kaart-grid.vier{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.kaart-grid.vier{grid-template-columns:1fr}}
.usp-c span{font-size:15px}

/* ---------- navigatie: zeven items plus belknop en offerteknop op 1200-1560 ---------- */
@media(min-width:1201px) and (max-width:1560px){
  .nav-links{gap:15px}
  .nav-links>a,.nav .heeft-sub>a{font-size:15px}
  .nav-bel{font-size:14.5px;padding:8px 12px;margin:0 8px 0 14px}
  .nav .knop{font-size:15px;padding:10px 16px 11px;min-height:0}
}
@media(min-width:1201px) and (max-width:1340px){
  .nav-links>a[href="/over-ons/"]{display:none}
}

/* ---------- header blijft doorzichtig (vaste regel), maar leesbaar boven lichte
   secties: iets sterkere waas plus tekstschaduw op de menutekst ---------- */
.header{background-image:linear-gradient(to bottom, rgba(15,42,36,.66), rgba(15,42,36,0));background-size:100% 150px}
.nav-links>a,.nav .heeft-sub>a,.nav-bel{text-shadow:0 1px 3px rgba(0,0,0,.65),0 0 14px rgba(0,0,0,.45)}

/* ---------- lopende tekst: links uitgelijnd, koppen gecentreerd ---------- */
.tekstblok > p,.tekstblok > ul:not(.hero-vinkjes):not(.uniek-vinkjes):not(.spec-lijst){margin-bottom:16px;text-align:left}
.tekstblok > h2{text-align:center}
.tekstblok > .kop-blok + p{margin-top:6px}
.terugbel-dialoog{margin:auto;max-height:calc(100vh - 32px);overflow:auto}
@media(max-width:640px){
  .geldhero .hero-duo{padding-top:calc(var(--header-h) + 14px);gap:28px}
  .geldhero h1{font-size:28px}
}