:root{
  /* Vedinet-palet: groen #5CAD33 uit de Vedi Group-tegel. Variabelenamen bewust behouden (zelfde skelet als de andere Vedi-sites). */
  --ink:#171C12; --green:#5CAD33; --green-dark:#3F7A23; --green-light:#EEF7E8;
  --sage:#E4F0DA; --sage-border:#CBE0BC; --sage-muted:#5A6B4E; --forest:#142B10;
  --cream:#F4F7F0; --cream-border:#E0E6D8; --cream-muted:#656C5E; --page:#FBFCF9;
  --vedinet:#5CAD33; --vedipaint:#F2A007; --vediworks:#E8731A; --vedicare:#067CD2;
  --display:'Archivo','Arial Narrow',system-ui,sans-serif;
  /* skeletvariabelen (zie kop van vedi-skelet.css) */
  --accent:#9FE07A; --accent-pale:#D7F3C4; --on-dark:#DCEBD0; --on-dark-muted:#A8BF99;
  --hero-bg:#142B10;
  /* Lichte hero (feedback Dirk 2026-09-21): de foto mag stralen, de sluier is enkel
     zo donker als nodig om witte tekst leesbaar te houden aan de linkerkant. */
  --hero-shade:linear-gradient(90deg,rgba(12,26,9,.68) 0%,rgba(12,26,9,.34) 46%,rgba(12,26,9,.08) 100%);
  --banner-bg:linear-gradient(90deg,rgba(20,43,16,.92),rgba(46,94,28,.85));
  --side-bg:linear-gradient(180deg,#2E5E1C,#142B10);
  --ctaband-bg:linear-gradient(90deg,#142B10 0%,#3F7A23 62%,#142B10 62%);
  --leaf-filter:invert(.62) sepia(.5) saturate(4) hue-rotate(58deg); --shadow-rgb:20,43,16;
}

/* ===== Vedinet-specifiek ===== */

/* Referentiekaarten — gevoed door /assets/referenties.json (bron: VediCore).
   Staat bewust hier en niet in het skelet: enkel vedinet.be toont projectreferenties
   uit de app. Verhuist naar vedi-skelet.css zodra een tweede merk hetzelfde doet. */
.refbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:26px 0 8px}
.refbar .seg{display:flex;flex-wrap:wrap;gap:6px}
.refbar button{font:600 13.5px/1 var(--display);letter-spacing:.02em;padding:9px 14px;border-radius:99px;
  border:1px solid var(--cream-border);background:#fff;color:var(--sage-muted);cursor:pointer;transition:.15s}
.refbar button:hover{border-color:var(--green);color:var(--green-dark)}
.refbar button[aria-pressed="true"]{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.refbar input[type=search]{flex:1;min-width:190px;padding:10px 14px;border:1px solid var(--cream-border);
  border-radius:99px;font-size:14.5px;background:#fff;color:var(--ink)}
.refbar input[type=search]:focus{outline:2px solid var(--green);outline-offset:1px}
.refcount{font-size:13.5px;color:var(--cream-muted);margin:6px 0 20px}

.refgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.refcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cream-border);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 12px 30px -24px rgba(var(--shadow-rgb),.55);transition:.18s}
.refcard:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 18px 38px -22px rgba(var(--shadow-rgb),.6)}
.refcard .im{position:relative;aspect-ratio:3/2;background:var(--sage);overflow:hidden}
.refcard .im img{width:100%;height:100%;object-fit:cover;display:block}
.refcard .im.none{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--sage) 0%,var(--green-light) 100%)}
.refcard .im.none span{font:800 13px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;
  color:var(--green-dark);opacity:.62;text-align:center;padding:0 14px}
