:root{
  --cms-hoofd: #1f6feb;
  --cms-accent: #1f6feb;
  --cms-tekst: #222222;
  --cms-achtergrond: #ffffff;
  --cms-letter-kop: inherit;
  --cms-letter-tekst: inherit;
  --cms-afronding: 0px;
  --cms-breedte: 1100px;
}
body{color:var(--cms-tekst);background:var(--cms-achtergrond);font-family:var(--cms-letter-tekst);}
h1,h2,h3,h4{color:var(--cms-hoofd);font-family:var(--cms-letter-kop);}
a{color:var(--cms-hoofd);}
a:hover{color:var(--cms-accent);}
.site-header,.site-main,.site-footer{max-width:var(--cms-breedte);margin-left:auto;margin-right:auto;}
.site-logo img{max-height:60px;width:auto;display:block;}
.cms-knop,button,input[type=submit]{background:var(--cms-hoofd);color:#fff;border:0;border-radius:var(--cms-afronding);padding:10px 18px;}
.cms-knop:hover,button:hover{background:var(--cms-accent);}
.cms-blok img,.cms-afbeelding img{border-radius:var(--cms-afronding);max-width:100%;height:auto;}
.cms-verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}.cms-calculator{display:grid;grid-template-columns:2fr 1fr;gap:2em;align-items:start;}.cms-calculator-velden{min-width:0;}.cms-calculator-totaal{position:sticky;top:1em;}.cms-calculator-regels div{display:flex;justify-content:space-between;gap:1em;}.cms-calculator-som{display:flex;align-items:baseline;justify-content:space-between;gap:.5em;flex-wrap:wrap;}.cms-formulier-schuif output{margin-left:.5em;}@media(max-width:700px){.cms-calculator{grid-template-columns:1fr;}}.cms-chatform{--cf-hoofd:var(--cms-hoofd,#1f6feb);--cf-accent:var(--cms-accent,var(--cms-hoofd,#1f6feb));font-family:var(--cms-letter-tekst,inherit);font-size:15px;line-height:1.45;color:#222;}.cms-chatform [hidden]{display:none !important;}.cms-chatform .cms-verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}.cms-chatform .cms-chatform-venster{display:flex;flex-direction:column;max-width:520px;background:#fff;border:1px solid #e3e5e8;border-radius:var(--cms-afronding,12px);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12);}.cms-chatform .cms-chatform-kop{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--cf-hoofd);color:#fff;}.cms-chatform .cms-chatform-kop .cms-chatform-naam{flex:1;font-weight:600;}.cms-chatform .cms-chatform-icoon{width:32px;height:32px;flex:0 0 auto;border-radius:50%;object-fit:cover;background:#fff;}.cms-chatform svg.cms-chatform-icoon{box-sizing:border-box;padding:6px;color:var(--cf-hoofd);}.cms-chatform .cms-chatform-knop,.cms-chatform .cms-chatform-dicht{display:none;}.cms-chatform .cms-chatform-voortgang{height:4px;background:#e8ebf0;}.cms-chatform .cms-chatform-voortgang span{display:block;width:0;height:100%;background:var(--cf-accent);transition:width .3s;}.cms-chatform .cms-chatform-lijst{display:flex;flex-direction:column;gap:8px;height:320px;overflow-y:auto;padding:14px;background:#f5f6f8;}.cms-chatform .cms-chatform-bot,.cms-chatform .cms-chatform-ik{display:flex;align-items:flex-end;gap:8px;}.cms-chatform .cms-chatform-bot .cms-chatform-icoon{width:26px;height:26px;}.cms-chatform .cms-chatform-bot svg.cms-chatform-icoon{padding:4px;}.cms-chatform .cms-chatform-bot p,.cms-chatform .cms-chatform-ik p{max-width:80%;margin:0;padding:8px 12px;border-radius:14px;white-space:pre-line;}.cms-chatform .cms-chatform-bot p{background:#fff;border-bottom-left-radius:4px;}.cms-chatform .cms-chatform-bot small{display:block;margin-top:2px;font-size:13px;opacity:.7;}.cms-chatform .cms-chatform-ik{justify-content:flex-end;}.cms-chatform .cms-chatform-ik p{background:var(--cf-hoofd);color:#fff;border-bottom-right-radius:4px;}.cms-chatform .cms-chatform-form{margin:0;padding:10px 12px;background:#fff;border-top:1px solid #e3e5e8;}.cms-chatform-js .cms-formulier-veld label,.cms-chatform-js .cms-formulier-veld small{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}.cms-chatform .cms-formulier-veld input[type=text],.cms-chatform .cms-formulier-veld input[type=email],.cms-chatform .cms-formulier-veld input[type=tel],.cms-chatform .cms-formulier-veld input[type=number],.cms-chatform .cms-formulier-veld textarea,.cms-chatform .cms-formulier-veld select{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #ccd;border-radius:8px;font:inherit;}.cms-chatform .cms-formulier-veld input[type=range]{width:80%;}.cms-chatform .cms-chatform-keuzes{display:flex;flex-wrap:wrap;gap:6px;}.cms-chatform .cms-chatform-keuzes:empty{display:none;}.cms-chatform .cms-chatform-keuze{padding:6px 14px;background:#fff;color:var(--cf-hoofd);border:1px solid var(--cf-hoofd);border-radius:18px;font:inherit;cursor:pointer;}.cms-chatform .cms-chatform-keuze:hover,.cms-chatform .cms-chatform-keuze:focus-visible{background:var(--cf-hoofd);color:#fff;}.cms-chatform .cms-chatform-bediening{display:flex;align-items:center;gap:8px;margin-top:8px;}.cms-chatform .cms-chatform-bediening button{border:0;border-radius:8px;padding:8px 16px;font:inherit;cursor:pointer;}.cms-chatform .cms-chatform-verder{margin-left:auto;background:var(--cf-hoofd);color:#fff;}.cms-chatform .cms-chatform-verder:hover{background:var(--cf-accent);}.cms-chatform .cms-chatform-terug,.cms-chatform .cms-chatform-terug:hover{padding-left:0;background:none;color:#555;text-decoration:underline;}.cms-chatform .cms-chatform-slot{margin-top:8px;}.cms-chatform-bubbel{position:fixed;right:20px;bottom:20px;z-index:99998;display:flex;flex-direction:column;align-items:flex-end;}.cms-chatform-bubbel .cms-chatform-knop{display:inline-flex;align-items:center;gap:8px;padding:8px 18px 8px 8px;background:var(--cf-hoofd);color:#fff;border:0;border-radius:30px;font:inherit;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer;}.cms-chatform-bubbel .cms-chatform-knop:hover{background:var(--cf-accent);}.cms-chatform-bubbel .cms-chatform-dicht{display:block;padding:0 4px;background:none;color:#fff;border:0;font-size:22px;line-height:1;cursor:pointer;}.cms-chatform-bubbel .cms-chatform-dicht:hover{background:none;}.cms-chatform-bubbel .cms-chatform-venster{width:360px;max-width:calc(100vw - 40px);}.cms-chatform-bubbel .cms-chatform-lijst{height:340px;max-height:50vh;}.cms-chatform-bubbel.cms-chatform-js .cms-chatform-venster{display:none;}.cms-chatform-bubbel.cms-chatform-open .cms-chatform-venster{display:flex;}.cms-chatform-bubbel.cms-chatform-open .cms-chatform-knop{display:none;}.cms-chatform-bubbel.cms-chatform-in-voorbeeld{bottom:72px;}@media(max-width:480px){.cms-chatform-bubbel{right:10px;bottom:10px;}.cms-chatform-bubbel .cms-chatform-venster{max-width:calc(100vw - 20px);}}.cms-chatform-proef{position:relative;min-height:540px;padding:16px;background:#eef0f3;border-radius:8px;overflow:hidden;}.cms-chatform-proef .cms-chatform-bubbel{position:absolute;}.cms-collectie-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}.cms-collectie-foto figure{margin:0;}.cms-collectie-foto img{width:100%;height:auto;display:block;}.cms-collectie-foto figcaption{font-size:14px;opacity:.75;margin-top:4px;}.cms-referentie{margin:0 0 16px;padding:0;}.cms-referentie img{width:64px;height:64px;object-fit:cover;border-radius:50%;float:left;margin:0 12px 8px 0;}.cms-referentie footer{opacity:.75;}.cms-podcast{margin:0 0 20px;}.cms-podcast audio{width:100%;}.cms-podcast-datum{font-size:14px;opacity:.7;margin:0 0 6px;}.cms-materiaal{padding:8px 0;border-bottom:1px solid rgba(127,127,127,.2);}.cms-materiaal p{margin:4px 0 0;font-size:14px;opacity:.8;}.cms-slider{position:relative;}.cms-collectie-slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;}.cms-collectie-slider::-webkit-scrollbar{display:none;}.cms-slide{flex:0 0 100%;scroll-snap-align:center;min-width:0;}.cms-slide img{width:100%;height:auto;display:block;}.cms-slide p{margin:6px 0 0;font-size:14px;opacity:.8;}.cms-slider button{position:absolute;top:40%;border:0;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:24px;line-height:1;cursor:pointer;}.cms-slider-terug{left:8px;}.cms-slider-verder{right:8px;}@media(min-width:700px){.cms-slide{flex-basis:60%;}}.cms-verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}.cms-webshop{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;}.cms-product img{width:100%;height:auto;display:block;}.cms-product h3{margin:8px 0 4px;}.cms-product-prijs{font-weight:700;margin:4px 0;}.cms-product-uitverkocht{opacity:.6;}.cms-webshop-gegevens{grid-column:1/-1;}.cms-webshop-melding{grid-column:1/-1;font-weight:600;}#dkchat{position:fixed;right:20px;bottom:20px;z-index:99999;font-size:15px;line-height:1.4;font-family:var(--cms-letter-tekst,sans-serif);}#dkchat button{cursor:pointer;}#dkchat-knop{border:0;border-radius:30px;padding:12px 20px;background:var(--cms-hoofd,#1f6feb);color:#fff;font-size:15px;font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,.25);}#dkchat-paneel{display:none;width:320px;max-width:calc(100vw - 40px);background:#fff;color:#222;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.25);overflow:hidden;}#dkchat-kop{background:var(--cms-hoofd,#1f6feb);color:#fff;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;}#dkchat-kop button{background:none;border:0;color:#fff;font-size:20px;line-height:1;}#dkchat-lijst{height:280px;overflow-y:auto;padding:12px;background:#f5f6f8;}#dkchat-lijst p{margin:0 0 8px;padding:8px 10px;border-radius:10px;max-width:85%;background:#fff;}#dkchat-lijst p.ik{margin-left:auto;background:#d9e8ff;background:color-mix(in srgb,var(--cms-hoofd,#1f6feb) 15%,#fff);}#dkchat-lijst small{display:block;opacity:.6;font-size:12px;}#dkchat-onder{padding:10px;border-top:1px solid #e3e5e8;}#dkchat-onder input,#dkchat-onder textarea{width:100%;box-sizing:border-box;margin-bottom:6px;padding:8px;border:1px solid #ccd;border-radius:6px;font:inherit;}#dkchat-onder button{width:100%;padding:9px;border:0;border-radius:6px;background:var(--cms-hoofd,#1f6feb);color:#fff;font-size:15px;font-family:inherit;}.cms-blok-rondleiding{container-type:inline-size}.cms-rl,.cms-rl *{box-sizing:border-box;text-align:left}.cms-rl{display:grid;gap:16px 20px;grid-template-columns:minmax(0,1fr);grid-template-areas:'balk' 'scherm' 'uitleg';font-size:15px;line-height:1.5}.cms-rl .cms-rl-nav button,.cms-rl .cms-rl-stip{all:unset;box-sizing:border-box;cursor:pointer}.cms-rl .cms-rl-nav button:focus-visible,.cms-rl .cms-rl-stip:focus-visible{outline:2px solid var(--cms-accent,#f5b81e);outline-offset:2px}.cms-rl-balk{grid-area:balk;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.cms-rl-balk select{flex:1 1 220px;max-width:100%;padding:8px 10px;border:1px solid rgba(0,0,0,.2);border-radius:6px;background:#fff;color:inherit;font:inherit}.cms-rl-teller{font-size:13px;opacity:.75;margin-right:auto}.cms-rl-balk .cms-knop{padding:8px 16px}.cms-rl-balk .cms-knop:disabled{opacity:.4;cursor:default}.cms-rl-nav{grid-area:nav;display:none;max-height:75vh;overflow:auto;font-size:14px;border-right:1px solid rgba(0,0,0,.08);padding-right:8px}.cms-rl-nav h4{margin:14px 0 4px;padding:0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--cms-hoofd,#005954)}.cms-rl-nav h4:first-child{margin-top:0}.cms-rl .cms-rl-nav button{display:block;width:100%;padding:6px 8px;border-radius:6px;color:inherit;font:inherit;line-height:1.35}.cms-rl .cms-rl-nav button:hover{background:rgba(0,0,0,.06)}.cms-rl .cms-rl-nav button.actief{background:var(--cms-hoofd,#005954);color:#fff}.cms-rl-scherm{grid-area:scherm;position:relative;align-self:start}.cms-rl-scherm img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.14)}.cms-rl .cms-rl-stip{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f5b81e;color:#2a1f00;font:700 13px/1 sans-serif;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.35)}.cms-rl .cms-rl-stip:hover{transform:translate(-50%,-50%) scale(1.12)}.cms-rl .cms-rl-stip.actief{background:var(--cms-hoofd,#005954);color:#fff}.cms-rl-uitleg{grid-area:uitleg}.cms-rl-uitleg h3{margin:0 0 4px;font-size:1.25em}.cms-rl-meta{font-size:13px;opacity:.7;margin:0 0 10px}.cms-rl-uitleg p{margin:0 0 10px}.cms-rl-tip{background:rgba(0,0,0,.05);border-left:3px solid var(--cms-accent,#f5b81e);border-radius:4px;padding:8px 12px;font-size:14px}.cms-rl-punten{list-style:none;margin:12px 0 0;padding:0}.cms-rl-punten li{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;margin:0 0 4px;border-radius:6px;cursor:pointer}.cms-rl-punten li:hover{background:rgba(0,0,0,.04)}.cms-rl-punten li.actief{background:rgba(245,184,30,.18)}.cms-rl-nr{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f5b81e;color:#2a1f00;font:700 11px/1 sans-serif;margin-top:1px}.cms-rl-punten li.actief .cms-rl-nr{background:var(--cms-hoofd,#005954);color:#fff}.cms-rl-punten b{display:block}@container (min-width:700px){.cms-rl{grid-template-columns:220px minmax(0,1fr);grid-template-areas:'nav balk' 'nav scherm' 'nav uitleg'}.cms-rl-nav{display:block}.cms-rl-balk select{display:none}}@container (min-width:1100px){.cms-rl{grid-template-columns:220px minmax(0,1fr) 320px;grid-template-areas:'nav balk balk' 'nav scherm uitleg'}}.cms-al-blok{container-type:inline-size}.cms-al{--cms-al-kolommen:1;--cms-al-ruimte:20px;--cms-al-verhouding:16/9;display:grid;gap:var(--cms-al-ruimte);grid-template-columns:repeat(var(--cms-al-kolommen),minmax(0,1fr));margin:0;padding:0}.cms-al-k1{--cms-al-kolommen:1}.cms-al-k2{--cms-al-kolommen:2}.cms-al-k3{--cms-al-kolommen:3}.cms-al-k4{--cms-al-kolommen:4}.cms-al-r-klein{--cms-al-ruimte:8px}.cms-al-r-normaal{--cms-al-ruimte:20px}.cms-al-r-groot{--cms-al-ruimte:40px}.cms-al-v-16-9{--cms-al-verhouding:16/9}.cms-al-v-4-3{--cms-al-verhouding:4/3}.cms-al-v-3-2{--cms-al-verhouding:3/2}.cms-al-v-1-1{--cms-al-verhouding:1/1}.cms-al .cms-kaart{display:flex;flex-direction:column;min-width:0;overflow:hidden;box-sizing:border-box;text-decoration:none;color:var(--cms-tekst,inherit);background:var(--cms-achtergrond,#fff);border-radius:var(--cms-afronding,6px);transition:box-shadow .2s}.cms-al .cms-kaart:focus-visible{outline:2px solid var(--cms-accent,#1f6feb);outline-offset:2px}.cms-al-rand-lijn .cms-kaart{border:1px solid rgba(0,0,0,.12)}.cms-al-rand-schaduw .cms-kaart{box-shadow:0 2px 10px rgba(0,0,0,.1)}.cms-al-rand-schaduw .cms-kaart:hover{box-shadow:0 6px 22px rgba(0,0,0,.16)}.cms-al .cms-kaart-beeld{aspect-ratio:var(--cms-al-verhouding);overflow:hidden;background:rgba(0,0,0,.06)}.cms-al .cms-kaart-beeld img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border-radius:0;transition:transform .3s}.cms-al .cms-kaart-tekst{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;padding:16px}.cms-al-rand-geen .cms-kaart-tekst{padding:12px 0 0}.cms-al .cms-kaart h3{margin:0;font-size:1.15em;line-height:1.3;color:var(--cms-hoofd,inherit)}.cms-al .cms-kaart:hover h3{color:var(--cms-accent,inherit)}.cms-al .cms-kaart p{margin:0}.cms-al .cms-kaart-thema{font-size:.78em;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--cms-accent,inherit)}.cms-al .cms-kaart-datum{font-size:.85em;opacity:.7}.cms-al .cms-kaart-lees{margin-top:auto;padding-top:4px;font-weight:600;color:var(--cms-hoofd,inherit)}.cms-al-lijst .cms-kaart{flex-direction:row;align-items:stretch}.cms-al-lijst .cms-kaart-beeld{flex:0 0 32%;max-width:280px}.cms-al-lijst.cms-al-rand-geen .cms-kaart{gap:var(--cms-al-ruimte);padding-bottom:var(--cms-al-ruimte);border-bottom:1px solid rgba(0,0,0,.1);border-radius:0}.cms-al-lijst.cms-al-rand-geen .cms-kaart-tekst{padding:0}.cms-al-compact{gap:0}.cms-al-compact .cms-kaart{border:0;border-bottom:1px solid rgba(0,0,0,.1);border-radius:0;box-shadow:none;background:none}.cms-al-compact .cms-kaart:hover{box-shadow:none}.cms-al-compact .cms-kaart-tekst{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:calc(var(--cms-al-ruimte) / 2) 0}.cms-al-compact .cms-kaart h3{font-size:1em}.cms-al-compact .cms-kaart-datum{white-space:nowrap}.cms-al-uitgelicht .cms-kaart:first-child{grid-column:1 / -1;flex-direction:row}.cms-al-uitgelicht .cms-kaart:first-child .cms-kaart-beeld{flex:0 0 55%}.cms-al-uitgelicht .cms-kaart:first-child .cms-kaart-tekst{justify-content:center;padding:24px}.cms-al-uitgelicht.cms-al-rand-geen .cms-kaart:first-child .cms-kaart-tekst{padding:0 0 0 24px}.cms-al-uitgelicht .cms-kaart:first-child h3{font-size:1.6em}.cms-al-uitgelicht .cms-kaart:first-child .cms-kaart-lees{margin-top:8px}.cms-al-uitgelicht .cms-kaart:not(:first-child) .cms-kaart-samenvatting{display:none}.cms-al-tegels .cms-kaart{position:relative;justify-content:flex-end;width:100%;min-height:220px;aspect-ratio:var(--cms-al-verhouding);background:var(--cms-hoofd,#333);color:#fff}.cms-al-tegels .cms-kaart{overflow:clip}.cms-al-tegels .cms-kaart-beeld{position:absolute;inset:0;aspect-ratio:auto}.cms-al-tegels .cms-kaart-beeld::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.2) 60%,rgba(0,0,0,0))}.cms-al-tegels .cms-kaart-tekst{position:relative;flex:0 0 auto;padding:18px}.cms-al-tegels .cms-kaart h3,.cms-al-tegels .cms-kaart:hover h3,.cms-al-tegels .cms-kaart-thema,.cms-al-tegels .cms-kaart-lees{color:#fff}.cms-al-tegels .cms-kaart-datum{opacity:.85}.cms-al-tegels .cms-kaart-samenvatting{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.cms-al-tegels .cms-kaart:hover .cms-kaart-beeld img{transform:scale(1.04)}@supports not (container-type:inline-size){@media (max-width:600px){.cms-al{--cms-al-kolommen:1}}}@container (max-width:900px){.cms-al-k3,.cms-al-k4{--cms-al-kolommen:2}}@container (max-width:600px){.cms-al{--cms-al-kolommen:1}.cms-al-lijst .cms-kaart,.cms-al-uitgelicht .cms-kaart:first-child{flex-direction:column}.cms-al-lijst .cms-kaart-beeld,.cms-al-uitgelicht .cms-kaart:first-child .cms-kaart-beeld{flex:none;width:100%;max-width:none}.cms-al-uitgelicht .cms-kaart:first-child .cms-kaart-tekst{padding:16px}.cms-al-uitgelicht.cms-al-rand-geen .cms-kaart:first-child .cms-kaart-tekst{padding:12px 0 0}.cms-al-uitgelicht .cms-kaart:first-child h3{font-size:1.25em}}.cms-paginering{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:24px 0 0}.cms-paginering a,.cms-paginering span{display:inline-block;box-sizing:border-box;min-width:2.4em;padding:6px 10px;border:1px solid rgba(0,0,0,.15);border-radius:var(--cms-afronding,4px);text-align:center;text-decoration:none;line-height:1.3}.cms-paginering a:hover{border-color:var(--cms-hoofd,#1f6feb)}.cms-paginering [aria-current]{background:var(--cms-hoofd,#1f6feb);border-color:var(--cms-hoofd,#1f6feb);color:#fff}.cms-paginering .cms-pag-weg{min-width:0;padding:6px 2px;border-color:transparent}.cms-al-alle{margin:16px 0 0;text-align:center}.cms-al-alle a{font-weight:600}/* e-mediadesign.nl: website-CSS. Staat in DK bij Website > Instellingen > Opmaak; het SQL-script zet hem daar. Bron: bron/cms_css.css.
   Secties komen uit page_cms als: section.cms-sectie.cms-sectie-[variant] > .cms-container > .cms-kolom (breedte inline) > .cms-blok.cms-blok-[kop|tekst|knop|html|formulier]
   Varianten: hero, band, pijn, werkwijze, donker, basis, ai, vakken, faq, kennis, contact, intro, fase, cta, licht, artikel.
   Beeldtaal: een eigenwijze ontwerpstudio. Nacht en creme, met limoen als signaal en lila en roze als accent. Dikke koppen in Syne,
   stickers, een rollende band en tegels in kleur.
   Het ene element dat opvalt: het bouwvenster in de hero, scheef op het scherm, waarin een website blok voor blok ontstaat,
   met een draaiende stempel ernaast.
*/

:root{
  --papier:#F3F0E8;      /* creme */
  --vlak:#E9E4D8;        /* rustige secties */
  --wit:#FFFFFF;
  --asfalt:#0E0E12;      /* nacht: koppen, donkere secties (naam gelijk gehouden met de andere sites) */
  --asfalt2:#1C1C24;
  --tekst:#1F1F26;
  --grijs:#5C5A63;
  --lijn:#D9D3C5;
  --geel:#D7FF3D;        /* limoen: knoppen en wat opvalt (naam gelijk gehouden met de andere sites) */
  --geel2:#C4F01C;
  --koper:#B8A4FF;
  --koperlicht:#ECE6FF;
  --violet:#B8A4FF;      /* lila */
  --roze:#FF8AC0;
  --oranje:#FF6B3D;
  --amber:#FFC23D;
  --gras:#1F8A5B;
  --rood:#E5484D;
  --kop:"Syne","Arial Black",system-ui,sans-serif;
  --romp:"Inter",system-ui,sans-serif;
  --mono:ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--papier);color:var(--tekst);font-family:var(--romp);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--asfalt);text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--asfalt2)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--asfalt);outline-offset:3px;box-shadow:0 0 0 6px var(--geel)}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:var(--kop);color:var(--asfalt);margin:0;line-height:1.05;letter-spacing:-.01em;font-weight:700}
