/*
Theme Name: SBF Dienstensite
Theme URI: https://sloopbedrijffriesland.nl/
Author: Sloopbedrijf Friesland
Description: Thema voor Sloopbedrijf Friesland. De vormgeving is overgenomen van sloopbedrijfflevoland.nl, de zustersite: zelfde opbouw, zelfde componenten, zelfde palet. Rendert alle pagina-inhoud uit JSON in postmeta, met een eigen SEO-kop, een JSON-LD-graph en een leadformulier met bijlagen. Geen pagebuilder, geen externe fonts, geen jQuery.
Version: 3.1.1
Requires at least: 6.2
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbf
Tags: dienstensite, lokaal, nederlands
*/

/* Het lettertype staat op de eigen server. Flevoland haalt Barlow Condensed bij
   Google op; dat is een extra verbinding naar een derde partij op elke pagina en
   het kost bij de meting een paar tienden. Dezelfde letter, eigen bestand. */
@font-face{
  font-family:"Barlow Condensed";
  src:url("assets/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("assets/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}

/* =================================================================
   Sloopbedrijf Flevoland, stijl
   Polderdonker met een oranje werkkleur. Een bestand, geen framework.
   ================================================================= */

:root{
  --inkt:#123a33;
  --inkt-2:#0d2d28;
  --inkt-3:#1a5548;
  --lijn:rgba(255,255,255,.10);
  --lijn-licht:#d4ded7;
  --papier:#f5f8f5;
  --papier-2:#e9efe9;
  --warm:#eaf3ee;
  --wit:#fff;
  --oranje:#c2521f;
  --oranje-diep:#a03f14;
  --amber:#e9a63c;
  --tekst:#222c28;
  --tekst-zacht:#57635c;
  --tekst-omgekeerd:rgba(255,255,255,.76);
  --groen:#1f7a55;
  --polderblauw:#1c5f7a;   /* het water van de randmeren */
  --signaal:#c2521f;       /* werkkleur, hetzelfde oranje als de knoppen */
  --radius:4px;
  --radius-g:10px;
  --breed:1200px;
  --smal:760px;
  --kop:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --body:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --schaduw:0 1px 2px rgba(15,32,28,.06), 0 8px 24px rgba(15,32,28,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--papier);color:var(--tekst);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--kop);font-weight:700;line-height:1.05;letter-spacing:.005em;margin:0 0 .5em;color:var(--inkt);overflow-wrap:break-word;hyphens:auto}
/* Nederlandse samenstellingen als omgevingsvergunning of kanaalplaatvloer zijn
   op een telefoon breder dan het scherm. Zonder deze regel schuift de hele
   pagina opzij en dat ziet eruit als een kapot ontwerp. */
h1{font-size:clamp(34px,5.6vw,60px);text-transform:uppercase}
h2{font-size:clamp(27px,3.8vw,42px);text-transform:uppercase}
h3{font-size:clamp(20px,2.3vw,26px)}
h4{font-size:19px}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.45em}
strong{color:var(--inkt)}
hr{border:0;border-top:1px solid var(--lijn-licht);margin:40px 0}