.refcard .rb{position:absolute;left:10px;top:10px;font:700 11px/1 var(--display);letter-spacing:.08em;
  text-transform:uppercase;padding:6px 10px;border-radius:99px;background:rgba(20,43,16,.82);color:#fff;backdrop-filter:blur(3px)}
.refcard .rb.lopend{background:var(--green);color:#fff}
.refcard .rc{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.refcard h3{font-size:15.5px;line-height:1.3;margin:0;color:var(--forest)}
.refcard .meta{font-size:13px;color:var(--cream-muted)}
.refcard .meta b{color:var(--green-dark);font-weight:700}
.refcard p{font-size:13.5px;color:var(--sage-muted);margin:0}
.refcard .tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:5px;padding-top:8px}
.refcard .tags i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 8px;border-radius:5px;background:var(--green-light);color:var(--green-dark)}
.refmore{text-align:center;margin-top:28px}
.refempty{padding:40px 0;text-align:center;color:var(--cream-muted)}

/* Aannemerslijst op /bouwbedrijven/ en in de home-sectie */
.bedrijven{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:22px}
.bedrijven a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:11px 14px;
  border:1px solid var(--cream-border);border-radius:10px;background:#fff;text-decoration:none;
  color:var(--forest);font-weight:600;font-size:14.5px;transition:.15s}
.bedrijven a:hover{border-color:var(--green);color:var(--green-dark)}
.bedrijven a small{font-family:var(--display);font-weight:800;color:var(--green-dark);font-size:13px}

/* Deelknoppen op een referentiedetail */
.share{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.share a,.share button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:99px;
  border:1px solid var(--cream-border);background:#fff;color:var(--forest);font-weight:600;font-size:14px;
  text-decoration:none;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--green);color:var(--green-dark)}

/* Opsomming met vinkjes op de dienstpagina's (merk-specifiek zolang enkel
   vedinet.be dienstpagina's in dit formaat heeft). */
.ulist{list-style:none;margin:20px 0 0;display:grid;gap:2px}
.ulist li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15.5px;
  color:var(--sage-muted);border-top:1px solid var(--cream-border)}
.ulist li:first-child{border-top:0}
.ulist li::before{content:"✓";color:var(--green-dark);font-weight:800;line-height:1.5}
.ulist a{color:var(--green-dark);font-weight:600}

/* Mobiel: lange knoplabels en de aannemerskeuze mogen de pagina niet breder
   maken dan het scherm (zelfde bug als eerder op VediWorks, 2026-09-17). */
.refbar select{max-width:100%;flex:1 1 190px;min-width:0}
.refbar input[type=search]{max-width:100%}
@media(max-width:600px){
  .nav-links .btn{display:none}
  .refbar{gap:8px}
  .refbar .seg{width:100%}
}

/* Lange Nederlandse samenstellingen ("opleveringsschoonmaak") passen op een
   smal scherm niet in één regel en duwden de pagina 84 px breder. Kandidaat
   voor vedi-skelet.css zodra een tweede merk hetzelfde nodig heeft. */
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}

/* Lichte herofoto: tekst krijgt een zachte schaduw i.p.v. een donkere sluier. */
.ghero h1,.ghero .tg,.ghero .lead,.ghero .kicker{text-shadow:0 2px 14px rgba(8,20,6,.45)}
.ghero .script{text-shadow:0 2px 10px rgba(8,20,6,.5)}

/* ── Lichte hero zonder zijpaneel (beslissing Dirk 2026-09-21) ──────────────
   Vedinet volgt kopie-van-home: de foto draagt de hero, er ligt geen donker
   blok meer overheen. Het zijpaneel "Waarom Vedinet" is vervangen door de
   lichte cijferstrook onder de hero. De offertebanner blijft, maar slanker en
   half doorzichtig. Voorlopig ENKEL vedinet.be — de andere vier merken houden
   het volle skelet tot Dirk beslist het door te trekken. */
.ghero .hero-wrap{grid-template-columns:1fr}
/* Zonder banner start de hero-inhoud wat lager, zodat de titel niet tegen de nav plakt. */
.ghero .main{padding:54px 0 0}
.ghero .kicker{margin-top:0}
.ghero .lead{max-width:620px}
.ghero .script{right:60px;top:200px}
.tiles{max-width:1000px;margin-top:26px}

@media(max-width:980px){.tiles{max-width:none}}

/* De cijferstrook staat op vedinet.be meteen onder de hero en moet dus licht
   blijven — een donkere band daar maakt de bovenkant van de pagina opnieuw zwaar.
   Enkel deze eerste strook (.stats.light); een latere donkere band blijft mogelijk. */
