/* =================================================================
   Sloopbedrijf Eindhoven — stijl
   Donker, industrieel en strak. Eén bestand, geen framework.
   ================================================================= */

:root{
  --inkt:#12161b;
  --inkt-2:#1b2128;
  --inkt-3:#252d36;
  --lijn:rgba(255,255,255,.10);
  --lijn-licht:#e3ded6;
  --papier:#f7f5f2;
  --papier-2:#efebe5;
  --warm:#fdf2e8;
  --wit:#fff;
  --oranje:#ff6a13;
  --oranje-diep:#e05500;
  --amber:#f5a524;
  --tekst:#2b3138;
  --tekst-zacht:#5d6670;
  --tekst-omgekeerd:rgba(255,255,255,.76);
  --groen:#1e8f5a;
  --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(18,22,27,.06), 0 8px 24px rgba(18,22,27,.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)}
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}

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

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

/* --- knoppen --- */
.sbe-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;
}
.sbe-btn--primair{background:var(--oranje);color:#fff;border-color:var(--oranje)}
.sbe-btn--primair:hover{background:var(--oranje-diep);border-color:var(--oranje-diep)}
.sbe-btn--rand{background:transparent;color:var(--inkt);border-color:var(--inkt)}
.sbe-btn--rand:hover{background:var(--inkt);color:#fff}
.sbe-sectie--donker .sbe-btn--rand{color:#fff;border-color:rgba(255,255,255,.42)}
.sbe-sectie--donker .sbe-btn--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}
.sbe-btn--wit{background:#fff;color:var(--inkt);border-color:#fff}
.sbe-btn--wit:hover{background:var(--papier-2);border-color:var(--papier-2)}
.sbe-btn svg{width:20px;height:20px;flex:0 0 auto}

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

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

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

.sbe-nav{display:flex;align-items:center;gap:1px}
.sbe-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;
}
.sbe-nav a:hover,.sbe-nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.08)}
.sbe-kop__cta{display:flex;align-items:center;gap:10px}
.sbe-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;
}
.sbe-kop__tel:hover{border-color:var(--amber)}
.sbe-kop__tel svg{width:20px;height:20px;color:var(--amber)}
.sbe-kop__offerte{
  padding:11px 16px;min-height:44px;font-size:15px;white-space:nowrap;flex:0 0 auto;
}
.sbe-kop__offerte svg{width:17px;height:17px}
/* De lange labeltekst "aanvragen" verschijnt pas op ruime schermen */
.sbe-kop__offerte-lang{display:none}
@media (min-width:1400px){ .sbe-kop__offerte-lang{display:inline} }

.sbe-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;
}
.sbe-burger svg{width:22px;height:22px}
.sbe-mobiel{display:none;background:var(--inkt-2);border-top:1px solid var(--lijn);padding:10px 0 18px}
.sbe-mobiel.is-open{display:block}
.sbe-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
   ================================================================= */
.sbe-hero{position:relative;background:var(--inkt);color:#fff;overflow:hidden}
.sbe-hero__foto{position:absolute;inset:0}
.sbe-hero__foto img{width:100%;height:100%;object-fit:cover;opacity:.34}
.sbe-hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(18,22,27,.96) 0%,rgba(18,22,27,.86) 45%,rgba(18,22,27,.45) 100%);
}
.sbe-hero__in{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(48px,6vw,86px)}
.sbe-hero__tekst{max-width:720px}
.sbe-hero h1{color:#fff}
.sbe-hero__sub{font-size:clamp(18px,2.1vw,21px);color:rgba(255,255,255,.82);max-width:600px;margin-bottom:26px}
.sbe-hero__knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
.sbe-hero__punten{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:0;font-size:15.5px}
.sbe-hero__punten li{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.86);margin:0}
.sbe-hero__punten svg{width:17px;height:17px;color:var(--amber);flex:0 0 auto}

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

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

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