h1{font-size:clamp(2.4rem,4.8vw,4rem);font-weight:700}
h2{font-weight:700;font-size:clamp(1.9rem,3.2vw,2.8rem)}
h2{font-size:clamp(1.9rem,3.2vw,2.7rem)}
h3{font-size:1.2rem;font-weight:600;line-height:1.25;font-family:var(--romp);letter-spacing:0}
p{margin:0}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;background:#fff;color:var(--asfalt);padding:8px;z-index:20}

/* generieke CMS-opbouw */
.cms-container{max-width:1200px;margin:0 auto;padding:0 28px}
.cms-sectie{padding:88px 0}
.cms-sectie .cms-container{display:flex;flex-wrap:wrap;align-items:stretch}
/* kolommen hebben aan beide kanten 12px, de container 16px: zo lijnen koppen en kaarten in elke sectie netjes uit */
.cms-sectie .cms-container{padding:0 16px}
.cms-kolom{padding:0 12px;min-width:0}
@media (max-width:860px){.cms-sectie .cms-container{padding:0 22px}.cms-kolom{width:100%!important;padding:0 6px}.cms-kolom+.cms-kolom{margin-top:20px}.cms-sectie{padding:64px 0}}
.cms-blok{margin-bottom:18px}.cms-blok:last-child{margin-bottom:0}
.cms-blok-tekst p{font-size:1.1rem;max-width:40em;margin:0 0 14px}
.cms-blok-tekst p:last-child{margin-bottom:0}
.cms-blok-knop{display:inline-block;margin:10px 12px 0 0}
.cms-knop,.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:6px;text-decoration:none;font-weight:600;font-size:1rem;background:var(--geel);color:var(--asfalt);border:2px solid var(--geel);cursor:pointer;font-family:inherit;line-height:1.2;transition:background .15s,border-color .15s,transform .15s}
.cms-knop:hover,.btn:hover{background:var(--geel2);border-color:var(--geel2);color:var(--asfalt);transform:translateY(-1px)}
.cms-blok-knop+.cms-blok-knop .cms-knop{background:transparent;color:var(--asfalt);border-color:var(--asfalt)}
.cms-blok-knop+.cms-blok-knop .cms-knop:hover{background:var(--asfalt);color:#fff}
.cms-knop.klein{padding:10px 18px;font-size:.92rem}

/* secties waarvan de eerste kolom de kop is: die kolom over de volle breedte */
.cms-sectie-pijn .cms-kolom:first-child,.cms-sectie-rollen .cms-kolom:first-child,.cms-sectie-ingangen .cms-kolom:first-child,.cms-sectie-basis .cms-kolom:first-child,
.cms-sectie-fase .cms-kolom:first-child{width:100%!important;margin-bottom:40px}
.cms-sectie-pijn .cms-kolom,.cms-sectie-rollen .cms-kolom,.cms-sectie-fase .cms-kolom,.cms-sectie-basis .cms-kolom{margin-bottom:24px}

/* header */
header.top{position:sticky;top:0;z-index:10;background:rgba(247,245,241,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.top-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.top .logo{display:flex;align-items:center}
.top .logo img{height:34px;width:auto}
.menuknop{display:none;background:none;border:1.5px solid var(--asfalt);color:var(--asfalt);border-radius:6px;padding:8px 16px;font:inherit;cursor:pointer}
.nav{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:.97rem;color:var(--tekst);font-weight:500}
.nav a:hover,.nav a.actief{color:var(--asfalt)}
.nav a.actief:not(.cms-knop){box-shadow:0 3px 0 var(--geel)}
@media (max-width:840px){
  .menuknop{display:block}
  #hoofdmenu{display:none;position:absolute;left:0;right:0;top:76px;background:var(--papier);border-bottom:1px solid var(--lijn);padding:16px 28px 24px}
  #hoofdmenu.open{display:block}
  .nav{flex-direction:column;align-items:flex-start;gap:16px}
}

/* hero */
.cms-sectie-hero{padding:72px 0 80px}
.cms-sectie-hero .cms-container{align-items:center}
.cms-sectie-hero .cms-blok-kop h1{max-width:12.5em;font-size:clamp(2.1rem,4vw,3.3rem)}
.cms-sectie-hero .cms-blok-tekst p{font-size:1.18rem;max-width:31em}
.usps{list-style:none;margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--lijn);display:flex;gap:18px 26px;flex-wrap:wrap;font-size:.95rem;color:var(--grijs)}
.usps b{display:block;color:var(--asfalt);font-family:var(--kop);font-size:1.05rem}
@media (max-width:860px){.cms-sectie-hero .cms-kolom+.cms-kolom{margin-top:44px}}

/* herken je dit: donker, het oude probleem doorgestreept boven het antwoord */
.cms-sectie-pijn{background:var(--asfalt);color:#D6DEE1}
.cms-sectie-pijn h2,.cms-sectie-pijn h3{color:#fff}
.cms-sectie-pijn .cms-blok-tekst p{color:#BFCBD0}
.kaart.pijn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
.kaart.pijn .was{display:inline-block;font-family:var(--kop);font-weight:800;font-size:1.25rem;color:#fff;text-decoration:line-through;text-decoration-color:var(--geel);text-decoration-thickness:3px;margin-bottom:14px}
.kaart.pijn p{color:#BFCBD0}

/* kaarten */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:26px 24px;height:100%}
.kaart h3{margin-bottom:8px}
.kaart p{color:var(--grijs);font-size:1rem}

/* werkwijze: vijf stappen, dit is een echte volgorde */
.cms-sectie-werkwijze{background:var(--vlak)}
.cms-sectie-werkwijze .cms-container{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.cms-sectie-werkwijze .cms-container{padding:0 28px}
.cms-sectie-werkwijze .cms-kolom{width:auto!important;padding:0}
.cms-sectie-werkwijze .cms-kolom:first-child{grid-column:1/-1;margin-bottom:22px}
.stap{padding-top:16px;border-top:3px solid var(--asfalt);height:100%}
.stap .nr{display:inline-block;font-family:var(--kop);font-weight:800;font-size:.95rem;color:#fff;background:var(--geel);padding:2px 8px;border-radius:3px}
.stap h3{margin:12px 0 8px}
.stap p{font-size:.97rem;color:var(--grijs)}
@media (max-width:1000px){.cms-sectie-werkwijze .cms-container{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cms-sectie-werkwijze .cms-container{grid-template-columns:1fr}}


/* veelgestelde vragen */
.cms-sectie-faq{background:var(--wit)}
.faq{border-bottom:1px solid var(--lijn)}
.faq:first-child{border-top:1px solid var(--lijn)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;font-family:var(--kop);font-weight:700;font-size:1.1rem;color:var(--asfalt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:1.5rem;font-weight:500;color:var(--asfalt)}
.faq[open] summary::after{content:"\2212"}
.faq div{padding:0 0 20px;color:var(--tekst);max-width:40em}
@media (max-width:860px){.cms-sectie-faq .cms-kolom+.cms-kolom{margin-top:28px}}

/* kennis: kaarten van artikelen (thema.php) */
.cms-sectie-kennis .cms-container{display:block}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
@media (max-width:900px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;gap:10px;background:var(--wit);border:1px solid var(--lijn);border-radius:8px;padding:26px 24px;text-decoration:none;color:inherit;transition:border-color .15s}
.post:hover{border-color:var(--asfalt)}
.post .cat{font-size:.85rem;font-weight:600;color:var(--grijs)}
.post h3{font-size:1.15rem}
.post p{color:var(--grijs);font-size:.97rem;flex:1}
.post .meta{font-weight:600;color:var(--asfalt);font-size:.92rem;text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:2px;text-underline-offset:3px}
.cms-sectie-overzicht{padding-top:70px}
.cms-sectie-overzicht .intro{color:var(--grijs);font-size:1.15rem;max-width:44em;margin-top:14px}
.cms-themas{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.cms-themas a{text-decoration:none;font-size:.9rem;border:1px solid var(--lijn);border-radius:999px;padding:6px 14px;color:var(--tekst)}
.cms-themas a.actief,.cms-themas a:hover{color:#fff;background:var(--asfalt);border-color:var(--asfalt)}
.paginering{display:flex;gap:16px;align-items:center;margin-top:32px;color:var(--grijs)}

/* contact */
.cms-sectie-contact{background:var(--wit)}
.cms-sectie-contact .cms-blok-tekst p{max-width:32em}
.cms-contactform{display:grid;gap:6px;margin-top:26px;max-width:520px}
.cms-contactform label{font-size:.9rem;font-weight:600;color:var(--asfalt);margin-top:10px}
.cms-contactform select,.cms-contactform input,.cms-contactform textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:6px;background:#fff;color:var(--tekst);width:100%}
.cms-contactform select:focus,.cms-contactform input:focus,.cms-contactform textarea:focus{border-color:var(--asfalt);outline:0}
.cms-contactform button{margin-top:18px;justify-self:start}
.cms-honing{position:absolute;left:-9999px}
.cms-fout{color:var(--rood);border:1px solid var(--rood);border-radius:6px;padding:10px 14px;font-size:.95rem;margin:0 0 6px}
.lines{margin-top:8px;font-size:1rem;line-height:1.7;background:var(--papier);border-radius:8px;padding:28px 30px}
.lines b{display:block;font-family:var(--kop);color:var(--asfalt);margin-top:24px;margin-bottom:4px}
.lines b:first-child{margin-top:0}
.lines>a{display:block;text-decoration:none;font-family:var(--kop);font-weight:700;font-size:1.3rem;color:var(--asfalt)}
.lines>a:hover{text-decoration:underline;text-decoration-color:var(--geel)}
.lines small{display:block;color:var(--grijs);font-size:.92rem;margin-top:18px}
.vinkjes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vinkjes li{position:relative;padding-left:24px}
.vinkjes li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:6px;border-left:2.5px solid var(--gras);border-bottom:2.5px solid var(--gras);transform:rotate(-45deg)}
@media (max-width:860px){.cms-sectie-contact .cms-kolom+.cms-kolom{margin-top:36px}}

/* formulier uit DK (bloktype formulier, class cms-formulier) */
.cms-blok-formulier h2{margin-bottom:10px}
.cms-blok-formulier>p{color:var(--tekst);font-size:1.1rem;max-width:32em}
.cms-formulier{display:grid;gap:6px;margin-top:26px;max-width:540px}
.cms-formulier-veld{display:grid;gap:6px;margin-top:10px}
.cms-formulier label{font-size:.9rem;font-weight:600;color:var(--asfalt)}
.cms-formulier input:not([type=checkbox]):not([type=range]),.cms-formulier select,.cms-formulier textarea{font:inherit;padding:12px 14px;border:1.5px solid var(--lijn);border-radius:6px;background:#fff;color:var(--tekst);width:100%}
.cms-formulier input:focus,.cms-formulier select:focus,.cms-formulier textarea:focus{border-color:var(--asfalt);outline:0}
.cms-formulier button[type=submit]{margin-top:18px;justify-self:start;display:inline-flex;padding:14px 24px;border-radius:6px;font-weight:600;font-size:1rem;background:var(--geel);color:var(--asfalt);border:2px solid var(--geel);cursor:pointer;font-family:inherit}
.cms-formulier button[type=submit]:hover{background:var(--geel2);border-color:var(--geel2)}
.cms-formulier-melding{color:var(--rood);border:1px solid var(--rood);border-radius:6px;padding:10px 14px;font-size:.95rem}
.cms-formulier-bedankt{padding:22px 24px;background:#FFF4CC;border-left:4px solid var(--geel);border-radius:6px;color:var(--asfalt)}
.cms-blok-afspraak-wrap{margin-top:20px}

/* functies-pagina: intro met fasenavigatie, daarna een sectie per fase */
.cms-sectie-intro{padding:72px 0 40px}
.cms-sectie-intro .cms-container{display:block}
.cms-sectie-intro .cms-blok-tekst p{font-size:1.18rem;max-width:36em}
.fasenav{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.fasenav a{text-decoration:none;font-size:.93rem;font-weight:500;border:1.5px solid var(--asfalt);border-radius:999px;padding:7px 16px}
.fasenav a:hover{background:var(--asfalt);color:#fff}
.cms-sectie-fase{border-top:1px solid var(--lijn)}
.cms-sectie-fase:nth-of-type(odd){background:var(--wit)}
.fase-nr{font-size:.9rem;font-weight:600;color:var(--grijs)}
.cms-sectie-fase .cms-blok-kop h2{margin-top:-6px}
.cms-sectie-fase .cms-blok-tekst p{color:var(--grijs)}
.functie{height:100%;padding:4px 0 4px 20px;border-left:3px solid var(--geel)}
.functie h3{margin-bottom:6px}
.functie p{color:var(--grijs);font-size:1rem;max-width:34em}
.functie.licht{border-left-color:var(--asfalt)}

/* cijfers */
.cms-sectie-waarom{background:var(--wit)}
.cijfer b{display:block;font-family:var(--kop);font-weight:800;font-size:3rem;line-height:1;color:var(--asfalt);margin-bottom:14px}
.cijfer b::after{content:"";display:block;width:36px;height:5px;background:var(--geel);margin-top:12px}
.cijfer h3{margin-bottom:8px}
.cijfer p{color:var(--grijs);font-size:1rem}

/* afsluitende oproep */
.cms-sectie-cta{background:var(--asfalt);padding:72px 0}
.cms-sectie-cta .cms-container{display:block}
.cms-sectie-cta h2{color:#fff}
.cms-sectie-cta .cms-blok-tekst p{color:#BFCBD0}

/* lichte inhoudspagina's (bedankt, 404) */
.cms-sectie-licht{padding:80px 0 100px}
.cms-sectie-licht .cms-container{display:block;max-width:820px}
.cms-sectie-licht h1{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}

/* artikel */
.cms-sectie-artikel{padding:70px 0 0}
.cms-sectie-artikel .cms-container{display:block;max-width:760px}
.cms-sectie-artikel .back{display:inline-block;font-size:.92rem;color:var(--grijs);text-decoration:none;margin-bottom:30px}
.cms-sectie-artikel .back:hover{color:var(--asfalt)}
.cms-sectie-artikel h1{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:16px}
.cms-sectie-artikel .intro{font-size:1.2rem;color:var(--grijs);max-width:36em}
article.article{display:block;padding:0 0 90px}
article.article .cms-sectie{padding:0}
article.article .cms-container{display:block;max-width:760px}
article.article .cms-kolom{padding:0;width:100%!important}
article.article .meta{color:var(--grijs);font-size:.92rem;margin:24px 0 36px;padding-bottom:20px;border-bottom:1px solid var(--lijn)}
article.article .body p{font-size:1.1rem;line-height:1.75;margin-bottom:22px}
article.article .body h2{font-size:1.5rem;margin:40px 0 14px}
article.article .body blockquote{margin:26px 0;padding:18px 22px;border-left:4px solid var(--geel);background:var(--wit);border-radius:0 8px 8px 0;font-size:1rem;line-height:1.7}
article.article .body ul,article.article .body ol{margin:0 0 22px;padding-left:22px;font-size:1.05rem;line-height:1.7}
article.article .body li{margin-bottom:8px}
article.article .cta{margin-top:48px;padding:26px 28px;background:var(--asfalt);border-radius:8px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
article.article .cta p{color:#fff;font-weight:500}

/* footer */
footer{background:var(--vlak);border-top:1px solid var(--lijn)}
footer .cms-sectie{padding:56px 0 30px}
footer .cms-container .cms-container{padding:0;max-width:none}
footer .cms-blok{margin:0}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;font-size:.95rem;line-height:1.8;color:var(--grijs)}
.footer-in b{color:var(--asfalt);font-family:var(--kop);font-stretch:112%}
.footer-in a{color:var(--asfalt);text-decoration:none}
.footer-in a:hover{text-decoration:underline;text-decoration-color:var(--geel)}
.footerlogo{height:32px;width:auto;margin-bottom:10px}
.footer-onder{margin-top:36px;padding-top:20px;border-top:1px solid var(--lijn);font-size:.85rem;color:var(--grijs)}
.footer-onder a{color:inherit}
@media (max-width:760px){.footer-in{grid-template-columns:1fr}}

/* kaarten in dezelfde rij even hoog */
.cms-kolom>.cms-blok-html:only-child{height:100%}

/* per rol */
.cms-sectie-rollen{background:var(--wit)}
.rol{height:100%;padding:26px 24px;border:1px solid var(--lijn);border-radius:8px;background:var(--papier)}
.rol .label{display:inline-block;font-family:var(--kop);font-weight:700;font-size:.95rem;color:var(--asfalt);background:var(--vlak);border-radius:3px;padding:2px 10px;margin-bottom:14px}
.rol h3{margin-bottom:8px}
.rol p{color:var(--grijs);font-size:1rem}
.rol.cta-rol{background:var(--asfalt);border-color:var(--asfalt);display:flex;flex-direction:column;gap:12px}
.rol.cta-rol h3{color:#fff}.rol.cta-rol p{color:#B5B5B5;flex:1}.rol.cta-rol .cms-knop{align-self:flex-start}

/* donkere sectie: het onderscheid */
.cms-sectie-donker{background:var(--asfalt);color:#D6D6D6}
.cms-sectie-donker h2{color:#fff}
.cms-sectie-donker .cms-blok-tekst p{color:#B5B5B5}
.label.licht{display:inline-block;font-weight:600;font-size:.9rem;color:var(--geel)}
.inhuurstappen{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
.inhuurstappen li{counter-increment:s;position:relative;padding:16px 18px 16px 62px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#B5B5B5}
.inhuurstappen li::before{content:counter(s);position:absolute;left:18px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--geel);color:var(--asfalt);font-family:var(--kop);font-weight:700;display:grid;place-items:center}
.inhuurstappen b{display:block;color:#fff;font-family:var(--kop);font-size:1.15rem;margin-bottom:2px}
@media (max-width:860px){.cms-sectie-donker .cms-kolom+.cms-kolom{margin-top:32px}}

/* de basis */
.cms-sectie-basis{background:var(--vlak)}
.kaart a{color:var(--asfalt)}

/* maatwerk */
.cms-sectie-maatwerk{background:var(--wit)}
.cms-sectie-maatwerk .cms-container{align-items:center}
.cijfers{display:grid;gap:18px}
.cijfers div{display:flex;align-items:baseline;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.cijfers b{font-family:var(--kop);font-weight:700;font-size:2.6rem;line-height:1;color:var(--asfalt);min-width:3.2em}
.cijfers span{color:var(--grijs)}
@media (max-width:860px){.cms-sectie-maatwerk .cms-kolom+.cms-kolom{margin-top:32px}}

/* klantcitaat (alleen als CITAAT_NAAM in maak_sql.py is ingevuld) */
.cms-sectie-citaat{background:var(--vlak);padding:72px 0}
.cms-sectie-citaat .cms-container{display:block;max-width:900px}
.citaat{margin:0;border-left:6px solid var(--geel);padding:6px 0 6px 28px}
.citaat blockquote{margin:0;font-family:var(--kop);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;color:var(--asfalt)}
.citaat figcaption{margin-top:16px;color:var(--grijs);font-weight:600}

/* lange naam in het logo: kleiner op smalle schermen */
@media (max-width:520px){.top .logo img{height:22px}}

/* twee soorten werk: diensten en installaties */
.cms-sectie-ingangen{background:var(--papier)}
.cms-sectie-ingangen .cms-kolom{margin-bottom:24px}
.ingang{height:100%;display:flex;flex-direction:column;gap:14px;padding:34px 32px;border:2px solid var(--asfalt);border-radius:8px}
.ingang .label{font-size:.9rem;font-weight:600;color:var(--grijs)}
.ingang h3{font-size:1.6rem}
.ingang p{flex:1}
.ingang .cms-knop{align-self:flex-start}
.ingang.donker{background:var(--asfalt);color:#D9D9D9}
.ingang.donker h3{color:#fff}.ingang.donker .label{color:#B5B5B5}


/* knop in het menu: witte tekst op magenta */
.nav a.cms-knop,.nav a.cms-knop:hover{color:var(--asfalt)}



/* ============ e-mediadesign.nl ============ */
/* koppen: Syne, dik en strak */
h1,h2{font-weight:800;letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(2.9rem,6.4vw,5.6rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
h1,h2{overflow-wrap:break-word;hyphens:manual}
h3{font-family:var(--kop);font-weight:700;letter-spacing:-.01em;font-size:1.3rem}
a{text-decoration-color:var(--asfalt)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--asfalt);outline-offset:3px;box-shadow:0 0 0 6px var(--geel)}

/* knoppen: limoen pil met pijl, de tweede knop als lijn */
.cms-knop,.btn,.cms-formulier button[type=submit]{background:var(--geel);border:2px solid var(--asfalt);color:var(--asfalt);border-radius:999px;padding:15px 28px;font-weight:700;box-shadow:4px 4px 0 var(--asfalt);transition:transform .15s,box-shadow .15s,background .15s}
.cms-knop::after{content:"\2192";margin-left:4px;transition:transform .15s}
.cms-knop:hover,.btn:hover,.cms-formulier button[type=submit]:hover{background:var(--geel);color:var(--asfalt);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--asfalt)}
.cms-knop:hover::after{transform:translateX(3px)}
.cms-knop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--asfalt)}
.cms-knop.klein{padding:10px 18px;box-shadow:3px 3px 0 var(--asfalt)}
.cms-blok-knop+.cms-blok-knop .cms-knop{background:transparent;color:var(--asfalt);border-color:var(--asfalt);box-shadow:none}
.cms-blok-knop+.cms-blok-knop .cms-knop:hover{background:var(--asfalt);color:#fff;box-shadow:none;transform:none}
.nav a.cms-knop,.nav a.cms-knop:hover{color:var(--asfalt)}
.nav a.actief:not(.cms-knop){box-shadow:0 3px 0 var(--asfalt)}
header.top{background:rgba(243,240,232,.94);border-bottom:2px solid var(--asfalt)}

/* stickers: kleine labels, licht gedraaid */
.sticker{display:inline-block;font-family:var(--kop);font-weight:700;font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;color:var(--asfalt);background:var(--violet);border:2px solid var(--asfalt);border-radius:999px;padding:5px 14px;transform:rotate(-3deg);margin-bottom:14px}
.cms-sectie-donker .sticker,.cms-sectie-hero .sticker{background:var(--geel)}
.cms-sectie-ai .sticker{background:var(--geel)}
.cms-sectie-vakken .sticker{background:var(--roze)}
.cms-sectie-kennis .sticker{background:var(--oranje)}
.label{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs)}

/* hero: nacht, groot, met het bouwvenster scheef ernaast */
.cms-sectie-hero{background:var(--asfalt);color:#D9D7E0;padding:84px 0 110px;overflow:hidden}
.cms-sectie-hero .cms-container{align-items:center}
.cms-sectie-hero h1{color:#fff;max-width:9em;font-size:clamp(3rem,6.6vw,5.8rem)}
.cms-sectie-hero .cms-blok-tekst p{color:#C9C7D2;font-size:1.2rem;max-width:30em}
.cms-sectie-hero .cms-blok-knop+.cms-blok-knop .cms-knop{color:#fff;border-color:#fff}
.cms-sectie-hero .cms-blok-knop+.cms-blok-knop .cms-knop:hover{background:#fff;color:var(--asfalt)}
.cms-sectie-hero .cms-knop{border-color:var(--geel);box-shadow:4px 4px 0 var(--violet)}
.cms-sectie-hero .cms-knop:hover{box-shadow:6px 6px 0 var(--violet)}

/* de rollende band */
.cms-sectie-band{padding:0;background:var(--geel);border-top:2px solid var(--asfalt);border-bottom:2px solid var(--asfalt);overflow:hidden}
.cms-sectie-band .cms-container{max-width:none;padding:0}
.cms-sectie-band .cms-kolom{padding:0;width:100%!important}
.band{overflow:hidden;padding:16px 0}
.band-rol{display:flex;width:max-content;gap:28px;align-items:center;font-family:var(--kop);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.2rem);text-transform:uppercase;letter-spacing:-.01em;color:var(--asfalt);white-space:nowrap}
.band-rol i{font-style:normal;font-size:.8em}
@media (prefers-reduced-motion:no-preference){.band-rol{animation:rol 32s linear infinite}}
@keyframes rol{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* pijn: creme, het oude probleem doorgestreept */
.cms-sectie-pijn{background:var(--papier);color:var(--tekst)}
.cms-sectie-pijn h2,.cms-sectie-pijn h3{color:var(--asfalt)}
.cms-sectie-pijn .cms-blok-tekst p{color:var(--tekst)}
.kaart{border-radius:20px}
.kaart.pijn{background:var(--wit);border:2px solid var(--asfalt);box-shadow:6px 6px 0 var(--asfalt);padding:28px 26px}
.kaart.pijn .was{display:inline-block;color:var(--grijs);font-family:var(--romp);font-weight:600;font-size:1rem;text-decoration:line-through;text-decoration-color:var(--oranje);text-decoration-thickness:3px;margin-bottom:12px}
.kaart.pijn h3{font-size:1.45rem;margin-bottom:8px}
.kaart.pijn p{color:var(--grijs)}
.cms-sectie-pijn .cms-kolom:nth-child(3) .kaart{transform:rotate(-1deg)}
.cms-sectie-pijn .cms-kolom:nth-child(4) .kaart{transform:rotate(1deg)}

/* werkwijze: vijf gekleurde kaarten met grote nummers */
.cms-sectie-werkwijze{background:var(--wit)}
.cms-sectie-werkwijze .cms-kolom{width:100%!important}
.fasen{list-style:none;margin:40px 0 26px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.fasen li{position:relative;padding:22px 20px 24px;border:2px solid var(--asfalt);border-radius:20px;background:var(--papier);display:flex;flex-direction:column;gap:8px;transition:transform .2s}
.fasen li:hover{transform:translateY(-4px) rotate(-1deg)}
.fasen li:nth-child(1){background:var(--violet)}
.fasen li:nth-child(2){background:var(--geel)}
.fasen li:nth-child(3){background:var(--roze)}
.fasen li:nth-child(4){background:var(--papier)}
.fasen li:nth-child(5){background:var(--asfalt);color:#D9D7E0}
.fasen li:nth-child(5) h3,.fasen li:nth-child(5) .nr{color:#fff}
.fasen li:nth-child(5) p{color:#C9C7D2}
.fasen .nr{font-family:var(--kop);font-weight:800;font-size:3.4rem;line-height:.9;letter-spacing:-.05em;color:var(--asfalt)}
.fasen .tag{align-self:flex-start;font-size:.75rem;font-weight:700;color:var(--asfalt);background:#fff;border:1.5px solid var(--asfalt);border-radius:999px;padding:2px 10px}
.fasen h3{font-size:1.15rem;line-height:1.15}
.fasen p{font-size:.95rem;color:var(--tekst)}
@media (max-width:1100px){.fasen{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.fasen{grid-template-columns:1fr}}

/* kosten: nacht met grote getallen */
.cms-sectie-donker{background:var(--asfalt);color:#C9C7D2}
.cms-sectie-donker h2{color:#fff;max-width:14em}
.cms-sectie-donker .cms-blok-tekst p{color:#C9C7D2}
.cms-sectie-donker .cms-kolom:first-child{width:100%!important;margin-bottom:36px}
.cms-sectie-donker .cms-kolom{margin-bottom:20px}
.getal{height:100%;border:2px solid rgba(255,255,255,.18);border-radius:20px;padding:26px 26px 24px;display:grid;gap:4px;transition:border-color .2s}
.getal:hover{border-color:var(--geel)}
.getal strong{font-family:var(--kop);font-weight:800;font-size:clamp(3.6rem,7vw,5.6rem);line-height:.95;letter-spacing:-.05em;color:var(--geel)}
.getal strong small{font-size:.32em;letter-spacing:0;margin-left:6px;color:#fff}
.cms-sectie-donker .cms-kolom:nth-child(3) .getal strong{color:var(--violet)}
.cms-sectie-donker .cms-kolom:nth-child(4) .getal strong{color:var(--roze)}
.getal b{color:#fff;font-size:1.15rem;margin-top:10px}
.getal span{color:#A9A7B3;font-size:.95rem}
.klein-licht{color:#A9A7B3;font-size:.9rem;margin:6px 0 4px}

/* wat we maken: tegels in kleur */
.cms-sectie-basis{background:var(--papier)}
.tegel{height:100%;border:2px solid var(--asfalt);border-radius:20px;padding:28px 26px;background:var(--wit);display:flex;flex-direction:column;gap:8px;transition:transform .2s,box-shadow .2s}
.tegel:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--asfalt)}
.tegel h3{font-size:1.6rem}
.tegel p{color:var(--grijs)}
.tegel.t1{background:var(--asfalt)}.tegel.t1 h3{color:var(--geel)}.tegel.t1 p{color:#C9C7D2}
.tegel.t3{background:var(--violet)}.tegel.t3 p{color:var(--tekst)}
.tegel.t5{background:var(--geel)}.tegel.t5 p{color:var(--tekst)}

/* ons CMS: lila */
.cms-sectie-ai{background:var(--violet)}
.cms-sectie-ai .cms-container{align-items:flex-start}
.cms-sectie-ai .cms-blok-tekst p{color:var(--tekst)}
.cms-lijst{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cms-lijst div{background:var(--papier);border:2px solid var(--asfalt);border-radius:18px;padding:22px 24px}
.cms-lijst h3{margin-bottom:6px;font-size:1.2rem}
.cms-lijst p{color:var(--grijs);font-size:.96rem}
@media (max-width:600px){.cms-lijst{grid-template-columns:1fr}}

/* recent werk: grote kaarten in kleur */
.cms-sectie-vakken{background:var(--wit)}
.cms-sectie-vakken .cms-kolom:first-child{width:100%!important;margin-bottom:36px}
.cms-sectie-vakken .cms-kolom{margin-bottom:24px}
.werk{display:flex;flex-direction:column;gap:10px;height:100%;min-height:260px;padding:30px;border:2px solid var(--asfalt);border-radius:22px;text-decoration:none;color:var(--asfalt);background:var(--papier);transition:transform .2s,box-shadow .2s}
.werk:hover{transform:translate(-4px,-4px) rotate(-.6deg);box-shadow:8px 8px 0 var(--asfalt);color:var(--asfalt)}
.werk.w1{background:var(--asfalt);color:#fff}.werk.w1:hover{color:#fff;box-shadow:8px 8px 0 var(--geel)}
.werk.w2{background:var(--roze)}
.werk.w3{background:var(--geel)}
.werk.w4{background:var(--violet)}
.werk .soort{align-self:flex-start;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid currentColor;border-radius:999px;padding:3px 10px}
.werk h3{font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:inherit;margin-top:auto}
.werk p{color:inherit;opacity:.8}
.werk .pijl{font-weight:700;font-size:.95rem}
.werk .pijl::after{content:" \2197"}

/* overige secties */
.cms-sectie-faq{background:var(--papier)}
.faq summary{font-family:var(--kop);font-weight:700;font-size:1.15rem}
.cms-sectie-kennis{background:var(--wit)}
.functie{border-left:4px solid var(--geel);padding-left:20px}
.fasenav a{border:2px solid var(--asfalt);font-weight:600}
.fasenav a:hover{background:var(--geel);color:var(--asfalt)}
.cms-sectie-cta{background:var(--geel)}
.cms-sectie-contact{background:var(--papier)}
.lines{border-radius:20px;border:2px solid var(--asfalt);background:var(--wit)}
.lines b{font-family:var(--kop);font-weight:700}
.lines>a{font-family:var(--kop);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.cms-formulier input:not([type=checkbox]):not([type=range]),.cms-formulier select,.cms-formulier textarea{border:2px solid var(--asfalt);border-radius:12px}
.cms-formulier-bedankt{background:var(--geel);border:2px solid var(--asfalt);border-radius:16px}
footer{border-top:2px solid var(--asfalt)}
.footer-in b{font-family:var(--kop);font-weight:700;font-stretch:normal}

/* het bouwvenster in de hero: scheef, een website ontstaat blok voor blok */
.bouw{margin:0;position:relative;padding:10px 20px 40px 0}
.bw-venster{background:var(--wit);border:2px solid #fff;border-radius:18px;overflow:hidden;transform:rotate(2.5deg);box-shadow:12px 12px 0 var(--violet)}
.bw-balk{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--vlak);border-bottom:2px solid var(--asfalt)}
.bw-balk i{width:11px;height:11px;border-radius:50%;background:var(--oranje)}
.bw-balk i+i{background:var(--amber)}.bw-balk i+i+i{background:#3FCF8E}
.bw-balk span{margin-left:12px;flex:1;background:var(--wit);border-radius:999px;padding:4px 14px;font-size:.78rem;color:var(--grijs)}
.bw-pagina{padding:18px 22px 22px;display:grid;gap:16px}
.bw-nav{display:flex;align-items:center;gap:10px}
.bw-nav span{height:8px;width:42px;border-radius:4px;background:var(--vlak)}
.bw-nav .bw-logo{width:70px;height:16px;background:#8A4B1F;margin-right:auto}
.bw-nav .bw-knopje{width:60px;height:22px;border-radius:999px;background:#8A4B1F}
.bw-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center;padding:16px;border-radius:12px;background:#F6EFE4}
.bw-kop{font-family:Georgia,serif;font-size:1.5rem;line-height:1.05;color:#3B2A1A;margin:0 0 12px}
.bw-regel{display:block;height:7px;border-radius:4px;background:#E5D8C5;margin-bottom:7px}
.bw-regel.kort{width:70%}
.bw-cta{display:inline-block;margin-top:8px;font-size:.75rem;font-weight:600;color:#fff;background:#8A4B1F;border-radius:999px;padding:6px 12px}
.bw-beeld{aspect-ratio:4/3;border-radius:8px;background:radial-gradient(circle at 30% 35%,#F2C98B 0 18%,transparent 19%),radial-gradient(circle at 62% 58%,#D99A55 0 24%,transparent 25%),linear-gradient(135deg,#C9874A,#8A4B1F)}
.bw-kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bw-kaarten span{height:54px;border-radius:8px;background:var(--papier);border:1px solid var(--lijn)}
.bw-stappen{list-style:none;margin:0;position:absolute;left:-26px;bottom:0;background:var(--geel);color:var(--asfalt);border:2px solid var(--asfalt);border-radius:18px;padding:14px 18px;display:grid;gap:6px;transform:rotate(-3deg);box-shadow:6px 6px 0 var(--asfalt)}
.bw-stappen li{display:flex;align-items:center;gap:10px;font-size:.86rem;line-height:1.3}
.bw-stappen li::before{content:"\2713";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--asfalt);color:var(--geel);font-size:.7rem;font-weight:700}
.bw-stappen b{font-weight:700}
.bw-stappen span{margin-left:auto;padding-left:14px;font-size:.78rem;opacity:.75}
.badge{position:absolute;right:-6px;top:-30px;width:126px;height:126px;z-index:2}
.badge circle{fill:var(--roze);stroke:var(--asfalt);stroke-width:2}
.badge text{font-family:var(--kop);font-weight:800;font-size:10.6px;letter-spacing:1.4px;fill:var(--asfalt)}
.bouw figcaption{position:absolute;right:20px;bottom:6px;font-size:.74rem;color:#8F8C99}
@media (prefers-reduced-motion:no-preference){
  .badge{animation:draai 14s linear infinite}
  .bw-nav,.bw-hero,.bw-kaarten{animation:bwin .6s cubic-bezier(.2,.7,.2,1) both}
  .bw-nav{animation-delay:.3s}.bw-hero{animation-delay:.75s}.bw-kaarten{animation-delay:1.2s}
  .bw-stappen li{animation:bwin .4s ease both;animation-delay:calc(1.6s + var(--i) * .3s)}
}
@keyframes draai{to{transform:rotate(360deg)}}
@keyframes bwin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .bouw{padding:30px 6px 0}
  .bw-stappen{position:relative;left:0;margin-top:22px}
  .badge{right:0;top:-10px;width:96px;height:96px}
  .bouw figcaption{position:static;margin-top:12px}
}
@media (max-width:520px){.bw-hero{grid-template-columns:1fr}.bw-beeld{display:none}}

/* lange woorden in de grote koppen netjes houden */
.werk h3{font-size:clamp(1.6rem,3vw,2.4rem);overflow-wrap:anywhere}
.cms-sectie-faq h2{font-size:clamp(2rem,3vw,2.6rem);overflow-wrap:normal;word-break:normal}
.getal strong{font-size:clamp(3.2rem,5.4vw,4.6rem);white-space:nowrap}
@media (max-width:860px){.cms-sectie-faq h2{font-size:2.2rem}}
@media (max-width:420px){h1{font-size:2.6rem}.cms-sectie-hero h1{font-size:2.7rem}h2{font-size:2rem}}