.stats.light{background:var(--page);color:var(--ink);border-bottom:1px solid var(--cream-border)}
.stats.light .stat b{color:var(--green-dark)}
.stats.light .stat span{color:var(--cream-muted)}

/* Handschrift ligt op een lichte lucht: iets steviger schaduw voor contrast. */
.ghero .script{text-shadow:0 2px 16px rgba(8,20,6,.75),0 0 3px rgba(8,20,6,.35)}

/* ── Footer: lichter en compacter (feedback Dirk 2026-09-21) ────────────────
   De logobalk van de groep blijft, maar op één nette rij zonder de
   omschrijvingen die afbraken ("Opleveringsschoo en werfopkuis").
   Voorlopig enkel vedinet.be. */
footer{padding:48px 0 0}
/* Let op: deze kolomverdeling mag alleen op desktop gelden — zonder media query
   overschrijft ze de mobiele regels uit vedi-skelet.css (die eerder geladen wordt)
   en liep de footer 327 px buiten het scherm. */
@media(min-width:981px){.fcols{grid-template-columns:1.25fr 1.15fr 1fr .75fr;gap:34px;padding-bottom:34px}}
.fcols{padding-bottom:34px}
.fcol{font-size:14px;gap:10px}
.fcol a{line-height:1.35}
.brandcol p{font-size:14px;line-height:1.55}
.two-col{gap:9px 22px}
.fscript{font-size:22px;margin-top:16px}

.groupbar{grid-template-columns:auto repeat(4,auto);justify-content:center;
  gap:12px;padding:18px 0;flex-wrap:wrap}
.groupbar .gtitle{padding-right:14px}
.groupbar a{justify-content:center}
.groupbar .lg{width:116px;height:40px}
.groupbar .lg img{height:30px;width:100px}
@media(max-width:980px){.groupbar{grid-template-columns:repeat(2,auto)}}
@media(max-width:600px){.groupbar{grid-template-columns:repeat(2,auto);gap:10px}.groupbar .gtitle{grid-column:1/-1;text-align:center;padding:0 0 6px}}

/* Groupbar als flexrij i.p.v. grid: auto-kolommen liepen op mobiel 371 px
   buiten het scherm. */
.groupbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 12px}
.groupbar a{flex:0 0 auto}
@media(max-width:600px){
  .groupbar .gtitle{flex:1 0 100%;text-align:center;padding:0 0 4px}
  .groupbar .lg{width:104px;height:36px}
  .groupbar .lg img{height:26px;width:88px}
}

/* ── Strook met uitgelichte projecten op de home ────────────────────────────
   Kleinere kaarten op één rij die vanzelf doorschuift zodra er meer zijn dan
   er passen (pauzeert bij hover/aanraking, staat stil bij prefers-reduced-motion).
   Welke projecten hier staan, bepaalt VediCore met de vlag `uitgelicht`. */
.refstrip-wrap{position:relative;margin-top:26px}
.refstrip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding:4px 2px 10px;scrollbar-width:none;-ms-overflow-style:none}
.refstrip::-webkit-scrollbar{display:none}
.refstrip .refcard{scroll-snap-align:start}