.sbe-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.sbe-kaart:hover{border-color:var(--oranje);transform:translateY(-2px);box-shadow:var(--schaduw)}
.sbe-kaart__icoon{width:42px;height:42px;color:var(--oranje)}
.sbe-kaart__icoon svg{width:100%;height:100%}
.sbe-kaart h3{margin:0;font-size:21px}
.sbe-kaart p{margin:0;font-size:15.5px;color:var(--tekst-zacht)}
.sbe-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;
}
.sbe-kaart__prijs svg{width:16px;height:16px;color:var(--oranje)}

.sbe-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.sbe-fotokaart:hover{border-color:var(--oranje);transform:translateY(-2px);box-shadow:var(--schaduw)}
.sbe-fotokaart img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sbe-fotokaart__in{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.sbe-fotokaart h3{margin:0;font-size:20px}
.sbe-fotokaart p{margin:0;font-size:15px;color:var(--tekst-zacht)}
.sbe-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 */
.sbe-plaatsen{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;list-style:none;padding:0;margin:0}
.sbe-plaatsen>*{min-width:0}
.sbe-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;
}
.sbe-plaatsen a:hover{border-color:var(--oranje);color:var(--oranje)}
.sbe-plaatsen svg{width:15px;height:15px;color:var(--oranje);flex:0 0 auto}
.sbe-sectie--donker .sbe-plaatsen a{background:var(--inkt-3);border-color:var(--lijn);color:#fff}
.sbe-sectie--donker .sbe-plaatsen a:hover{border-color:var(--amber);color:var(--amber)}

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

.sbe-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);
}
.sbe-samenvatting p:last-child{margin-bottom:0}
.sbe-samenvatting strong{color:#fff}

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

/* stappen */
.sbe-stap{border-left:2px solid var(--lijn-licht);padding:0 0 30px 26px;position:relative}
.sbe-stap:last-child{padding-bottom:4px}
.sbe-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;
}
.sbe-stap h3{margin:2px 0 8px;padding-left:26px}
.sbe-stap__body p{margin-bottom:.8em}

/* prijstabel */
.sbe-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}
.sbe-tabel th,.sbe-tabel td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--lijn-licht);vertical-align:top}
.sbe-tabel th{background:var(--inkt);color:#fff;font-family:var(--kop);text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.sbe-tabel td:last-child{white-space:nowrap;font-weight:600;color:var(--inkt)}
.sbe-tabel tr:last-child td{border-bottom:0}
.sbe-tabelwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* faq */
.sbe-faq{border-top:1px solid var(--lijn-licht)}
.sbe-faq details{border-bottom:1px solid var(--lijn-licht)}
.sbe-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;
}
.sbe-faq summary::-webkit-details-marker{display:none}
.sbe-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;
}
.sbe-faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.sbe-faq details>div{padding:0 0 18px;color:var(--tekst-zacht)}

/* zijkolom */
.sbe-zij{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.sbe-zijblok{background:#fff;border:1px solid var(--lijn-licht);border-radius:var(--radius-g);padding:22px}
.sbe-zijblok--donker{background:var(--inkt);border-color:var(--inkt);color:var(--tekst-omgekeerd)}
.sbe-zijblok--donker h3{color:#fff}
.sbe-zijblok h3{font-size:20px;margin:0 0 12px}
.sbe-zijblok ul{list-style:none;padding:0;margin:0}
.sbe-zijblok li{margin-bottom:2px}
.sbe-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);
}
.sbe-zijblok li:last-child a{border-bottom:0}
.sbe-zijblok li a:hover{color:var(--oranje)}
.sbe-zijblok li a svg{width:14px;height:14px;color:var(--oranje);flex:0 0 auto}
.sbe-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;
}
.sbe-zijblok__tel:hover{background:var(--oranje-diep)}

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

/* citaat */
.sbe-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;
}
.sbe-citaat p{margin-bottom:.5em}
.sbe-citaat cite{font-style:normal;font-size:14.5px;color:var(--tekst-zacht)}

