/* De Elektricien van Leiden - 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 ELEKTRICIEN VAN LEIDEN: palet en lettertype (07-10-2026)
   Diep marineblauw als drager (vakmanschap, rust), Leids rood als accent
   (de rode sleutels in het Leidse wapen, en het embleem op de jassen).
   Knoppen in rood met witte tekst. Bewust anders dan de andere
   elektriciensites in de reeks (eigen palet per stad).
   Lettertype Instrument Sans (self-hosted).
   ===================================================================== */
@font-face{font-family:'Instrument Sans';src:url('../fonts/instrument-sans-var.woff2') format('woff2');
  font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap}
:root{
  --ink:#141f38; --petrol:#1b2a4a; --accent:#d7322a;
  --tint:#eef1f6; --tint2:#f3f5f9; --tint3:#e3e8f0; --salie:#c9d2e0; --bg:#f8f9fb;
  --accent-donker:#b4251e; --petrol-donker:#121d35; --ink-donker:#0b1224;
  --tekst:#3c4658; --op-accent:#ffffff;
  --accent-rgb:215,50,42; --petrol-rgb:27,42,74; --ink-rgb:20,31,56;
}
body{font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.6}
p{font-size:17px;line-height:1.65}
.artikel-inhoud p{font-size:17px;line-height:1.7}
.kortblok p{font-size:16.5px;line-height:1.6}
.kortblok .kort-datum{font-size:13.5px;color:#5d6880}
.knop{font-weight:700}
.calc-gerust-mini{color:#5d6880}
.calc-hero .calc-ondertitel{color:#5d6880}
.calc-fotohint{color:#5d6880}
.calc-pills .calc-tegel{min-height:50px}
.calc-velden .veld input,.calc-hero .calc-velden .veld input{font-size:16px}
.calc-foutmelding{font-weight:600}
h1,h2,h3{letter-spacing:-.01em}

/* ---------- 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(11,18,36,.62)}
.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(11,18,36,.66), rgba(11,18,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}
}

/* ---------- Lighthouse-fixes 06-10: contrast stapteller, footerkoppen als h3 ---------- */
.calc-stapnr{color:#5d6880!important;font-size:13.5px}
.footer h3.footer-kop{color:var(--wit);font-size:17px;font-weight:600;margin-bottom:18px}
/* ---------- vertrouwen in de contactstap (fase 2 van de formule) ---------- */
.calc-vertrouwen{display:flex;gap:9px;align-items:flex-start;background:var(--tint);border-radius:10px;
  padding:10px 12px;margin:0 0 12px;font-size:14px!important;line-height:1.45;color:var(--ink)}
.calc-vertrouwen svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px;color:var(--petrol)}

/* ---------- mobiele balk: beide knoppen op een regel (06-10) ---------- */
@media(max-width:900px){
  .mobiel-balk .zwevend-knop,.zwevend-bel{white-space:nowrap;font-size:15px;padding:13px 12px}
  .mobiel-balk .zwevend-knop svg{width:18px;height:18px;flex:0 0 18px}
}
@media(max-width:360px){.mobiel-balk .zwevend-knop,.zwevend-bel{font-size:14px;padding:12px 8px}}
table.bron-tabel td[data-label="Onze prijs"],table.prijstabel td[data-label="Prijs"]{white-space:nowrap}

/* =====================================================================
   TERUGBELKAART (Simon 06-10): alleen naam, telefoon en plaats.
   Zelfde formulier in de hero, op /hulp-aanvragen/ en in het venster.
   ===================================================================== */
.tb-kaart .terugbel{padding:0}
.tb-kaart{max-width:440px}
.calc-kaart.tb-kaart{max-width:520px;margin-inline:auto;background:var(--wit);border-radius:24px;
  box-shadow:0 26px 60px -18px rgba(var(--ink-rgb),.35);padding:clamp(22px,3vw,34px)}
.terugbel .eyebrow{margin-bottom:4px}
.terugbel h2,.terugbel .tb-kop{font-size:clamp(24px,2.4vw,30px);line-height:1.2;margin:2px 0 6px;color:var(--ink)}
.terugbel .tb-intro{font-size:15.5px;color:var(--tekst);margin:0 0 4px}
.terugbel .veld{margin-top:12px}
.terugbel .veld input{font-size:17px;padding:14px 15px}
.terugbel-verstuur{width:100%;margin-top:16px;font-size:18px;min-height:56px}
.tb-belofte{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 0;
  font-weight:700;font-size:16px!important;color:var(--petrol)!important;text-align:center}
.tb-belofte svg{width:20px;height:20px;flex:0 0 20px}
.terugbel-dialoog .terugbel{padding:30px 26px 24px}
.hero-knoppen .knop svg,.tussen-knoppen .knop svg{width:20px;height:20px;margin-right:8px;vertical-align:-4px}
.nav .knop.terugbel-open,.menu-offerte.terugbel-open{font-family:inherit;cursor:pointer;border:0}
.menu-offerte.terugbel-open{width:100%;font-size:17px}
.cta-blok button.knop{font-family:inherit;border:0;cursor:pointer}
/* mobiel: een brede knop onderaan, altijd in beeld */
@media(max-width:900px){
  .mobiel-balk .zwevend-knop{flex:1 1 auto;justify-content:center;gap:9px;border:0;font-family:inherit;
    font-weight:700;font-size:16px;cursor:pointer;color:var(--op-accent)}
  .mobiel-balk .zwevend-knop svg{width:19px;height:19px;flex:0 0 19px}
}

/* =====================================================================
   ELEKTRICIEN: offertekaart naast de terugbelkaart, toelichtingsveld,
   spoedknop in de nav en de mobiele balk (07-10-2026)
   ===================================================================== */
.calc-velden textarea{width:100%;border:1.5px solid #e3e9e6;border-radius:10px;padding:11px 13px;
  font:inherit;font-size:16px;color:var(--ink);background:var(--wit);resize:vertical;min-height:58px}
.calc-velden textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.calc-kaart.of-kaart{max-width:760px;margin-inline:auto}
.nav-bel svg,.menu-bel svg,.zwevend-bel svg,.knop-bel svg,.knop-bel-hero svg{flex:0 0 auto}
.nav-bel{border-color:rgba(255,255,255,.75)}
.mobiel-balk .zwevend-knop{text-decoration:none}
.c-icoon svg{fill:none;stroke:var(--accent)}
@media(max-width:560px){.calc-tegels .calc-tegel:last-child:nth-child(odd){grid-column:1/-1}}