/* =========================================================================
DS EXPRESS / DS KOMPAAN - GEDEELDE OPMAAK
Eén stylesheet voor alle pagina's. Voorheen stond de opmaak in elk
bestand apart. Nu hoeft een wijziging maar op één plek gedaan te worden
en laden alle vervolgpagina's uit de cache van de browser.
VASTE GEGEVENS
Telefoon 06 8179 6722 (in tel: links staat +31681796722)
WhatsApp 31681796722 (in alle wa.me links)
E-mail contact@dsexpress.nl
KvK 98167723 - btw NL005311864B38 - standplaats Heerenveen
LET OP: op de site staan geen tarieven. Dat is een bewuste keuze.
========================================================================= */
/* ---------- kleuren en basis ---------- */
:root{
--zwart:#0C0E11;
--vlak:#15181D; /* iets opgetild zwart, voor rustige blokken */
--wit:#FFFFFF;
--inkt:#16191D; /* tekstkleur binnen witte vlakken */
--tekst:#E7E9EC;
--grijs:#9AA1A9;
--lijn:rgba(255,255,255,.12);
--rood:#E1332D;
--rood-donker:#B7241F;
--groen:#25D366;
--groen-donker:#1DB855;
--display:"Arial Narrow","Helvetica Neue",Arial,Helvetica,sans-serif;
--schrift:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--zwart)}
body{
margin:0;background:var(--zwart);color:var(--tekst);
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
padding-bottom:74px; /* ruimte voor de vaste onderbalk op mobiel */
}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 14px}
.wrap{width:min(1080px,92vw);margin-inline:auto}
.smal{width:min(820px,92vw);margin-inline:auto}
.sec{padding:62px 0}
.sec-kort{padding:44px 0}
.sec-vlak{background:var(--vlak)}
.midden{text-align:center}
/* koppen: smal en rustig, niet vet en breed */
h1,h2,h3{margin:0 0 12px;font-family:var(--display);font-weight:700;line-height:1.1;text-transform:uppercase}
h1{font-size:clamp(2.2rem,7vw,4rem);letter-spacing:.02em;color:#fff}
h2{font-size:clamp(1.5rem,3.4vw,2.15rem);letter-spacing:.05em;color:#fff}
h3{font-size:1.05rem;letter-spacing:.06em;color:#fff}
.ico{width:20px;height:20px;flex:none}
.grijs{color:var(--grijs)}
.rood{color:var(--rood)}
.streep{width:118px;height:3px;background:var(--rood);margin:0 0 18px}
.streep-midden{margin-inline:auto}
/* ---------- logo ----------
Twee kolommen: links DS, rechts de merknaam met daaronder de rode streep
en de rechts uitgelijnde tagline. Alles in em, dus het schaalt mee met
de font-size van .logo zelf. Werkt voor beide merken: alleen de naam en
de tagline verschillen. */
.logo{
display:inline-grid;grid-template-columns:auto auto;column-gap:.2em;
font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1;
text-decoration:none;font-size:clamp(1.15rem,2.5vw,1.55rem);
}
.logo-ds{grid-column:1;grid-row:1;font-style:italic;color:var(--rood);letter-spacing:-.01em}
.logo-naam{grid-column:2;grid-row:1;color:var(--wit);letter-spacing:-.01em}
.logo-streep{grid-column:2;grid-row:2;height:.1em;background:var(--rood);margin-top:.3em}
.logo-tag{
grid-column:2;grid-row:3;text-align:right;color:var(--rood);
font-size:.34em;letter-spacing:0;margin-top:.55em;
}
.logo--donker .logo-naam{color:var(--inkt)}
/* ---------- knoppen ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:14px 22px;border-radius:3px;font-weight:700;font-size:.94rem;letter-spacing:.04em;
text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-app{background:var(--groen);color:#08210F}
.btn-app:hover{background:var(--groen-donker)}
.btn-rood{background:var(--rood);color:#fff}
.btn-rood:hover{background:var(--rood-donker)}
.btn-rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-rand:hover{background:#fff;color:var(--inkt)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:3px solid var(--rood);outline-offset:3px;
}
/* ---------- balk bovenaan met menu ---------- */
header{
position:sticky;top:0;z-index:40;background:rgba(12,14,17,.94);
backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn);
}
.balk{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
/* De bovenbalk krijgt een bredere kolom dan de rest van de pagina. Op een
breed scherm staat het logo daardoor dichter bij de linkerrand, terwijl de
tekst eronder op een prettige leesbreedte blijft. */
header .wrap{width:min(1400px,94vw)}
/* het logo mag bovenaan flink groter, dat is het eerste wat je moet zien */
header .logo{font-size:clamp(1.55rem,4.6vw,2.6rem)}
/* de knop met de drie streepjes, alleen zichtbaar op mobiel */
.menuknop{
display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;background:transparent;border:1px solid var(--lijn);
border-radius:3px;color:#fff;cursor:pointer;
}
.menuknop svg{width:24px;height:24px}
.menuknop[aria-expanded="true"]{background:var(--rood);border-color:var(--rood)}
.menu{
display:none;list-style:none;margin:0;padding:0;
}
.menu a{
display:block;text-decoration:none;font-family:var(--display);font-weight:700;
text-transform:uppercase;letter-spacing:.07em;font-size:.95rem;color:#fff;
padding:13px 0;border-bottom:1px solid var(--lijn);
}
.menu a:hover{color:var(--rood)}
.menu a[aria-current="page"]{color:var(--rood)}
/* uitgeklapt op mobiel */
.menu.open{display:block;padding-bottom:14px}
@media(min-width:900px){
.menuknop{display:none}
.menu{display:flex !important;align-items:center;gap:26px;padding:0}
.menu a{padding:6px 0;border-bottom:2px solid transparent;font-size:.88rem}
.menu a:hover{border-bottom-color:var(--rood)}
.menu a[aria-current="page"]{border-bottom-color:var(--rood)}
.menu .menu-cta a{
background:var(--rood);color:#fff;padding:11px 18px;border:0;border-radius:3px;
}
.menu .menu-cta a:hover{background:var(--rood-donker);color:#fff}
}
/* ---------- hero met foto ---------- */
.hero{position:relative;overflow:hidden;background:var(--zwart)}
.hero-media{position:absolute;inset:0}
.hero-media img{
position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;
filter:brightness(1.16) contrast(1.04) saturate(1.06); /* foto iets oplichten */
}
/* Het verloop blijft licht boven de foto en wordt pas donker waar de tekst begint. */
.hero-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(12,14,17,.10) 0%,rgba(12,14,17,.38) 34%,rgba(12,14,17,.86) 58%,var(--zwart) 76%);
}
.hero-in{position:relative;padding:280px 0 44px}
.hero-tekst{max-width:580px}
@media(min-width:900px){
/* De foto wordt breder gemaakt en naar links geschoven, zodat Daniël
links in beeld staat en de tekst rechts nergens over hem heen loopt. */
.hero-media img{width:122%;left:-22%;object-position:50% 24%}
.hero-media::after{background:linear-gradient(90deg,rgba(12,14,17,.04) 0%,rgba(12,14,17,.22) 30%,rgba(12,14,17,.72) 52%,var(--zwart) 72%)}
.hero-in{padding:110px 0 78px;min-height:82vh;display:flex;align-items:center;justify-content:flex-end}
.hero-tekst{max-width:560px}
}
.hero h1{margin:0 0 14px;color:#fff}
.hero-sub{
font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
font-size:clamp(1.08rem,2.6vw,1.5rem);line-height:1.25;margin:0 0 10px;color:#fff;
}
.hero-claim{color:#C3C9D0;margin:0 0 22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;padding:12px 0}
.hero-cta .btn{flex:1 1 auto}
.hero-nb{display:flex;align-items:center;gap:8px;color:#C3C9D0;font-size:.9rem;margin:6px 0 0}
.hero-nb svg{width:15px;height:15px;color:var(--rood);flex:none}
/* eenvoudige paginakop, voor pagina's zonder grote foto */
.pagkop{padding:56px 0 10px;border-bottom:1px solid var(--lijn)}
.pagkop .merk{
font-family:var(--display);font-weight:700;text-transform:uppercase;
letter-spacing:.14em;font-size:.9rem;color:var(--rood);margin:0 0 10px;
}
.pagkop p.lead{color:var(--grijs);max-width:62ch;font-size:1.05rem;margin:14px 0 30px}
/* ---------- de drie kenmerken met cirkelicoon ---------- */
.kenmerken{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;margin:0;padding:22px 0 0;
border-top:1px solid var(--lijn);
}
.kenmerken li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.kenmerken .cirkel{
width:46px;height:46px;border-radius:50%;border:2px solid var(--rood);color:var(--rood);
display:grid;place-items:center;
}
.kenmerken .cirkel svg{width:23px;height:23px}
.kenmerken span{
font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;color:#fff;
}
/* ---------- label met lichte scheefstand, als de kwaststreek ---------- */
.label{display:inline-block;background:var(--wit);color:var(--inkt);padding:9px 22px 9px 18px;transform:skewX(-7deg);margin:0 0 22px}
.label span{
display:block;transform:skewX(7deg);
font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;
}
/* ---------- merkkaarten op de homepage ---------- */
.merken{display:grid;gap:18px;margin-top:8px}
@media(min-width:760px){.merken{grid-template-columns:1fr 1fr;gap:22px}}
.merk-kaart{
display:flex;flex-direction:column;background:var(--vlak);
border:1px solid var(--lijn);border-top:4px solid var(--rood);
padding:30px 26px 26px;transition:border-color .18s ease,transform .18s ease;
}
.merk-kaart:hover{transform:translateY(-3px);border-color:rgba(225,51,45,.55);border-top-color:var(--rood)}
.merk-kaart .pict{width:48px;height:48px;color:var(--rood);margin-bottom:16px}
.merk-kaart .pict svg{width:48px;height:48px}
.merk-kaart .naam{
font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:1.5rem;line-height:1;
color:#fff;margin:0 0 8px;
}
.merk-kaart .naam i{font-style:italic;color:var(--rood)}
.merk-kaart .rol{
font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
font-size:.82rem;color:var(--rood);margin:0 0 14px;
}
.merk-kaart p{color:var(--grijs);font-size:.96rem;flex:1 0 auto}
.merk-kaart .btn{margin-top:18px;align-self:flex-start}
/* ---------- dienstenblokken ---------- */
.diensten{display:grid;gap:16px;margin-top:8px}
@media(min-width:760px){.diensten{grid-template-columns:repeat(3,1fr)}}
.diensten article{
background:var(--vlak);border:1px solid var(--lijn);border-top:3px solid var(--rood);padding:26px 22px;
}
.sec-vlak .diensten article{background:rgba(255,255,255,.03)}
.diensten .pict{width:36px;height:36px;color:var(--rood);margin-bottom:12px}
.diensten .pict svg{width:36px;height:36px}
.diensten p{color:var(--grijs);font-size:.95rem;margin:0}
.diensten ul{list-style:none;margin:10px 0 0;padding:0}
.diensten ul li{
display:flex;gap:9px;align-items:flex-start;color:var(--grijs);font-size:.93rem;padding:5px 0;
}
.diensten ul li::before{
content:"";flex:none;width:6px;height:6px;margin-top:.55em;background:var(--rood);border-radius:50%;
}
/* ---------- takenlijst met vierkante iconen ---------- */
.taken{list-style:none;margin:0;padding:0}
.taken li{display:flex;align-items:center;gap:16px;padding:13px 2px;border-bottom:1px dotted var(--lijn);font-size:1rem}
.taken li:last-child{border-bottom:0}
.taken .vak{
width:38px;height:38px;flex:none;border:1.5px solid var(--rood);border-radius:5px;
display:grid;place-items:center;color:var(--rood);
}
.taken .vak svg{width:21px;height:21px}
.kolommen{display:grid;gap:34px;align-items:start}
@media(min-width:900px){.kolommen{grid-template-columns:1fr 1fr;gap:44px}}
/* ---------- stappen op de werkwijzepagina ---------- */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.stappen li{
display:flex;gap:18px;align-items:flex-start;background:var(--vlak);
border:1px solid var(--lijn);border-left:3px solid var(--rood);padding:22px 24px;
}
.sec-vlak .stappen li{background:rgba(255,255,255,.03)}
.stappen .nummer{
flex:none;width:38px;height:38px;border-radius:50%;background:var(--rood);color:#fff;
display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.1rem;
}
.stappen h3{margin:0 0 5px}
.stappen p{margin:0;color:var(--grijs);font-size:.96rem}
/* ---------- fotoplek: gereserveerde ruimte tot de foto er is ----------
Zodra de foto beschikbaar is, vervang je het hele blok door:
*/
.fotoplek{
display:grid;place-items:center;text-align:center;gap:8px;
aspect-ratio:16/9;background:var(--vlak);
border:1px dashed rgba(225,51,45,.45);color:var(--grijs);padding:24px;
}
.fotoplek svg{width:38px;height:38px;color:var(--rood)}
.fotoplek b{
display:block;font-family:var(--display);font-weight:700;text-transform:uppercase;
letter-spacing:.09em;font-size:.85rem;color:#fff;
}
.fotoplek span{font-size:.85rem;max-width:40ch}
/* ---------- witte vlakken ---------- */
.wit{background:var(--wit);color:var(--inkt);border-top:4px solid var(--rood)}
.wit h2,.wit h3,.wit b{color:var(--inkt)}
.wit .grijs{color:#61686F}
/* ---------- zekerheidkaarten ---------- */
.zeker{display:grid;gap:16px;grid-template-columns:1fr;margin-top:8px}
@media(min-width:760px){.zeker{grid-template-columns:repeat(3,1fr)}}
.zeker article{background:var(--vlak);border:1px solid var(--lijn);border-top:3px solid var(--rood);padding:24px 22px}
.sec-vlak .zeker article{background:rgba(255,255,255,.03)}
.zeker .pict{width:36px;height:36px;color:var(--rood);margin-bottom:12px}
.zeker .pict svg{width:36px;height:36px}
.zeker p{color:var(--grijs);font-size:.95rem;margin:0}
.kaart-link{
display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--rood);
font-weight:700;font-size:.9rem;text-decoration:none;border-bottom:1px solid rgba(225,51,45,.45);padding-bottom:2px;
}
.kaart-link:hover{color:#fff;border-bottom-color:#fff}
.kaart-link svg{width:16px;height:16px}
/* ---------- over Daniel ---------- */
.over{display:grid;gap:30px;align-items:center}
@media(min-width:700px){.over{grid-template-columns:.85fr 1.15fr;gap:30px}}
@media(min-width:1000px){.over{grid-template-columns:.62fr 1.38fr;gap:44px}}
.over-foto{position:relative;margin:0 auto;max-width:320px;border-bottom:4px solid var(--rood)}
/* Balkje onderaan de foto, met een verloop zodat het niet als een blok
over zijn schoenen valt. */
.over-foto figcaption{
position:absolute;left:0;right:0;bottom:0;
background:linear-gradient(180deg,rgba(12,14,17,0),rgba(12,14,17,.88) 48%);
padding:30px 16px 13px;display:flex;align-items:center;gap:10px;
font-family:var(--display);font-weight:700;text-transform:uppercase;
letter-spacing:.09em;font-size:.82rem;color:#fff;
}
.over-foto figcaption::before{content:"";flex:none;width:22px;height:2px;background:var(--rood)}
@media(min-width:700px){.over-foto{max-width:none;margin:0}}
/* De foto is 602 bij 873. Met deze uitsnede blijft Daniël met de plank
volledig in beeld en valt alleen wat lege vloer weg. */
.over-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 32%}
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:20px 0 0;padding:0}
.pills li{
display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
background:rgba(255,255,255,.05);border:1px solid var(--lijn);font-size:.88rem;font-weight:700;
}
.pills svg{width:16px;height:16px;color:var(--rood)}
.tekstlink{color:var(--rood);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(225,51,45,.45)}
.tekstlink:hover{color:#fff;border-bottom-color:#fff}
/* ---------- interesse-balk ---------- */
.interesse{background:var(--vlak);border-top:3px solid var(--rood);padding:36px 0}
.interesse-in{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.interesse-in{grid-template-columns:auto 1fr auto;gap:34px}}
.interesse .titel{font-family:var(--schrift);font-style:italic;font-size:2.2rem;line-height:1;color:#fff;border-bottom:2px solid var(--rood);padding-bottom:6px;margin:0}
.interesse .oproep{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;line-height:1.35;font-size:1rem;margin:0;color:#fff}
.interesse .oproep i{font-style:normal;color:var(--rood)}
.gegevens{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.gegevens li{display:flex;align-items:center;gap:11px}
.gegevens svg{width:19px;height:19px;color:var(--rood);flex:none}
.gegevens a{text-decoration:none;font-weight:600}
.gegevens a:hover{color:var(--rood)}
/* ---------- formulier, staat in een wit vlak ---------- */
.form-blok{padding:clamp(22px,4vw,36px)}
.form-blok label{display:block;font-size:.82rem;font-weight:700;margin-bottom:5px;color:var(--inkt)}
.form-blok input,.form-blok select,.form-blok textarea{
width:100%;padding:12px 13px;background:#F5F3F0;border:1px solid #DCD7D0;
color:var(--inkt);font:inherit;font-size:.96rem;border-radius:3px;
}
.form-blok textarea{min-height:92px;resize:vertical}
.form-blok input:focus,.form-blok select:focus,.form-blok textarea:focus{border-color:var(--rood);background:#fff;outline:none}
.rij{display:grid;gap:13px;margin-bottom:13px}
@media(min-width:540px){.rij-2{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* het vinkje "ik ben geen robot" */
.akkoord{display:flex;align-items:flex-start;gap:11px;margin:4px 0 16px}
.akkoord input[type=checkbox]{
width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--rood);cursor:pointer;
}
.akkoord label{margin:0;font-size:.92rem;font-weight:600;line-height:1.45;cursor:pointer}
/* Foutmeldingen bij een veld staan standaard UIT. Het script zet de klasse
"toon" erop zodra er echt iets mis is, en haalt hem er meteen weer af
zodra het klopt. Gebruik hier geen display:block als standaard, want dan
staat de melding altijd in beeld. */
.veldfout{
display:none;margin-top:5px;font-size:.84rem;font-weight:600;color:#A5231E;
}
.veldfout.toon{display:block}
.form-blok input.fout,.form-blok select.fout,.form-blok textarea.fout{
border-color:#A5231E;background:#FCEBEA;
}
.form-melding{display:none;margin-top:13px;padding:12px 15px;font-size:.93rem;font-weight:600;border-radius:3px}
.form-melding.goed{display:block;background:#E8F8EE;border:1px solid #9FDCB8;color:#1B6C3C}
.form-melding.fout{display:block;background:#FCEBEA;border:1px solid #F0B4B1;color:#A5231E}
/* ---------- lopende tekst op de tekstpagina's ---------- */
.tekst h2{margin-top:34px}
.tekst h3{margin-top:24px;color:#fff}
.tekst p,.tekst li{color:var(--grijs)}
.tekst ul{padding-left:20px}
.tekst li{margin-bottom:7px}
.tekst a{color:var(--rood)}
/* ---------- juridische pagina's: voorwaarden en privacy ---------- */
.bijgewerkt{color:var(--grijs);font-size:.88rem;margin:0 0 6px}
.artikelen article{padding:26px 0;border-bottom:1px solid var(--lijn)}
.artikelen article:last-of-type{border-bottom:0}
.artikelen h2{
font-size:clamp(1.1rem,2.4vw,1.35rem);letter-spacing:.05em;
display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;margin:0 0 12px;
}
.artikelen .nr{color:var(--rood);white-space:nowrap}
.artikelen p,.artikelen li{color:var(--grijs);font-size:.97rem}
.artikelen ul{padding-left:20px;margin:0 0 14px}
.artikelen li{margin-bottom:7px}
.artikelen a{color:var(--rood)}
.contactblok{background:var(--vlak);border:1px solid var(--lijn);border-top:3px solid var(--rood);padding:26px 24px;margin-top:34px}
.contactblok h2{font-size:1.1rem;margin:0 0 12px}
.contactblok p{color:var(--grijs);margin:0}
.contactblok a{color:var(--rood);text-decoration:none;font-weight:700}
.contactblok a:hover{color:#fff}
/* ---------- veelgestelde vragen ----------
De accordeon staat op en . Dat werkt en is
toegankelijk, ook zonder JavaScript. Het script zorgt er alleen voor
dat er één vraag tegelijk openstaat. */
.vragen{padding:46px 0 10px}
.faq-item{border-bottom:1px solid var(--lijn)}
.faq-item summary{
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:20px 2px;cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.vraag{font-weight:700;font-size:1.04rem;line-height:1.4;color:#fff}
.faq-item:hover .vraag{color:var(--rood)}
.chev{
flex:none;width:32px;height:32px;border:1.5px solid var(--rood);border-radius:50%;
display:grid;place-items:center;color:var(--rood);transition:transform .22s ease,background .22s ease;
}
.chev svg{width:16px;height:16px}
.faq-item[open] .chev{transform:rotate(180deg);background:var(--rood);color:#fff}
.faq-body{padding:0 2px 22px;max-width:74ch}
.faq-body p{color:var(--grijs);margin:0 0 12px}
.faq-body p:last-child{margin:0}
.faq-body a{color:var(--rood);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(225,51,45,.45)}
.faq-body a:hover{color:#fff;border-bottom-color:#fff}
/* keurmerk bij de SVH-vraag */
.keurmerk{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--lijn);border-left:3px solid var(--rood);padding:16px 18px;margin-top:6px}
.keurmerk-badge{
flex:none;width:44px;height:44px;border-radius:50%;background:var(--rood);color:#fff;
display:grid;place-items:center;font-family:var(--display);font-weight:700;letter-spacing:.06em;font-size:.9rem;
}
.keurmerk .naam{display:block;font-weight:700;color:#fff;font-size:.96rem}
.keurmerk .detail{display:block;color:var(--grijs);font-size:.88rem;line-height:1.5}
/* ---------- afsluitende oproep ---------- */
.slot{background:var(--vlak);border-top:3px solid var(--rood);padding:40px 0;margin-top:40px}
.slot-in{display:grid;gap:20px;align-items:center}
@media(min-width:880px){.slot-in{grid-template-columns:1fr auto;gap:34px}}
.slot h2{margin:0 0 8px}
.slot p{margin:0;color:var(--grijs);max-width:60ch}
.slot-knoppen{display:flex;flex-wrap:wrap;gap:10px}
/* ---------- footer ---------- */
footer{background:var(--zwart);border-top:1px solid var(--lijn);color:var(--grijs);padding:34px 0;font-size:.88rem}
.foot{display:flex;flex-wrap:wrap;gap:20px 26px;justify-content:space-between;align-items:flex-start}
footer a{text-decoration:none}
footer a:hover{color:var(--rood)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;max-width:340px}
.handelsnaam{display:inline-block;margin-top:6px;font-size:.84rem;opacity:.8}
/* ---------- vaste onderbalk op mobiel ---------- */
.onderbalk{
position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;
padding:9px 10px calc(9px + env(safe-area-inset-bottom));
background:rgba(12,14,17,.97);border-top:2px solid var(--rood);
}
.onderbalk a{
display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 8px;border-radius:3px;
font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;
}
.onderbalk .bel{background:var(--rood);color:#fff}
.onderbalk .app{background:var(--groen);color:#08210F}
@media(min-width:820px){.onderbalk{display:none}body{padding-bottom:0}}