/* waarschuwing */
.sbe-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;
}
.sbe-let-op h3{margin:0 0 8px;font-size:19px}
.sbe-let-op p:last-child{margin-bottom:0}

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

/* =================================================================
   Formulier
   ================================================================= */
.sbe-form{display:flex;flex-direction:column;gap:14px}
.sbe-form__rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sbe-form__rij>*{min-width:0}
.sbe-form label{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:600;color:var(--inkt)}
.sbe-sectie--donker .sbe-form label{color:#fff}
.sbe-form input,.sbe-form textarea,.sbe-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%;
}
.sbe-form textarea{min-height:120px;resize:vertical}
.sbe-form input:focus,.sbe-form textarea:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:var(--oranje)}
.sbe-form__hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.sbe-form__klein{font-size:14px;color:var(--tekst-zacht);margin:0}
.sbe-sectie--donker .sbe-form__klein{color:var(--tekst-omgekeerd)}
.sbe-form__melding{padding:13px 16px;border-radius:var(--radius);font-size:15.5px;margin:0}
.sbe-form__melding--ok{background:#e7f6ee;color:#14603c;border:1px solid #a9dcc2}
.sbe-form__melding--fout{background:#fdeceb;color:#8c2018;border:1px solid #f3bdb8}

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

/* =================================================================
   Footer
   ================================================================= */
.sbe-voet{background:var(--inkt);color:var(--tekst-omgekeerd);padding:56px 0 0;border-top:1px solid var(--lijn)}
.sbe-voet__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
.sbe-voet__grid>*{min-width:0}
.sbe-voet h3{font-size:18px;color:#fff;letter-spacing:.06em}
.sbe-voet ul{list-style:none;padding:0;margin:0;font-size:15.5px}
.sbe-voet li{margin-bottom:2px}
.sbe-voet a{text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.sbe-voet a:hover{color:#fff;text-decoration:underline}
.sbe-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;
}
.sbe-voet__dienstenlijst{columns:2;column-gap:24px}

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

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

/* toegankelijkheid: grotere raakvlakken op touch */
@media (max-width:980px){
  .sbe-kruimels a,.sbe-faq summary,.sbe-voet a{min-height:44px}
  .sbe-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}
.sbe-logo__mark{width:38px;height:38px}
.sbe-kaart__icoon svg{width:100%;height:100%}
.sbe-zijblok__tel svg{width:22px;height:22px}
.sbe-hero__punten svg{width:17px;height:17px}
.sbe-balk svg{width:15px;height:15px}

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

/* Links in lopende tekst duidelijk herkenbaar */
.sbe-artikel p a,.sbe-artikel li a{color:var(--oranje-diep);text-underline-offset:2px}
.sbe-artikel p a:hover,.sbe-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. */
  .sbe-balk__in{justify-content:center;text-align:center;gap:4px 16px;min-height:0}
  .sbe-balk ul.sbe-balk__usp{display:none}
  .sbe-balk ul.sbe-balk__contact{justify-content:center}
  .sbe-balk{font-size:13.5px}
  .sbe-balk__in{padding-block:8px}

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

@media (max-width:400px){
  .sbe-balk{font-size:12.5px}
  .sbe-logo{gap:8px}
  .sbe-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){
  .sbe-bel{
    left:0;right:0;bottom:0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:rgba(18,22,27,.94);backdrop-filter:blur(6px);
    border-top:1px solid var(--lijn);
  }
  .sbe-bel .sbe-btn{min-height:48px;padding:12px 14px;font-size:17px}
  body{padding-bottom:74px}
}

/* =================================================================
   Bestand-upload in het offerteformulier
   ================================================================= */
.sbe-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:#fbfaf8;width:100%;cursor:pointer;min-height:50px;
}
.sbe-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;
}
.sbe-form__upload input[type="file"]::file-selector-button:hover{background:var(--oranje)}
.sbe-sectie--donker .sbe-form__upload input[type="file"]{background:#fff}
.sbe-form__optioneel{font-weight:400;color:var(--tekst-zacht);font-size:13px}