.sbf-wrap{width:100%;max-width:var(--breed);margin:0 auto;padding:0 22px}
.sbf-smal{max-width:var(--smal);margin-left:auto;margin-right:auto}
.sbf-sectie{padding:clamp(52px,7vw,92px) 0}
.sbf-sectie--strak{padding:clamp(34px,4vw,56px) 0}
.sbf-sectie--donker{background:var(--inkt);color:var(--tekst-omgekeerd)}
.sbf-sectie--donker h1,.sbf-sectie--donker h2,.sbf-sectie--donker h3,.sbf-sectie--donker h4{color:#fff}
.sbf-sectie--grijs{background:var(--papier-2)}
.sbf-sectie--warm{background:var(--warm)}

.sbf-overtitel{
  font-family:var(--kop);text-transform:uppercase;letter-spacing:.16em;
  font-size:14px;font-weight:600;color:var(--oranje-diep);margin:0 0 10px;display:block;
}
.sbf-sectie--donker .sbf-overtitel,.sbf-hero .sbf-overtitel{color:var(--amber)}
.sbf-lead{font-size:clamp(18px,2vw,21px);color:var(--tekst-zacht);line-height:1.6}
.sbf-sectie--donker .sbf-lead{color:var(--tekst-omgekeerd)}

/* --- knoppen --- */
.sbf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--kop);text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;font-size:18px;line-height:1;
  padding:16px 26px;min-height:52px;border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;transition:.16s ease;text-align:center;
}
.sbf-btn--primair{background:var(--signaal);color:#fff;border-color:var(--signaal)}
.sbf-btn--primair:hover{background:#a03f14;border-color:#a03f14}
.sbf-btn--rand{background:transparent;color:var(--inkt);border-color:var(--inkt)}
.sbf-btn--rand:hover{background:var(--inkt);color:#fff}
.sbf-sectie--donker .sbf-btn--rand{color:#fff;border-color:rgba(255,255,255,.42)}
.sbf-sectie--donker .sbf-btn--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}
.sbf-voet .sbf-btn--rand{color:#fff;border-color:rgba(255,255,255,.45)}
.sbf-voet .sbf-btn{padding-inline:16px}
.sbf-voet .sbf-btn--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}
.sbf-btn--wit{background:#fff;color:var(--inkt);border-color:#fff}
.sbf-btn--wit:hover{background:var(--papier-2);border-color:var(--papier-2)}
.sbf-btn svg{width:20px;height:20px;flex:0 0 auto}

/* --- skiplink --- */
.sbf-skip{position:absolute;left:-9999px;top:0;background:var(--oranje);color:#fff;padding:12px 18px;z-index:999}
.sbf-skip:focus{left:8px;top:8px}

/* =================================================================
   Header
   ================================================================= */
.sbf-balk{background:var(--inkt-2);color:var(--tekst-omgekeerd);font-size:14px;border-bottom:1px solid var(--lijn)}
.sbf-balk__in{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;min-height:40px;padding-block:6px}
.sbf-balk ul{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.sbf-balk li{display:flex;align-items:center;gap:7px;margin:0}
.sbf-balk svg{width:15px;height:15px;color:var(--amber);flex:0 0 auto}
.sbf-balk a{text-decoration:none}
.sbf-balk a:hover{color:#fff}

.sbf-kop{position:sticky;top:0;z-index:60;background:var(--inkt);border-bottom:3px solid var(--amber)}
.sbf-kop__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.sbf-logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;flex:0 0 auto}
.sbf-logo__mark{width:38px;height:38px;flex:0 0 auto}
.sbf-logo__tekst{font-family:var(--kop);text-transform:uppercase;line-height:1}
.sbf-logo__tekst b{display:block;font-size:22px;font-weight:700;letter-spacing:.02em}
.sbf-logo__tekst span{display:block;font-size:11.5px;letter-spacing:.26em;color:var(--amber);font-weight:600}

.sbf-nav{display:flex;align-items:center;gap:1px}
.sbf-nav a{
  font-family:var(--kop);text-transform:uppercase;font-size:15px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.82);text-decoration:none;padding:10px 9px;border-radius:var(--radius);
  display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
}
.sbf-nav a:hover,.sbf-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.sbf-kop__cta{display:flex;align-items:center;gap:10px}
.sbf-kop__tel{
  display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
  width:46px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);flex:0 0 auto;
}
.sbf-kop__tel:hover{border-color:var(--amber)}
.sbf-kop__tel svg{width:20px;height:20px;color:var(--amber)}
.sbf-kop__offerte{
  padding:11px 16px;min-height:44px;font-size:15px;white-space:nowrap;flex:0 0 auto;
}
.sbf-kop__offerte svg{width:17px;height:17px}
/* De lange labeltekst "aanvragen" verschijnt pas op ruime schermen */
.sbf-kop__offerte-lang{display:none}
@media (min-width:1400px){ .sbf-kop__offerte-lang{display:inline} }

.sbf-burger{
  display:none;background:none;border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  width:46px;height:44px;align-items:center;justify-content:center;cursor:pointer;color:#fff;
}
.sbf-burger svg{width:22px;height:22px}
.sbf-mobiel{display:none;background:var(--inkt-2);border-top:1px solid var(--lijn);padding:10px 0 18px}
.sbf-mobiel.is-open{display:block}
.sbf-mobiel a{
  display:flex;align-items:center;min-height:48px;padding:6px 4px;color:rgba(255,255,255,.88);
  text-decoration:none;font-family:var(--kop);text-transform:uppercase;font-size:19px;font-weight:600;
  border-bottom:1px solid var(--lijn);
}

/* =================================================================
   Hero
   ================================================================= */
.sbf-hero{position:relative;background:var(--inkt);color:#fff;overflow:hidden}
.sbf-hero__foto{position:absolute;inset:0}
.sbf-hero__foto img{width:100%;height:100%;object-fit:cover;opacity:.85}
.sbf-hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(13,45,40,.86) 0%,rgba(18,58,51,.62) 48%,rgba(18,58,51,.16) 100%);
}
.sbf-hero__in{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,86px)}
.sbf-hero__tekst{max-width:720px}
.sbf-hero h1{color:#fff}
.sbf-hero__sub{font-size:clamp(18px,2.1vw,21px);color:rgba(255,255,255,.82);max-width:600px;margin-bottom:26px}
.sbf-hero__knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.sbf-hero__punten{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:0;font-size:15.5px}
.sbf-hero__punten li{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.86);margin:0}
.sbf-hero__punten svg{width:17px;height:17px;color:var(--amber);flex:0 0 auto}

/* --- kerncijfers --- */
.sbf-cijfers{background:var(--inkt-3);border-top:1px solid var(--lijn);position:relative}
.sbf-cijfers__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--lijn)}
.sbf-cijfers__grid>div{background:var(--inkt-3);padding:24px 20px;text-align:center;min-width:0}
.sbf-cijfers b{display:block;font-family:var(--kop);font-size:clamp(28px,3.4vw,38px);color:#fff;line-height:1}
.sbf-cijfers span{display:block;font-size:13.5px;color:rgba(255,255,255,.66);margin-top:6px}

/* =================================================================
   Kruimelpad
   ================================================================= */
.sbf-kruimels{background:var(--papier-2);border-bottom:1px solid var(--lijn-licht);font-size:14px}
.sbf-kruimels ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:11px 0}
.sbf-kruimels li{margin:0;color:var(--tekst-zacht);display:flex;gap:6px;align-items:center}
.sbf-kruimels li+li::before{content:"›";color:#a9a49c}
.sbf-kruimels a{color:var(--tekst-zacht);text-decoration:none}
.sbf-kruimels a:hover{color:var(--oranje);text-decoration:underline}

/* =================================================================
   Kaarten en rasters
   ================================================================= */
.sbf-grid{display:grid;gap:20px}
.sbf-grid>*{min-width:0}
.sbf-grid--2{grid-template-columns:repeat(2,1fr)}
.sbf-grid--3{grid-template-columns:repeat(3,1fr)}
.sbf-grid--4{grid-template-columns:repeat(4,1fr)}

.sbf-kaart{
  background:#fff;border:1px solid var(--lijn-licht);border-radius:var(--radius-g);
  padding:24px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;
  transition:.16s ease;min-width:0;
}
a.sbf-kaart:hover{border-color:var(--oranje);transform:translateY(-2px);box-shadow:var(--schaduw)}
.sbf-kaart__icoon{width:42px;height:42px;color:var(--oranje)}
.sbf-kaart__icoon svg{width:100%;height:100%}
.sbf-kaart h3{margin:0;font-size:21px}
.sbf-kaart p{margin:0;font-size:15.5px;color:var(--tekst-zacht)}
.sbf-kaart__prijs{
  margin-top:auto;padding-top:12px;font-family:var(--kop);font-size:17px;font-weight:600;
  color:var(--inkt);text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:8px;
}
.sbf-kaart__prijs svg{width:16px;height:16px;color:var(--oranje)}

.sbf-fotokaart{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn-licht);
  border-radius:var(--radius-g);overflow:hidden;text-decoration:none;color:inherit;transition:.16s ease;min-width:0;
}
a.sbf-fotokaart:hover{border-color:var(--oranje);transform:translateY(-2px);box-shadow:var(--schaduw)}
.sbf-fotokaart img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sbf-fotokaart__in{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.sbf-fotokaart h3{margin:0;font-size:20px}
.sbf-fotokaart p{margin:0;font-size:15px;color:var(--tekst-zacht)}
.sbf-fotokaart__meta{
  margin-top:auto;padding-top:12px;font-size:13.5px;color:var(--tekst-zacht);
  display:flex;flex-wrap:wrap;gap:6px 16px;
}

/* plaatsenlijst */
.sbf-plaatsen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:0}
.sbf-plaatsen>*{min-width:0}
.sbf-plaatsen a{
  display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 14px;
  background:#fff;border:1px solid var(--lijn-licht);border-radius:var(--radius);
  text-decoration:none;font-family:var(--kop);text-transform:uppercase;font-size:17px;font-weight:600;
  letter-spacing:.03em;transition:.14s ease;
}
.sbf-plaatsen a:hover{border-color:var(--oranje);color:var(--oranje)}
.sbf-plaatsen svg{width:15px;height:15px;color:var(--oranje);flex:0 0 auto}
.sbf-sectie--donker .sbf-plaatsen a{background:var(--inkt-3);border-color:var(--lijn);color:#fff}
.sbf-sectie--donker .sbf-plaatsen a:hover{border-color:var(--amber);color:var(--amber)}

/* =================================================================
   Inhoudspagina
   ================================================================= */
.sbf-inhoud{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:52px;align-items:start}
.sbf-artikel{min-width:0}
.sbf-artikel h2{margin-top:1.6em}
.sbf-artikel h2:first-child{margin-top:0}
.sbf-artikel h3{margin-top:1.5em}
.sbf-artikel figure{margin:28px 0}
.sbf-artikel figure img{border-radius:var(--radius-g);width:100%}
.sbf-artikel figcaption{font-size:14px;color:var(--tekst-zacht);margin-top:8px}

.sbf-samenvatting{
  background:var(--inkt);color:var(--tekst-omgekeerd);border-radius:var(--radius-g);
  padding:26px 28px;margin:0 0 30px;border-left:5px solid var(--oranje);
}
.sbf-samenvatting p:last-child{margin-bottom:0}
.sbf-samenvatting strong{color:#fff}

.sbf-punten{list-style:none;padding:0;margin:0 0 1.4em}
.sbf-punten li{display:flex;gap:11px;align-items:flex-start;margin-bottom:.6em}
.sbf-punten svg{width:19px;height:19px;color:var(--oranje);flex:0 0 auto;margin-top:4px}

/* stappen */
.sbf-stap{border-left:2px solid var(--lijn-licht);padding:0 0 30px 26px;position:relative}
.sbf-stap:last-child{padding-bottom:4px}
.sbf-stap__nr{
  position:absolute;left:-19px;top:0;width:36px;height:36px;border-radius:50%;
  background:var(--oranje);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--kop);font-weight:700;font-size:19px;
}
.sbf-stap h3{margin:2px 0 8px;padding-left:26px}
.sbf-stap__body p{margin-bottom:.8em}

/* prijstabel */
.sbf-tabel{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:16px;background:#fff;border:1px solid var(--lijn-licht);border-radius:var(--radius-g);overflow:hidden}
.sbf-tabel th,.sbf-tabel td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--lijn-licht);vertical-align:top}
.sbf-tabel th{background:var(--inkt);color:#fff;font-family:var(--kop);text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.sbf-tabel td:last-child{white-space:nowrap;font-weight:600;color:var(--inkt)}
.sbf-tabel tr:last-child td{border-bottom:0}
/* Op een telefoon is een tabel met een niet-afbrekende laatste kolom breder dan
   het scherm. Hij mag daar zelf scrollen in plaats van de hele pagina mee te
   trekken, en de prijskolom mag afbreken. */
@media (max-width:640px){
  .sbf-tabel{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sbf-tabel td:last-child{white-space:normal}
}
.sbf-tabelwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* faq */
.sbf-faq{border-top:1px solid var(--lijn-licht)}
.sbf-faq details{border-bottom:1px solid var(--lijn-licht)}
.sbf-faq summary{
  cursor:pointer;list-style:none;padding:17px 40px 17px 0;position:relative;
  font-family:var(--kop);font-size:20px;font-weight:600;color:var(--inkt);min-height:52px;display:flex;align-items:center;
}
.sbf-faq summary::-webkit-details-marker{display:none}
.sbf-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--oranje);border-bottom:2px solid var(--oranje);
  transform:translateY(-70%) rotate(45deg);transition:.18s;
}
.sbf-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sbf-faq details>div{padding:0 0 18px;color:var(--tekst-zacht)}

