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