.refcard.sm{flex:0 0 236px;border-radius:12px}
.refcard.sm .im{aspect-ratio:4/3}
.refcard.sm .rc{padding:11px 13px 13px;gap:4px}
.refcard.sm h3{font-size:14px;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.refcard.sm .meta{font-size:12px}
.refcard.sm .rb{font-size:10px;padding:4px 8px;left:8px;top:8px}
.refcard.sm .im.none span:first-child{font-size:11.5px}

.rs-nav{position:absolute;top:calc(50% - 16px);transform:translateY(-50%);z-index:4;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--cream-border);
  background:#fff;color:var(--green-dark);font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(var(--shadow-rgb),.5);display:flex;align-items:center;justify-content:center}
.rs-nav:hover{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
.rs-nav span{margin-top:-3px}
.rs-prev{left:-18px}
.rs-next{right:-18px}
@media(max-width:1100px){.rs-prev{left:2px}.rs-next{right:2px}}
@media(max-width:600px){.refcard.sm{flex-basis:200px}.rs-nav{display:none!important}}
/* Gelijke hoogte in de strook: titel altijd twee regels, geen lege ruimte onder. */
.refcard.sm .rc{flex:0 0 auto}
.refcard.sm h3{min-height:2.56em}

/* ── Rustiger koppen (feedback Dirk 2026-09-21: "iets te schreeuwerig") ─────
   Minder zwaar en iets kleiner dan in het skelet; enkel vedinet.be. */
h2{font-weight:700;font-size:30px;letter-spacing:-.015em}
h3{font-weight:700}
.over-grid h2,.contact h2{font-size:29px;font-weight:700}
.ghero h1{font-weight:800}

/* Kicker zonder pil-achtergrond, zoals in de mockup. */
.kicker.plain{background:none;border:0;padding:0;margin-bottom:10px;
  font-size:12px;letter-spacing:.12em;color:var(--green-dark)}

/* Sectiekop: titel · doorlopende lijn · link rechts. */
.sec-head{display:flex;align-items:center;gap:22px;margin-bottom:26px}
.sec-head h2{margin:0;flex:0 0 auto}
.sec-head .rule{flex:1 1 auto;height:1px;background:var(--sage-border);min-width:24px}
.sec-head .sec-link{flex:0 0 auto;font-size:14.5px;font-weight:600;color:var(--green-dark);
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sec-head .sec-link:hover{color:var(--green)}
.sec-head .sec-link .arr{transition:transform .15s}
.sec-head .sec-link:hover .arr{transform:translateX(3px)}
@media(max-width:720px){
  .sec-head{flex-wrap:wrap;gap:10px}
  .sec-head h2{flex:1 0 100%}
  .sec-head .rule{display:none}
  .sec-head .sec-link{font-size:14px}
}
.refcard.sm .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Waardenbalk pal onder de hero (feedback Dirk 2026-09-21) ───────────────
   In het skelet houdt deze balk 74 px bovenruimte vrij voor het hero-zijpaneel
   dat eroverheen schuift. Dat paneel bestaat op vedinet.be niet meer, dus die
   ruimte mag weg: de balk plakt nu tegen de hero, zoals in Dirks mockup. */
.values .wrap.two{grid-template-columns:1fr;min-height:0;gap:0}
.values .row{padding:15px 0;justify-content:center;gap:0 4px;row-gap:12px}
.values .v{font-size:10px;letter-spacing:.06em;padding:0 18px;border-right:1px solid var(--sage-border)}
.values .v:first-child{padding-left:0}
.values .v:last-child{padding-right:0}
@media(max-width:980px){.values .row{padding:14px 0}}
@media(max-width:680px){
  .values .row{justify-content:flex-start;gap:8px 0}
  .values .v{padding:0 12px 0 0;border-right:0;flex:0 0 auto}
}

/* ── Compactere secties (feedback Dirk 2026-09-21: te veel lucht ertussen) ──
   Skelet staat op 84 px boven en onder; op vedinet.be 52 px, met kleinere
   marges rond kickers, leads en kaartenrasters. Enkel dit merk. */
section{padding:52px 0}
.stats{padding:34px 0!important}
.kicker{margin-bottom:12px}
.kicker.plain{margin-bottom:8px}
.lead{margin-bottom:0}
.sec-head{margin-bottom:22px}
.cards{margin-top:28px}
.steps,.gallery,.premie,.regio,.faq{margin-top:26px}
.refstrip-wrap{margin-top:20px}
.why .over-grid{gap:34px}
@media(max-width:680px){section{padding:40px 0}}

/* ── Referentiedetailpagina (gegenereerd door VediCore, BESL-127) ──────────
   Merk-specifiek zolang vedinet.be de enige site met gegenereerde referenties
   is; kandidaat voor vedi-skelet.css zodra een tweede merk ze krijgt.
   Het sjabloon staat in referenties/_detail-template.html; de klassen hieronder
   zijn de containers, VediCore levert de items (li/p/figure/a) zonder klasse. */
.refhero{background:var(--forest);color:#fff;padding:52px 0 44px}
.refhero .refkruimel{font-size:13px;color:var(--on-dark-muted);margin-bottom:12px}
.refhero .refkruimel a{color:var(--on-dark-muted)}
.refhero .rb{display:inline-block;font:700 11px/1 var(--display);letter-spacing:.08em;
  text-transform:uppercase;padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff}
.refhero .rb.lopend{background:var(--green);color:#fff}
.refhero h1{color:#fff;font-size:clamp(28px,3.8vw,44px);margin:12px 0 10px;max-width:16em}
.refhero .refmeta{color:rgba(255,255,255,.88);font-size:16px}

.refdetail-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.refbeeld{width:100%;height:auto;border-radius:14px;display:block;margin-bottom:26px}
.reftekst p{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 14px}
.refgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:26px}
.refgal figure{margin:0}
.refgal img{width:100%;height:auto;border-radius:10px;display:block}

.refzij{display:flex;flex-direction:column;gap:16px;position:sticky;top:96px}
.refkaart{background:#fff;border:1px solid var(--cream-border);border-radius:14px;padding:18px 20px}
.refkaart h2{font-size:15px;margin:0 0 12px;color:var(--forest)}
.refkaart p{font-size:14px;color:var(--cream-muted);margin:0 0 12px}
.refkaart .btn{width:100%;justify-content:center;margin-top:6px}
.refcijfers{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.refcijfers li{display:flex;flex-direction:column}
.refcijfers b{font:800 20px/1.1 var(--display);color:var(--green-dark)}
.refcijfers span{font-size:12.5px;color:var(--cream-muted);text-transform:uppercase;letter-spacing:.07em}
.reffeiten{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13.5px}
.reffeiten dt{color:var(--cream-muted)}
.reffeiten dd{margin:0;color:var(--ink);font-weight:600}

.refandere-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:22px}
.refandere-grid a{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cream-border);
  border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.18s}
.refandere-grid a:hover{border-color:var(--green);transform:translateY(-3px)}
.refandere-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.refandere-grid span{padding:12px 14px;font-size:14.5px;font-weight:600;color:var(--forest)}

/* Lege blokken vallen weg. Het sjabloon kent bewust geen condities (zie
   src/lib/referentie/template.ts): een referentie zonder galerij, zonder
   kerncijfers of zonder zusterprojecten zou anders een kop met niets eronder
   tonen. :empty en :has doen dat hier zonder een regel JavaScript. */
.refgal:empty,.refcijfers:empty,.refandere-grid:empty{display:none}
.refandere:has(.refandere-grid:empty){display:none}
.reftekst:empty{display:none}

@media(max-width:900px){
  .refdetail-grid{grid-template-columns:1fr;gap:26px}
  .refzij{position:static}
}

/* ── Footer: geen snelkoppelingen meer, wél de juridische gegevens ──────────
   (Dirk 2026-09-21). Logo links uitgelijnd op dezelfde bovenlijn als de
   kolomtitels ernaast. */
@media(min-width:981px){.fcols{grid-template-columns:1.6fr .9fr .6fr;gap:44px}}
/* Het logo is een flex-item in een kolom-flexbox: zonder align-self rekt het
   over de volle kolombreedte uit (518×54 i.p.v. 151×54) en wordt het plat
   getrokken. Dat was de 'scheve' footer-logo van 22/09. */
.brandcol img{display:block;align-self:flex-start;height:54px;width:auto;
  max-width:100%;object-fit:contain;margin:0 0 14px}
.brandcol p{margin:0 0 16px;max-width:420px}
.legal{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--cream-muted);line-height:1.45}
.legal b{color:var(--ink);font-weight:700}
.fcol h5{margin-top:6px}

/* Twee knoppen onder het contactformulier: versturen, of doorgaan naar de
   offertepagina mét de al ingevulde gegevens (assets/overnemen.js). */
.form-acties{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.form-acties .btn{flex:1 1 180px;text-align:center;white-space:nowrap;padding:13px 18px;font-size:14.5px}
.form-hint{font-size:12.5px;color:var(--cream-muted);margin-top:10px;line-height:1.45}
.overgenomen{background:var(--green-light);border:1px solid var(--sage-border);border-radius:10px;
  padding:11px 14px;font-size:13.5px;color:var(--green-dark);font-weight:600;margin-bottom:18px}
@media(max-width:600px){.form-acties .btn{flex:1 1 100%}}