/* zijkolom */
.sbf-zij{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.sbf-zijblok{background:#fff;border:1px solid var(--lijn-licht);border-radius:var(--radius-g);padding:22px}
.sbf-zijblok--donker{background:var(--inkt);border-color:var(--inkt);color:var(--tekst-omgekeerd)}
.sbf-zijblok--donker h3{color:#fff}
.sbf-zijblok h3{font-size:20px;margin:0 0 12px}
.sbf-zijblok ul{list-style:none;padding:0;margin:0}
.sbf-zijblok li{margin-bottom:2px}
.sbf-zijblok li a{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:5px 0;text-decoration:none;
  font-size:15.5px;color:var(--tekst);border-bottom:1px solid var(--lijn-licht);
}
.sbf-zijblok li:last-child a{border-bottom:0}
.sbf-zijblok li a:hover{color:var(--oranje)}
.sbf-zijblok li a svg{width:14px;height:14px;color:var(--oranje);flex:0 0 auto}
.sbf-zijblok__tel{
  display:flex;align-items:center;justify-content:center;gap:10px;background:var(--oranje);color:#fff;
  text-decoration:none;border-radius:var(--radius);min-height:56px;font-family:var(--kop);
  font-size:23px;font-weight:700;letter-spacing:.02em;margin-bottom:10px;
}
.sbf-zijblok__tel:hover{background:var(--oranje-diep)}

/* inhoudsopgave */
.sbf-toc{background:var(--papier-2);border:1px solid var(--lijn-licht);border-radius:var(--radius-g);padding:20px 24px;margin:0 0 32px}
.sbf-toc h2{font-size:17px;margin:0 0 10px;letter-spacing:.1em}
.sbf-toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:30px;font-size:15.5px}
.sbf-toc li{margin-bottom:.35em;break-inside:avoid}
.sbf-toc a{color:var(--tekst);text-decoration:none}
.sbf-toc a:hover{color:var(--oranje);text-decoration:underline}

/* citaat */
.sbf-citaat{
  border-left:5px solid var(--oranje);background:#fff;border-radius:0 var(--radius-g) var(--radius-g) 0;
  padding:22px 26px;margin:28px 0;font-size:18px;
}
.sbf-citaat p{margin-bottom:.5em}
.sbf-citaat cite{font-style:normal;font-size:14.5px;color:var(--tekst-zacht)}

/* waarschuwing */
.sbf-let-op{
  background:#fff6ec;border:1px solid #ffd7ad;border-left:5px solid var(--amber);
  border-radius:var(--radius-g);padding:20px 24px;margin:26px 0;
}
.sbf-let-op h3{margin:0 0 8px;font-size:19px}
.sbf-let-op p:last-child{margin-bottom:0}

/* fotostrook */
.sbf-strook{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}
.sbf-strook>*{min-width:0}
.sbf-strook img{border-radius:var(--radius-g);aspect-ratio:4/3;object-fit:cover;width:100%}

/* =================================================================
   Formulier
   ================================================================= */
.sbf-form{display:flex;flex-direction:column;gap:14px}
.sbf-form__rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sbf-form__rij>*{min-width:0}
.sbf-form label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600;color:var(--inkt)}
/* Labeltekst en het sterretje op één regel, zodat de velden in een rij gelijk staan. */
.sbf-form__kop{display:block;min-height:21px;line-height:1.4}
.sbf-form__ster{color:var(--signaal)}
/* Velden in dezelfde rij even hoog uitlijnen, ook als een label omslaat. */
.sbf-form__rij>label{justify-content:flex-start}
.sbf-form__rij>label input{margin-top:auto}
.sbf-sectie--donker .sbf-form label{color:#fff}
.sbf-form input,.sbf-form textarea,.sbf-form select{
  font:inherit;font-size:16px;font-weight:400;color:var(--tekst);
  padding:13px 14px;border:1px solid #cfc9c0;border-radius:var(--radius);background:#fff;
  min-height:50px;width:100%;
}
.sbf-form textarea{min-height:120px;resize:vertical}
.sbf-form input:focus,.sbf-form textarea:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:var(--oranje)}
.sbf-form__hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.sbf-form__klein{font-size:14px;color:var(--tekst-zacht);margin:0}
.sbf-sectie--donker .sbf-form__klein{color:var(--tekst-omgekeerd)}
.sbf-form__melding{padding:13px 16px;border-radius:var(--radius);font-size:15.5px;margin:0}
.sbf-form__melding--ok{background:#e7f6ee;color:#14603c;border:1px solid #a9dcc2}
.sbf-form__melding--fout{background:#fdeceb;color:#8c2018;border:1px solid #f3bdb8}

.sbf-cta{background:var(--warm);color:var(--tekst);border-top:3px solid var(--oranje)}
.sbf-cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.sbf-cta__grid>*{min-width:0}
.sbf-cta h2{color:var(--inkt)}
.sbf-cta__form{background:#fff;border:1px solid var(--lijn-licht);border-radius:var(--radius-g);padding:26px;box-shadow:var(--schaduw)}

/* =================================================================
   Footer
   ================================================================= */
.sbf-voet{background:var(--inkt);color:var(--tekst-omgekeerd);padding:56px 0 0;border-top:1px solid var(--lijn)}
.sbf-voet__grid{display:grid;grid-template-columns:1.3fr 1.6fr .95fr 1.15fr;gap:30px}
.sbf-voet__grid>*{min-width:0}
.sbf-voet__grid li,.sbf-voet__grid p{overflow-wrap:anywhere}
.sbf-voet h3{font-size:18px;color:#fff;letter-spacing:.06em}
.sbf-voet ul{list-style:none;padding:0;margin:0;font-size:15.5px}
.sbf-voet li{margin-bottom:2px}
.sbf-voet a{text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.sbf-voet a:hover{color:#fff;text-decoration:underline}
.sbf-voet__onder{
  margin-top:44px;border-top:1px solid var(--lijn);padding:18px 0;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;font-size:14px;
}
.sbf-voet__dienstenlijst{columns:2;column-gap:22px}
/* Een inline-flex is zo breed als zijn tekst, dus lange dienstnamen als
   Woningontruiming liepen de kolom uit. Als blokelement breekt de tekst wel af. */
.sbf-voet__dienstenlijst a{display:flex;line-height:1.3;padding-block:8px;min-height:0;overflow-wrap:anywhere}

/* Tikdoelen. WCAG 2.5.8 vraagt 24 bij 24 pixels voor alles wat geen link in
   lopende tekst is. De topbalk, de kruimels, de inhoudsopgave en de links in
   de tarieventabel zaten daar met 16 tot 23 pixels net onder. */
.sbf-balk a,.sbf-kruimels a,.sbf-toc a,.sbf-tabel td a,.sbf-tabel th a{
  display:inline-flex;align-items:center;min-height:24px;
}

/* zwevende belknop op mobiel */
.sbf-bel{
  display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:70;
  gap:10px;
}
.sbf-bel a{flex:1}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width:1080px){
  .sbf-inhoud{grid-template-columns:1fr;gap:40px}
  .sbf-zij{position:static}
  .sbf-grid--4{grid-template-columns:repeat(2,1fr)}
  .sbf-plaatsen{grid-template-columns:repeat(3,1fr)}
  .sbf-voet__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1240px){
  .sbf-nav{display:none}
  .sbf-burger{display:flex}
}
@media (max-width:980px){
  .sbf-grid--3{grid-template-columns:repeat(2,1fr)}
  .sbf-cta__grid{grid-template-columns:1fr;gap:32px}
}
/* Topbalk: telefoon altijd tonen, e-mail pas op wat breder */
@media (max-width:560px){
  .sbf-balk__mail{display:none}
}
/* Op mobiel dekt de zwevende balk de offerteknop al; haal hem uit de header */
@media (max-width:760px){
  .sbf-kop__offerte{display:none}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sbf-grid--2,.sbf-grid--3,.sbf-grid--4{grid-template-columns:1fr}
  .sbf-cijfers__grid{grid-template-columns:repeat(2,1fr)}
  .sbf-plaatsen{grid-template-columns:repeat(2,1fr)}
  .sbf-strook{grid-template-columns:1fr 1fr}
  .sbf-toc ol{columns:1}
  .sbf-form__rij{grid-template-columns:1fr}
  .sbf-voet__grid{grid-template-columns:1fr;gap:28px}
  .sbf-voet__dienstenlijst{columns:1}
  .sbf-voet__dienstenlijst a{padding-block:12px}
  .sbf-hero__knoppen .sbf-btn{width:100%}
  .sbf-bel{display:flex}
  body{padding-bottom:76px}
  .sbf-balk__in{justify-content:center;text-align:center}
}
@media (max-width:420px){
  .sbf-plaatsen{grid-template-columns:1fr}
  .sbf-strook{grid-template-columns:1fr}
  .sbf-logo__tekst b{font-size:19px}
  .sbf-logo__tekst span{font-size:10px;letter-spacing:.2em}
}

/* toegankelijkheid: grotere raakvlakken op touch */
@media (max-width:980px){
  .sbf-kruimels a,.sbf-faq summary,.sbf-voet a{min-height:44px}
  .sbf-kruimels li{min-height:32px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* =================================================================
   Correcties
   ================================================================= */
/* Standaardformaat voor alle inline iconen; specifiekere regels winnen. */
svg{width:20px;height:20px;flex:0 0 auto}
.sbf-logo__mark{width:38px;height:38px}
.sbf-kaart__icoon svg{width:100%;height:100%}
.sbf-zijblok__tel svg{width:22px;height:22px}
.sbf-hero__punten svg{width:17px;height:17px}
.sbf-balk svg{width:15px;height:15px}

/* Secundaire knop op de donkere hero moet leesbaar zijn */
.sbf-hero .sbf-btn--rand,
.sbf-zijblok--donker .sbf-btn--rand{color:#fff;border-color:rgba(255,255,255,.45)}
.sbf-hero .sbf-btn--rand:hover,
.sbf-zijblok--donker .sbf-btn--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}

/* Links in lopende tekst duidelijk herkenbaar */
.sbf-artikel p a,.sbf-artikel li a{color:var(--oranje-diep);text-underline-offset:2px}
.sbf-artikel p a:hover,.sbf-artikel li a:hover{color:var(--inkt)}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* =================================================================
   Mobiel: compacte topbalk en betere raakvlakken
   ================================================================= */
@media (max-width:900px){
  /* De USP-rij vult op een telefoon het halve scherm. Op mobiel houden we
     alleen de contactregel over; de voordelen staan al in de hero. */
  .sbf-balk__in{justify-content:center;text-align:center;gap:4px 16px;min-height:0}
  .sbf-balk ul.sbf-balk__usp{display:none}
  .sbf-balk ul.sbf-balk__contact{justify-content:center}
  .sbf-balk{font-size:13.5px}
  .sbf-balk__in{padding-block:8px}

  /* Kop compacter, maar telefoon blijft een volwaardige knop */
  .sbf-kop__in{min-height:64px;gap:12px}
  .sbf-kop__tel{
    width:46px;height:44px;justify-content:center;
    border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  }
  .sbf-kop__tel svg{width:21px;height:21px}
  .sbf-logo__mark{width:34px;height:34px}
  .sbf-logo__tekst b{font-size:20px}
  .sbf-logo__tekst span{font-size:10.5px;letter-spacing:.22em}
}

@media (max-width:400px){
  .sbf-balk{font-size:12.5px}
  .sbf-logo{gap:8px}
  .sbf-logo__tekst b{font-size:18px}
}

/* Zwevende belbalk: compacter en met een achtergrond, zodat hij niet
   over de tekst heen lijkt te zweven. */
@media (max-width:760px){
  .sbf-bel{
    left:0;right:0;bottom:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(15,32,28,.94);backdrop-filter:blur(6px);
    border-top:1px solid var(--lijn);
  }
  .sbf-bel .sbf-btn{min-height:48px;padding:12px 14px;font-size:17px}
  body{padding-bottom:74px}
}

/* =================================================================
   Bestand-upload in het offerteformulier
   ================================================================= */
.sbf-form__upload input[type="file"]{
  font:inherit;font-size:15px;color:var(--tekst);
  padding:11px 12px;border:1px dashed #bcb5aa;border-radius:var(--radius);
  background:#f8faf7;width:100%;cursor:pointer;min-height:50px;
}
.sbf-form__upload input[type="file"]::file-selector-button{
  font:inherit;font-weight:600;font-family:var(--kop);text-transform:uppercase;letter-spacing:.04em;
  background:var(--inkt);color:#fff;border:0;border-radius:var(--radius);
  padding:9px 14px;margin-right:12px;cursor:pointer;
}
.sbf-form__upload input[type="file"]::file-selector-button:hover{background:var(--oranje)}
.sbf-sectie--donker .sbf-form__upload input[type="file"]{background:#fff}
.sbf-form__optioneel{font-weight:400;color:var(--tekst-zacht);font-size:13px}

/* Beeld in een artikel of op een vaste pagina */
.sbf-paginabeeld{margin:0 0 28px}
.sbf-paginabeeld img{width:100%;height:auto;border-radius:var(--radius-g)}

/* =================================================================
   Offertepagina: formulier eerst
   ================================================================= */
.sbf-offerte{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4vw,56px);align-items:start}
/* Het formulier is waar de bezoeker voor komt, dus het staat direct in beeld.
   Op een telefoon zetten we het helemaal bovenaan, boven de uitleg. */
.sbf-offerte__form{order:2}
.sbf-offerte__tekst{order:1}
.sbf-offerte__tekst h1{margin-top:4px}
@media (max-width:900px){
  .sbf-offerte{grid-template-columns:1fr;gap:26px}
  .sbf-offerte__form{order:1}
  .sbf-offerte__tekst{order:2}
}

/* =================================================================
   Aanvullingen op het overgenomen ontwerp
   Alles wat deze site heeft en de zustersite niet: de meldingen van het
   formulier, de foutstaat van een veld, en de eigen SVG-visuals.
   ================================================================= */

/* De melding na het verzenden. Staat boven het formulier en moet opvallen
   zonder te schreeuwen: een gekleurde rand links, geen vol vlak. */
.melding{
  margin:0 0 18px;padding:14px 16px;border-radius:var(--radius);
  border:1px solid var(--lijn-licht);border-left:4px solid var(--groen);
  background:#fff;font-size:15.5px;color:var(--tekst);
}
.melding--fout{border-left-color:var(--signaal)}
.sbf-cta .melding,.sbf-zijblok--donker .melding{background:rgba(255,255,255,.94)}

/* Een veld dat is afgekeurd. Alleen de rand kleurt; de tekst blijft leesbaar. */
.sbf-form--fout input,.sbf-form--fout textarea,.sbf-form--fout select{
  border-color:var(--signaal);box-shadow:0 0 0 3px rgba(194,82,31,.12);
}

/* Eigen SVG-visuals: de werkgebiedkaart en de doorsneden. Ze staan in dezelfde
   omlijsting als een foto, maar met lucht eromheen, want een tekening die tot
   tegen de rand loopt leest als een fout. */
.sbf-paginabeeld--svg{
  background:var(--warm);border:1px solid var(--lijn-licht);border-radius:var(--radius-g);
  padding:18px;margin:26px 0;
}
.sbf-paginabeeld--svg svg{width:100%;height:auto;display:block;color:var(--inkt)}
.sbf-paginabeeld figcaption{
  margin-top:10px;font-size:14.5px;color:var(--tekst-zacht);text-align:center;
}
.sbf-gebiedkaart svg text{font-family:var(--body)}

/* Het skiplinkanker. Zonder deze regel springt de pagina onder de vaste kop. */
#inhoud{scroll-margin-top:96px}
.sbf-artikel h2{scroll-margin-top:96px}

/* =================================================================
   Verbeterslag 3.1.1
   ================================================================= */

/* --- Beeld in de tekst: een inzet, geen poster ---------------------
   Het ging hier mis. De bronbeelden zijn 1100 bij 880, dus 5 staat tot 4, en
   `width:100%` in een kolom van 764 pixels maakte daar een beeld van 764 bij 611
   van. In een artikelblok zonder zijkolom was de kolom zelfs 1156 breed en werd
   het 1156 bij 925: een afbeelding die in zijn eentje meer dan een beeldscherm
   vult en de tekst eromheen wegdrukt. Een figuur in lopende tekst hoort een
   inzet te zijn. Vandaar een harde bovengrens op de breedte. */
.sbf-paginabeeld{margin:26px 0;max-width:480px}
.sbf-paginabeeld img{width:100%;height:auto;display:block;border-radius:var(--radius-g)}
/* Eigen visuals en de werkgebiedkaart zijn tekeningen met tekst erin. Die moeten
   juist breed staan, anders is het bijschrift onleesbaar. */
.sbf-paginabeeld--svg{max-width:none}

/* --- Artikelkolom zonder zijkolom ---------------------------------
   Alleen het eerste artikelblok krijgt de zijkolom. De blokken daarna liepen
   over de volle wrapbreedte door, met regels van ver boven de 85 tekens. */
/* Gecentreerd, niet links uitgelijnd. Links uitgelijnd blijft er een lege kolom
   van vierhonderd pixels rechts staan waar net nog de zijkolom stond, en dat leest
   als een blok dat de breedte niet vult. Gecentreerd leest het als een artikel. */
.sbf-artikel-solo{max-width:var(--smal);margin-left:auto;margin-right:auto}
/* Tabellen en roosters mogen wel breed blijven binnen dat blok. */
.sbf-artikel-solo .sbf-tabelwrap{max-width:none}

/* --- Formulier in de hero van de voorpagina ----------------------- */
.sbf-hero--form .sbf-hero__in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(30px,4vw,60px);align-items:center;
}
.sbf-hero--form .sbf-hero__tekst{max-width:none}
.sbf-hero--form .sbf-hero__sub{max-width:none}
/* Met een witte kaart rechts moet de overlay over de hele breedte donker genoeg
   blijven, anders valt de kaart weg tegen een lichte foto. */
.sbf-hero--form .sbf-hero__foto::after{
  background:linear-gradient(105deg,rgba(13,45,40,.92) 0%,rgba(18,58,51,.8) 52%,rgba(18,58,51,.58) 100%);
}
.sbf-hero__kaart{
  background:#fff;color:var(--tekst);border-radius:var(--radius-g);
  padding:clamp(20px,2.2vw,28px);box-shadow:0 20px 54px rgba(0,0,0,.32);
}
.sbf-hero__kaart h2{font-size:clamp(21px,2.1vw,26px);margin:0 0 6px;color:var(--inkt)}
.sbf-hero__kaart p{font-size:14.5px;color:var(--tekst-zacht);margin:0 0 18px;line-height:1.5}
.sbf-hero__kaart .sbf-form{gap:12px}
.sbf-hero__kaart .sbf-form button{width:100%}
.sbf-form--kort textarea{min-height:74px}

@media (max-width:1040px){
  .sbf-hero--form .sbf-hero__in{grid-template-columns:1fr;gap:34px}
  .sbf-hero__kaart{max-width:520px}
}
/* Op een telefoon staat de hele hero onder elkaar en werd hij 1780 pixels hoog.
   De drie punten staan direct eronder al in de cijferbalk, en de knop naar de
   offertepagina is overbodig zodra het formulier er zelf staat. Beide weg scheelt
   ruim 300 pixels voordat de bezoeker bij het formulier is. De vaste belbalk
   onderaan het scherm houdt bellen binnen een duimbeweging. */
@media (max-width:700px){
  .sbf-hero--form .sbf-hero__punten{display:none}
  .sbf-hero--form .sbf-hero__knoppen .sbf-btn--rand{display:none}
  .sbf-hero--form .sbf-hero__in{padding-top:36px;padding-bottom:34px}
  .sbf-hero--form .sbf-hero__sub{font-size:17px;margin-bottom:20px}
}

@media (max-width:560px){
  .sbf-paginabeeld{max-width:none}
}

/* --- Hardening: fouten die op eerdere sites zijn gemaakt ----------- */

/* De menubalk mag nooit naar een tweede regel klappen. Gebeurt dat wel, dan wordt
   de kop hoger, zakt de hero weg en leest het als een storing. Past het niet, dan
   moeten de labels korter; omklappen is geen uitweg. */
.sbf-nav{flex-wrap:nowrap;white-space:nowrap;min-width:0}
.sbf-nav a{white-space:nowrap}

/* Een tabel erft in een donkere band de witte tekstkleur terwijl hij zelf een
   witte achtergrond houdt. Dat gaf op een eerdere site een contrast van 1,00:
   de hele tabel onzichtbaar. De tabel zet zijn eigen kleuren, altijd. */
.sbf-tabel{color:var(--tekst)}
.sbf-tabel td{color:var(--tekst)}
.sbf-tabel th{color:#fff}
.sbf-sectie--donker .sbf-tabel,
.sbf-sectie--donker .sbf-tabel td{color:var(--tekst)}
.sbf-sectie--donker .sbf-tabel td:last-child{color:var(--inkt)}
.sbf-sectie--donker .sbf-tabel td a{color:var(--oranje-diep)}

/* Kaarten in een rooster: gelijke hoogte, ook als een kaart via flex wordt gezet. */
.sbf-kaart{height:100%}

/* Het telefoonnummer in de bovenbalk stond in de HTML maar had geen enkele regel. */
.sbf-balk__tel{display:flex;align-items:center;gap:7px;font-weight:600}
.sbf-balk__tel a{color:inherit;text-decoration:none}
.sbf-balk__tel a:hover{color:var(--amber)}

/* De hero stond niet uitgelijnd met de rest van de pagina. `.sbf-hero__in` is een
   .sbf-wrap, maar de eigen padding-shorthand zette links en rechts op 0. Gevolg:
   op een telefoon raakte de kop de schermrand en op een breed scherm stond de H1
   tweeentwintig pixels links van het logo erboven. */
.sbf-hero__in{padding-left:22px;padding-right:22px}

/* De zijkolom blijft meelopen zolang het artikel doorloopt. Anders staat er onder
   het contactblok een lege kolom, en is de offerteknop uit beeld precies wanneer de
   bezoeker klaar is met lezen. */
@media (min-width:1081px){
  .sbf-zij{position:sticky;top:96px}
}

/* Niet de laatste kolom maar de bedragenkolom mag niet afbreken. In de prijstabel
   staat de toelichting rechts; met nowrap daarop werd de tabel breder dan zijn
   kader en liep de tekst zichtbaar door de rand heen. */
.sbf-tabel td:last-child{white-space:normal}
.sbf-tabel td.sbf-tabel__prijs{white-space:nowrap;font-weight:600;color:var(--inkt)}
.sbf-tabel td:first-child{font-weight:600;color:var(--inkt)}
@media (max-width:640px){
  .sbf-tabel td.sbf-tabel__prijs{white-space:normal}
}

/* Koppen breken niet met een afbreekstreepje. "GE-SCHEIDEN" over twee regels in
   een hoofdletterkop leest als een zetfout, en juist in de hero valt dat op. Lange
   woorden mogen nog wel breken als ze anders buiten beeld lopen, maar zonder streep. */
h1,h2,h3,h4{hyphens:manual}
.sbf-hero h1{overflow-wrap:normal;word-break:normal}
@media (max-width:560px){
  .sbf-hero h1{overflow-wrap:break-word}
}