/* Demo-ontwerp GJ Billiards webshop: lichte productpagina in het navy van het logo, met het geel van de bal als accent. */
:root{
--navy:#0e3a6b; --navy-diep:#082a4f; --navy-licht:#e6eef8;
--geel:#f2c230; --geel-diep:#d9a80f; --rood:#d9382b;
--wit:#ffffff; --grijs:#f3f5f8; --lijn:#e1e6ed; --lijn-fel:#c9d2dd;
--inkt:#111827; --inkt-2:#5b6675;
--maat:clamp(1rem,3.5vw,2rem); --breed:1240px; --hoek:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--grijs);color:var(--inkt);
font-family:Manrope,system-ui,Segoe UI,sans-serif;font-size:16px;line-height:1.6;
-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:Outfit,Manrope,sans-serif;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--geel-diep);outline-offset:2px}
.vak{max-width:var(--breed);margin-inline:auto;padding-inline:var(--maat)}
.label{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.prijs{font-variant-numeric:tabular-nums;font-weight:800}
.skip{position:absolute;left:-9999px;background:var(--geel);color:var(--inkt);padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
section{scroll-margin-top:130px}
/* ---------- demo-strook ---------- */
.demo{background:var(--inkt);color:#cfd6df;font-size:.8rem;text-align:center;padding:.45rem var(--maat)}
.demo b{color:var(--geel)}
/* ---------- usp-balk ---------- */
.usp{background:var(--navy);color:#dbe6f3;font-size:.8rem;font-weight:600}
.usp-rij{display:flex;align-items:center;justify-content:space-between;gap:.3rem 1.5rem;padding-block:0}
.usp-punten{display:flex;flex-wrap:wrap;gap:.3rem 2rem;padding:.5rem 0;min-width:0}
.usp-punten span::before{content:"✓";color:var(--geel);margin-right:.45rem;font-weight:800}
.usp-taal{display:flex;gap:.15rem;margin-left:auto;margin-right:.6rem;flex-shrink:0}
.usp-taal a{color:#a9bdd3;text-decoration:none;font-weight:800;font-size:.72rem;letter-spacing:.06em;padding:.3rem .45rem;border-radius:6px}
.usp-taal a:hover{color:#fff}
.usp-taal a.uit{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:600px){.usp-taal{margin-left:0}}
.usp-login{display:flex;align-items:stretch;flex-shrink:0}
.usp-login{align-items:center;gap:.5rem;padding:.3rem 0}
.usp-login a{display:flex;align-items:center;gap:.4rem;color:#fff;text-decoration:none;font-weight:700;padding:.35rem .85rem;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;line-height:1.2}
.usp-login a:hover{background:rgba(255,255,255,.12);border-color:#fff}
.usp-login .usp-dealer{background:var(--geel);color:#1b1b1b;border-color:var(--geel)}
/* ingelogd: voornaam in de knop (dealer met geel labeltje) en een rustige uitlogknop ernaast */
.usp-login .usp-ik{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.usp-login .usp-ik em{font-style:normal;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:var(--geel);color:#1b1b1b;border-radius:999px;padding:.1rem .45rem;margin-left:.1rem}
.usp-login .usp-uit{border-color:transparent;color:#a9bdd3;padding-inline:.5rem}.usp-login .usp-uit:hover{color:#fff;background:none;border-color:rgba(255,255,255,.4)}
.usp-login .usp-dealer:hover{background:#ffd54a;border-color:#ffd54a}
@media(min-width:601px){.nav-rij a.nav-account,.nav-rij a.nav-dealer{display:none!important}}
@media(max-width:600px){.usp-login{display:none}}
/* mobiel: alleen de vaste regel; op pc wisselen de drie punten om de beurt (onder 1440 px), daarboven staan ze alle drie */
@media(max-width:600px){.usp-punten span{display:none}.usp-punten span.usp-vast{display:inline}}
@media(min-width:601px) and (max-width:1439px){.usp-punten span{display:none}.usp-punten span.aan{display:inline;animation:uspIn .5s ease}}
@media(min-width:1440px){.usp-punten{flex-wrap:nowrap;gap:.3rem 1.4rem}.usp-punten span{white-space:nowrap}}
@keyframes uspIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:40;background:var(--wit);border-bottom:1px solid var(--lijn)}
.kop-rij{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem 1.6rem;min-height:74px}
.merk{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.merk img{width:46px;height:46px;border-radius:50%}
.merk b{font-family:Outfit,sans-serif;font-weight:800;font-size:1.2rem;letter-spacing:-.01em;line-height:1}
.merk small{display:block;color:var(--inkt-2);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}
.zoek{position:relative;max-width:520px;justify-self:center;width:100%}
.zoek input{width:100%;border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.62rem 1rem .62rem 2.6rem;
font:inherit;font-size:.93rem;background:var(--grijs)}
.zoek input:focus{border-color:var(--navy);background:var(--wit);outline:none}
.zoek svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--inkt-2)}
.kop-acties{display:flex;align-items:center;gap:.5rem}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;
border-radius:999px;padding:.66rem 1.2rem;font-weight:800;font-size:.9rem;text-decoration:none;cursor:pointer;
transition:background-color .15s,color .15s,border-color .15s,transform .1s}
.knop:active{transform:translateY(1px)}
.knop-geel{background:var(--geel);color:var(--inkt)}
.knop-geel:hover{background:var(--geel-diep)}
.knop-navy{background:var(--navy);color:#fff}
.knop-navy:hover{background:var(--navy-diep)}
.knop-lijn{background:transparent;border-color:var(--lijn-fel);color:var(--inkt)}
.knop-lijn:hover{border-color:var(--navy);color:var(--navy)}
.knop-wit{background:var(--wit);color:var(--navy)}
.knop-wit:hover{background:var(--navy-licht)}
.wagen{position:relative}
.wagen .tel{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:999px;background:var(--rood);
color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;padding-inline:.35rem}
.wagen .tel[hidden]{display:none}
.hamb{display:none;background:none;border:1.5px solid var(--lijn-fel);border-radius:999px;width:42px;height:42px;
place-items:center;cursor:pointer;color:var(--inkt)}
.nav{border-top:1px solid var(--lijn)}
.nav-rij{display:flex;gap:1.6rem;overflow-x:auto;scrollbar-width:none}
.nav-rij::-webkit-scrollbar{display:none}
.nav-rij a{text-decoration:none;font-weight:700;font-size:.9rem;color:var(--inkt-2);padding:.75rem 0;white-space:nowrap;
border-bottom:2px solid transparent}
.nav-rij a:hover{color:var(--navy);border-color:var(--geel)}
.nav-rij a.uit{color:var(--navy)}
@media(max-width:820px){
.kop-rij{grid-template-columns:auto auto;min-height:64px}
.zoek{grid-column:1/-1;max-width:none;display:none}
.zoek.open{display:block;padding-bottom:.7rem}
.hamb{display:grid}
.nav[hidden]{display:none}
.nav-rij{flex-direction:column;gap:0;padding-block:.3rem}
.nav-rij a{padding:.7rem 0;border-bottom:1px solid var(--lijn)}
.knop-tekst{display:none}
/* menu open in liggende stand: scrollen binnen het menu */
.nav{max-height:calc(100dvh - 66px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* inloggen en dealer login: zelfde kleur als in de balk op groot scherm */
.nav-rij a.nav-account{color:var(--navy);display:flex;align-items:center;gap:.5rem}
.nav-rij a.nav-uit{color:var(--inkt-2);font-weight:600}.nav-rij a.nav-uit::before{display:none}
.nav-rij a.nav-account::before{content:"";width:14px;height:14px;flex:0 0 14px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
.nav-rij a.nav-account:last-child{border-bottom:0}
.nav-rij a.nav-dealer{background:var(--geel);color:#1b1b1b;border-radius:999px;padding:.6rem 1rem;margin:.6rem 0 .4rem;justify-content:center;border-bottom:0}
.nav-rij a.nav-dealer::before{display:none}
}
@media(min-width:821px){.nav[hidden]{display:block}}
/* ---------- binnenkomer: foto van Gert-Jan over de volle breedte ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;
min-height:min(88vh,760px);display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top,rgba(8,42,79,.94) 6%,rgba(8,42,79,.62) 38%,rgba(8,42,79,.1) 72%,rgba(8,42,79,0) 100%),
linear-gradient(to right,rgba(8,42,79,.72) 0%,rgba(8,42,79,.35) 42%,rgba(8,42,79,0) 68%)}
.hero-inhoud{width:100%;padding-block:clamp(2rem,6vw,3.6rem);display:grid;gap:1.6rem 2.5rem;align-items:end}
@media(min-width:960px){.hero-inhoud{grid-template-columns:minmax(0,1fr) auto}}
.hero-tekst .label{color:var(--geel);display:block;margin-bottom:1rem}
.hero-tekst h1{margin-bottom:1rem;max-width:14ch;font-size:clamp(2.6rem,6vw,4.6rem);text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero-tekst h1 em{font-style:normal;color:var(--geel)}
.hero-tekst p{color:#e2eaf3;max-width:50ch;font-size:1.08rem;margin-bottom:1.6rem;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:.7rem}
/* productkaart als uitgelicht artikel in de hoek */
.hero-kaart{background:var(--wit);color:var(--inkt);border-radius:calc(var(--hoek) * 1.4);padding:.9rem .9rem .9rem 1rem;
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;text-decoration:none;
box-shadow:0 14px 40px rgba(0,0,0,.28);max-width:420px}
.hero-kaart img{width:88px;height:88px;object-fit:cover;object-position:50% 45%;border-radius:8px;background:var(--grijs)}
.hero-kaart .label{font-size:.62rem}
.hero-kaart b{font-family:Outfit,sans-serif;font-size:1.05rem;display:block;line-height:1.15}
.hero-kaart small{color:var(--inkt-2);font-size:.8rem;display:block;margin-top:.15rem}
.hero-kaart .prijs{color:var(--navy);font-size:1.05rem;white-space:nowrap}
.hero-kaart:hover{box-shadow:0 18px 48px rgba(0,0,0,.34)}
@media(max-width:959px){.hero-kaart{max-width:none}}
@media(max-width:600px){
.hero{min-height:min(88vh,720px)}
.hero>img{object-position:62% 0%;transform:none}
.hero-inhoud{padding-top:clamp(11rem,46vw,16rem)}
.hero::after{background:linear-gradient(to top,rgba(8,42,79,.96) 10%,rgba(8,42,79,.8) 45%,rgba(8,42,79,.25) 75%,rgba(8,42,79,0) 100%)}
.hero-knoppen{display:grid;grid-template-columns:1fr}
.hero-kaart img{width:64px;height:64px}
}
/* ---------- categorieën ---------- */
.cats{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.cats{grid-template-columns:repeat(5,1fr)}}
@media(max-width:699px){.cats .cat:last-child{grid-column:span 2}}
.cat{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);padding:1rem;text-decoration:none;
display:grid;gap:.4rem;transition:border-color .15s,box-shadow .15s}
.cat:hover{border-color:var(--navy);box-shadow:0 6px 18px rgba(8,42,79,.08)}
.cat img{height:96px;width:100%;object-fit:contain}
.cat b{font-family:Outfit,sans-serif;font-weight:700;font-size:1rem}
.cat small{color:var(--inkt-2);font-size:.8rem}
/* ---------- gedeelde sectiekop ---------- */
.blok{padding-block:clamp(2.2rem,5vw,3.6rem)}
.sectiekop{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.6rem 1.5rem;margin-bottom:1.4rem}
.sectiekop p{color:var(--inkt-2);max-width:56ch}
/* ---------- GJ pomerans uitgelicht ---------- */
.uitgelicht{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);overflow:hidden;
display:grid}
@media(min-width:860px){.uitgelicht{grid-template-columns:.9fr 1.1fr}}
.uitgelicht-foto{background:radial-gradient(circle at 50% 45%,#fff 0 55%,#eef2f6 100%);display:grid;place-items:center;padding:1.5rem;min-height:300px}
.uitgelicht-foto img{width:min(100%,420px)}
.uitgelicht-tekst{padding:clamp(1.4rem,3.5vw,2.6rem)}
.uitgelicht-tekst .label{display:block;margin-bottom:.6rem}
.uitgelicht-tekst h2{margin-bottom:.7rem}
.uitgelicht-tekst > p{color:var(--inkt-2);margin-bottom:1.2rem;max-width:52ch}
.hardheden{display:grid;gap:.5rem;margin-bottom:1.3rem}
@media(min-width:560px){.hardheden{grid-template-columns:1fr 1fr}}
.hardheid{border:1.5px solid var(--lijn);border-radius:var(--hoek);padding:.7rem .9rem;cursor:pointer;
display:grid;gap:.1rem;background:var(--grijs);text-align:left;transition:border-color .15s,background-color .15s}
.hardheid b{font-family:Outfit,sans-serif;font-size:.98rem}
.hardheid small{color:var(--inkt-2);font-size:.8rem;line-height:1.35}
.hardheid[aria-pressed="true"]{border-color:var(--navy);background:var(--navy-licht)}
.uitgelicht-koop{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem}
.uitgelicht-koop .prijs{font-size:1.5rem}
.uitgelicht-koop .prijs small{font-size:.75rem;color:var(--inkt-2);font-weight:600}
/* ---------- productraster ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.filter{border:1.5px solid var(--lijn-fel);background:var(--wit);border-radius:999px;padding:.45rem 1rem;font-weight:700;
font-size:.86rem;cursor:pointer;color:var(--inkt-2)}
.filter:hover{border-color:var(--navy);color:var(--navy)}
.filter[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.raster{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
/* mobiel: één product per beeld, horizontaal doorschuiven (volgende kaart piept aan de rand mee) */
@media(max-width:600px){
.raster{display:flex;overflow-x:auto;gap:.8rem;margin-inline:calc(-1 * var(--maat));padding:.2rem var(--maat) .8rem;
scroll-snap-type:x mandatory;scroll-padding-inline:var(--maat);-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.raster>.product{flex:0 0 84%;scroll-snap-align:start}
.raster>.product:last-of-type{margin-right:var(--maat)}
.raster>.geen{flex:0 0 100%}
}
@media(min-width:700px){.raster{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.raster{grid-template-columns:repeat(4,1fr)}}
.product{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);display:flex;flex-direction:column;
overflow:hidden;position:relative;transition:box-shadow .15s,border-color .15s}
.product:hover{border-color:var(--lijn-fel);box-shadow:0 10px 26px rgba(8,42,79,.08)}
.product[hidden]{display:none}
.product-foto{background:radial-gradient(circle at 50% 50%,#fff 0 60%,#f0f3f7 100%);aspect-ratio:1/1;display:grid;place-items:center;padding:1rem}
.product-foto img{width:100%;height:100%;object-fit:contain;transition:transform .25s}
.product:hover .product-foto img{transform:scale(1.04)}
.product-tekst{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.product-tekst .merknaam{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--inkt-2)}
.product-tekst h3{font-size:1rem;line-height:1.25}
.product-tekst .omschr{color:var(--inkt-2);font-size:.84rem;line-height:1.45}
.stalen{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.2rem}
.stalen i{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12);display:block}
.stalen small{color:var(--inkt-2);font-size:.75rem;align-self:center}
.product-onder{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.6rem}
.product-onder .prijs{font-size:1.08rem}
.product-onder .prijs small{display:block;font-size:.7rem;color:var(--inkt-2);font-weight:600}
.koop{width:40px;height:40px;border-radius:50%;border:0;background:var(--navy);color:#fff;cursor:pointer;
display:grid;place-items:center;flex:none;transition:background-color .15s,transform .1s}
.koop:hover{background:var(--navy-diep)}
.koop:active{transform:scale(.94)}
.koop[disabled]{background:var(--lijn-fel);cursor:not-allowed}
.tag{position:absolute;top:.8rem;left:.8rem;border-radius:999px;padding:.25rem .65rem;font-size:.7rem;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;z-index:1}
.tag-geel{background:var(--geel);color:var(--inkt)}
.tag-rood{background:var(--rood);color:#fff}
.tag-grijs{background:var(--inkt-2);color:#fff}
.tag-navy{background:var(--navy);color:#fff}
.geen{grid-column:1/-1;background:var(--wit);border:1px dashed var(--lijn-fel);border-radius:var(--hoek);padding:2rem;
text-align:center;color:var(--inkt-2)}
/* ---------- vertrouwen ---------- */
.trust{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:var(--hoek);overflow:hidden}
@media(min-width:700px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust div{background:var(--wit);padding:1.2rem 1.2rem;display:grid;gap:.2rem}
.trust b{font-family:Outfit,sans-serif;font-size:1rem}
.trust span{color:var(--inkt-2);font-size:.86rem}
.trust svg{color:var(--navy);margin-bottom:.4rem}
/* ---------- service + verkooppunten ---------- */
.twee{display:grid;gap:1rem}
@media(min-width:900px){.twee{grid-template-columns:1.1fr .9fr}}
.paneel{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);padding:clamp(1.4rem,3.5vw,2.4rem)}
.paneel .label{display:block;margin-bottom:.5rem}
.paneel h2{margin-bottom:.8rem}
.paneel p{color:var(--inkt-2);max-width:56ch}
.paneel p + p{margin-top:.7rem}
.tijden{display:grid;gap:.5rem;margin:1.2rem 0;border-top:1px solid var(--lijn)}
.tijden div{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--lijn);font-size:.95rem}
.tijden b{color:var(--inkt)}
.dealers{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.4rem}
.dealers li{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border:1px solid var(--lijn);
border-radius:var(--hoek);font-weight:700}
.dealers li small{color:var(--inkt-2);font-weight:600;font-size:.8rem}
.paneel-navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.paneel-navy .label{color:var(--geel)}
.paneel-navy p{color:#cfdcec}
.paneel-navy .dealers li{border-color:rgba(255,255,255,.18)}
.paneel-navy .dealers li small{color:#a9bdd3}
/* ---------- over Gert-Jan ---------- */
.over{background:var(--wit);border-block:1px solid var(--lijn)}
.over-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.over-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.5rem}}
.over-logo{background:var(--grijs);border-radius:calc(var(--hoek) * 2);padding:2rem;display:grid;place-items:center;gap:1.2rem}
.over-logo img{width:min(62%,280px);border-radius:50%}
.over-logo .cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%}
.over-logo .cijfers div{background:var(--wit);border-radius:var(--hoek);padding:.8rem;text-align:center}
.over-logo .cijfers b{display:block;font-family:Outfit,sans-serif;font-size:1.4rem;color:var(--navy)}
.over-logo .cijfers small{color:var(--inkt-2);font-size:.75rem;line-height:1.3;display:block}
.citaat{font-family:Outfit,sans-serif;font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:600;line-height:1.35;
margin:1rem 0 1.2rem;color:var(--inkt)}
.over p{color:var(--inkt-2);max-width:60ch}
.over p + p{margin-top:.7rem}
.palmares{margin-top:1.4rem;border-top:1px solid var(--lijn);padding-top:1rem;display:grid;gap:.3rem;font-size:.94rem}
.palmares div{display:grid;grid-template-columns:5.5rem 1fr;gap:.8rem}
.palmares span:first-child{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
/* ---------- nieuwsbrief ---------- */
.brief{background:var(--geel);border-radius:calc(var(--hoek) * 2);padding:clamp(1.4rem,3.5vw,2.4rem);display:grid;gap:1rem;align-items:center}
@media(min-width:820px){.brief{grid-template-columns:1fr auto}}
.brief .label{color:#4a3a05;display:block;margin-bottom:.35rem}
.brief h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.brief p{color:#4a3a05;margin-top:.3rem}
.brief form{display:flex;gap:.5rem;flex-wrap:wrap;background:none;border:0;padding:0}
.brief input{flex:1;min-width:220px;border:0;border-radius:999px;padding:.72rem 1.1rem;font:inherit}
/* ---------- voet ---------- */
.voet{background:var(--navy-diep);color:#a9bdd3;padding-block:2.5rem 1.6rem;font-size:.9rem}
.voet-grid{display:grid;gap:1.8rem}
@media(min-width:760px){.voet-grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}}
@media(min-width:760px) and (max-width:1000px){.voet-grid{grid-template-columns:1fr 1fr 1fr}.voet-grid>div:first-child{grid-column:1/-1}}
.voet b{color:#fff;font-family:Outfit,sans-serif;font-size:1rem;display:block;margin-bottom:.6rem}
.voet a{text-decoration:none;display:block;padding:.15rem 0}
.voet a:hover{color:#fff}
.voet .merk b{margin:0;display:inline}
.voet .merk small{color:#a9bdd3}
.voet-onder{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;
justify-content:space-between;gap:.5rem 1.5rem;font-size:.8rem}
.voet-maker{opacity:.6;white-space:nowrap;font-size:.68rem;margin-left:auto;align-self:center}.voet-maker a{display:inline;padding:0} /* rechts in de onderste regel; .voet a zet links op een eigen regel, hier gewoon in de zin */.voet-maker a{color:inherit;text-decoration:none}.voet-maker a:hover{text-decoration:underline;opacity:1}
/* ---------- winkelwagen-lade ---------- */
.sluier{position:fixed;inset:0;background:rgba(8,42,79,.45);z-index:80;backdrop-filter:blur(2px)}
.sluier[hidden]{display:none}
.lade{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--wit);z-index:90;display:flex;flex-direction:column;
box-shadow:-12px 0 40px rgba(8,42,79,.2);transform:translateX(100%);transition:transform .25s}
.lade.open{transform:none}
.lade-kop{display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--maat);border-bottom:1px solid var(--lijn)}
.lade-kop h2{font-size:1.3rem}
.lade-sluit{background:none;border:1.5px solid var(--lijn-fel);border-radius:50%;width:38px;height:38px;cursor:pointer;display:grid;place-items:center}
.lade-lijst{flex:1;overflow:auto;padding:.5rem var(--maat)}
.lade-leeg{text-align:center;color:var(--inkt-2);padding:3rem 1rem}
.regel{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--lijn)}
.regel img{width:64px;height:64px;object-fit:contain;background:var(--grijs);border-radius:8px;padding:.3rem}
.regel b{display:block;font-size:.92rem;line-height:1.3}
.regel small{color:var(--inkt-2);font-size:.8rem}
.aantal{display:inline-flex;align-items:center;border:1.5px solid var(--lijn-fel);border-radius:999px;margin-top:.4rem}
.aantal button{background:none;border:0;width:28px;height:28px;cursor:pointer;font-weight:800;color:var(--navy)}
.aantal span{min-width:1.6rem;text-align:center;font-weight:700;font-size:.9rem}
.regel .prijs{font-size:.95rem}
.lade-voet{border-top:1px solid var(--lijn);padding:1rem var(--maat) 1.2rem;display:grid;gap:.6rem;background:var(--grijs)}
.lade-voet .rij{display:flex;justify-content:space-between;font-weight:700}
.lade-voet .rij small{color:var(--inkt-2);font-weight:600}
.lade-voet .totaal{font-size:1.2rem}
.lade-voet .knop{width:100%}
.melding{font-size:.82rem;color:var(--inkt-2);text-align:center}
.melding b{color:var(--rood)}
/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);background:var(--inkt);color:#fff;
padding:.75rem 1.2rem;border-radius:999px;font-weight:700;font-size:.9rem;z-index:95;opacity:0;pointer-events:none;
transition:opacity .2s,transform .2s;display:flex;gap:.6rem;align-items:center;max-width:calc(100% - 2rem)}
.toast.zichtbaar{opacity:1;transform:translate(-50%,0)}
.toast i{width:18px;height:18px;border-radius:50%;background:var(--geel);color:var(--inkt);font-style:normal;display:grid;place-items:center;font-size:.7rem;font-weight:800}
/* ---------- landingspagina ---------- */
.pagina-kop{background:var(--navy);color:#fff;padding-block:clamp(1.8rem,4vw,2.8rem)}
.pagina-kop .label{color:var(--geel);display:block;margin-bottom:.5rem}
.pagina-kop h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:.4rem}
.pagina-kop p{color:#cfdcec;max-width:56ch}
.hero-embleem{display:grid;justify-items:center;gap:.6rem;text-align:center}
.hero-embleem img{width:clamp(170px,20vw,260px);height:auto;border-radius:50%;box-shadow:0 18px 48px rgba(0,0,0,.4);
background:#fff}
.mono-klein{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#e2eaf3;
text-shadow:0 1px 10px rgba(0,0,0,.6)}
@media(max-width:959px){.hero-embleem{justify-items:start;text-align:left}}
.vindt{display:grid;gap:1rem}
@media(min-width:760px){.vindt{grid-template-columns:repeat(3,1fr)}}
.vindt-tegel{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 1.4);padding:1.5rem 1.4rem 1.4rem;
text-decoration:none;color:inherit;display:grid;gap:.5rem;align-content:start;transition:border-color .15s,box-shadow .15s}
.vindt-tegel:hover{border-color:var(--navy);box-shadow:0 10px 26px rgba(8,42,79,.1)}
.vindt-tegel .nr{font-family:Outfit,sans-serif;font-weight:800;font-size:2rem;line-height:1;color:var(--geel)}
.vindt-tegel h3{font-size:1.25rem}
.vindt-tegel p{color:var(--inkt-2);font-size:.95rem}
.vindt-knop{margin-top:.4rem;font-weight:800;color:var(--navy)}
/* welkomstblok: profielkaart + verhaal */
.intro2{display:grid;gap:2rem}
@media(min-width:900px){.intro2{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:3.5rem;align-items:start}}
.profiel{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);overflow:hidden}
@media(min-width:900px){.profiel{position:sticky;top:126px}} /* kaart schuift mee met de tekst rechts; de agenda erin groeit gewoon mee */
.profiel-kop{background:var(--navy);color:#fff;padding:2rem 1.5rem 1.4rem;text-align:center;display:grid;justify-items:center;gap:.15rem}
.profiel-kop img{width:150px;height:150px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:4px solid var(--geel);
margin-bottom:.7rem;background:#fff}
.profiel-kop b{font-family:Outfit,sans-serif;font-size:1.3rem;letter-spacing:-.01em}
.profiel-kop span{color:#cfdcec;font-size:.85rem}
.disciplines{list-style:none;margin:0;padding:1rem 1.5rem;display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--lijn)}
.disciplines li{border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.22rem .75rem;font-size:.82rem;font-weight:700;color:var(--navy)}
.record{padding:1.2rem 1.5rem 1.5rem;display:grid;gap:.1rem}
.record b{font-family:Outfit,sans-serif;font-weight:800;font-size:3.2rem;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.record span:last-child{color:var(--inkt-2);font-size:.88rem;line-height:1.45}
.verhaal .label{display:block;margin-bottom:.4rem}
.verhaal h2{margin-bottom:1rem}
.verhaal > p{color:var(--inkt-2);font-size:1.04rem;max-width:60ch}
.verhaal > p + p{margin-top:.8rem}
.citaat2{margin:1.5rem 0;padding:1.1rem 1.4rem 1.1rem 1.5rem;border-left:4px solid var(--geel);background:var(--navy-licht);
border-radius:0 12px 12px 0}
.citaat2,.citaat2 p{font-family:Outfit,sans-serif;font-weight:600;font-size:1.22rem;line-height:1.4;color:var(--navy-diep);margin:0;max-width:none}.citaat2{margin:1.5rem 0}
.citaat2 cite{display:block;margin-top:.5rem;font-style:normal;font-size:.82rem;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--inkt-2)}
.tijdlijn{list-style:none;margin:1.6rem 0 0;padding:0;border-top:1px solid var(--lijn)}
.tijdlijn-rest{margin-top:0;border-top:0}
.tijdlijn li{display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto 6rem;gap:.8rem;padding:.7rem .4rem;
border-bottom:1px solid var(--lijn);align-items:center;font-size:.95rem}
.tijdlijn .jaar{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.tijdlijn .wat{font-weight:600}
.tijdlijn .wat small{display:block;color:var(--inkt-2);font-size:.8rem;font-weight:500}
.plek{justify-self:end;min-width:2.6rem;text-align:center;border-radius:999px;padding:.2rem .55rem;font-size:.78rem;font-weight:800;
background:var(--grijs);color:var(--inkt-2);border:1px solid var(--lijn)}
.plek-1{background:var(--geel);color:var(--inkt);border-color:var(--geel)}
.plek-2{background:#e9ecef;color:#3c4550;border-color:#d5dae0}
.plek-3{background:#f3e3d3;color:#7a4a1e;border-color:#e6cdb5}
.moy{text-align:right;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.moy::after{content:" moy.";font-size:.7rem;font-weight:600;color:var(--inkt-2)}
.moy-noot{font-weight:600;color:var(--inkt-2)}
.moy-noot::after{content:none}
.tijdlijn-noot{margin-top:.6rem;color:var(--inkt-2);font-size:.82rem}
.record .klein{font-size:1rem;color:var(--navy)}
.verhaal-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
/* telefoon: foto zo dat hond en Gert-Jan boven de tekst zichtbaar blijven, en compactere blokken */
@media(max-width:600px){
.hero{min-height:min(92vh,760px)}
.hero>img{object-position:44% 62%;transform:none}
.hero::after{background:linear-gradient(to top,rgba(8,42,79,.97) 0%,rgba(8,42,79,.9) 30%,rgba(8,42,79,.5) 52%,rgba(8,42,79,.05) 78%,rgba(8,42,79,0) 100%)}
.hero-inhoud{padding-top:min(38vh,300px)}
.hero-tekst p{font-size:1rem}
/* telefoon: alleen het logo, groot en gecentreerd; de regel eronder vervalt */
.hero-embleem{grid-template-columns:1fr;justify-items:center;text-align:center;margin-top:.4rem}
.hero-embleem img{width:150px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.hero-embleem .mono-klein{display:none}
.uitgelicht-foto{min-height:0;padding:1rem}
.uitgelicht-foto img{width:min(100%,240px)}
.profiel-kop img{width:120px;height:120px}
.record b{font-size:2.6rem}
.tijdlijn li{grid-template-columns:4.4rem minmax(0,1fr) auto;gap:.5rem;font-size:.9rem;row-gap:.2rem}
.tijdlijn .moy{grid-column:2/-1;text-align:left;font-size:.85rem}
.film.groot .film-titel{font-size:1rem}
.video-item{grid-template-columns:88px 1fr;font-size:.82rem}
.video-item img{width:88px}
.cijferbalk b{font-size:2.2rem}
/* blauwe balk: op de telefoon alleen de adviesregel */
.usp-punten{justify-content:center;width:100%}
/* voettekst: naam en adres bovenaan, de linkkolommen twee naast elkaar */
.voet-grid{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
}
.intro-grid{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.intro-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}}
.films{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.films{grid-template-columns:repeat(3,1fr)}}
.film{position:relative;background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);overflow:hidden}
.film img{width:100%;aspect-ratio:16/9;object-fit:cover}
.film iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.film-knop{position:absolute;inset:0 0 auto 0;aspect-ratio:16/9;width:100%;border:0;background:linear-gradient(to top,rgba(8,42,79,.55),rgba(8,42,79,0) 60%);
cursor:pointer;display:grid;place-items:center;color:var(--inkt)}
.speel{width:56px;height:56px;border-radius:50%;background:var(--geel);display:grid;place-items:center;
box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .15s}
.speel svg{margin-left:3px}
.film-knop:hover .speel{transform:scale(1.08)}
.film-titel{padding:.8rem .9rem .9rem;font-weight:700;font-size:.9rem;line-height:1.35}
.film.speelt .film-knop{display:none}
/* één grote video in een box, de andere als lijst ernaast */
.video-box{display:grid;gap:1rem;background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);
padding:1rem;box-shadow:0 12px 34px rgba(8,42,79,.08)}
@media(min-width:900px){.video-box{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);padding:1.2rem}}
.film.groot{border:0;border-radius:var(--hoek);background:var(--navy-diep)}
.film.groot .film-titel{font-family:Outfit,sans-serif;font-size:1.15rem;padding:1rem 1.1rem 1.1rem;color:#fff}
.film.groot .speel{width:72px;height:72px}
.film.groot .speel svg{width:24px;height:28px}
.video-lijst{display:grid;gap:.35rem;align-content:start}
.video-lijst .label{padding:.2rem .5rem .4rem}
.video-item{display:grid;grid-template-columns:104px 1fr;gap:.75rem;align-items:center;text-align:left;background:none;
border:1px solid transparent;border-radius:var(--hoek);padding:.45rem;cursor:pointer;color:var(--inkt);font-weight:600;
font-size:.86rem;line-height:1.3;transition:background-color .15s,border-color .15s}
.video-item img{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.video-item:hover{background:var(--grijs);border-color:var(--lijn)}
.video-item[aria-current="true"]{background:var(--navy-licht);border-color:var(--navy)}
.video-lijst .knop{margin-top:.6rem;justify-self:start}
.kanaal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem;margin-top:1.4rem;
background:var(--wit);border:1px solid var(--lijn);border-radius:var(--hoek);padding:1rem 1.2rem}
.kanaal b{font-family:Outfit,sans-serif}
.kanaal span{color:var(--inkt-2);font-size:.92rem}
.kaart-grid{display:grid;gap:1rem}
@media(min-width:900px){.kaart-grid{grid-template-columns:.8fr 1.2fr}}
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);overflow:hidden;min-height:380px;position:relative}
.kaart iframe{width:100%;height:100%;min-height:380px;border:0;display:block}
.kaart-stil{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;
background:radial-gradient(circle at 50% 40%,#e6eef8 0 30%,#d3dfee 100%);color:var(--inkt-2)}
.kaart-stil b{display:block;font-family:Outfit,sans-serif;font-size:1.2rem;color:var(--navy);margin-bottom:.4rem}
.kaart-stil .speld{width:54px;height:54px;border-radius:50% 50% 50% 0;background:var(--rood);transform:rotate(-45deg);
margin:0 auto 1.2rem;display:grid;place-items:center}
.kaart-stil .speld i{width:20px;height:20px;border-radius:50%;background:#fff;display:block}
.adres{display:grid;gap:.9rem;align-content:start}
.adres .paneel{padding:1.4rem}
.adres h3{font-family:Outfit,sans-serif;font-size:1.2rem;margin-bottom:.4rem}
.adres p{color:var(--inkt-2)}
.adres .groot{font-family:Outfit,sans-serif;font-weight:700;font-size:1.15rem;color:var(--inkt)}
.adres a.knop{margin-top:.6rem}
/* ---------- AI-hulpje ---------- */
.hulp-knop{position:fixed;right:1rem;bottom:1rem;z-index:70;display:inline-flex;align-items:center;gap:.5rem;
background:var(--navy);color:#fff;border:0;border-radius:999px;padding:.8rem 1.15rem .8rem .95rem;font-weight:800;font-size:.92rem;
cursor:pointer;box-shadow:0 12px 30px rgba(8,42,79,.3);transition:transform .15s,background-color .15s}
.hulp-knop:hover{background:var(--navy-diep);transform:translateY(-1px)}
.hulp-knop[hidden]{display:none}
/* op eigen hosting iets hoger, boven een eventuele hostingbadge */
body.gehost .hulp-knop{bottom:4.4rem}
body.gehost .hulp{bottom:4.4rem;max-height:min(640px,calc(100vh - 5.4rem))}
@media(max-width:600px){.hulp-knop span{display:none}.hulp-knop{padding:.85rem;bottom:.9rem;right:.9rem}}
.hulp{position:fixed;right:1rem;bottom:1rem;z-index:75;width:min(400px,calc(100vw - 2rem));max-height:min(640px,calc(100vh - 2rem));
background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 1.6);box-shadow:0 24px 60px rgba(8,42,79,.28);
display:flex;flex-direction:column;overflow:hidden}
.hulp[hidden]{display:none}
.hulp-kop{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.8rem .9rem;background:var(--navy);color:#fff}
.hulp-kop img{width:34px;height:34px;border-radius:50%;background:#fff}
.hulp-kop b{font-family:Outfit,sans-serif;font-size:1rem;display:block;line-height:1.15}
.hulp-kop small{color:#cfdcec;font-size:.76rem}
.hulp-sluit{background:rgba(255,255,255,.14);border:0;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.hulp-sluit:hover{background:rgba(255,255,255,.26)}
.hulp-lijst{flex:1;overflow:auto;padding:.9rem;display:flex;flex-direction:column;gap:.55rem;background:var(--grijs)}
.bel{max-width:88%;padding:.6rem .85rem;border-radius:14px;font-size:.93rem;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.bel-ai{background:var(--wit);border:1px solid var(--lijn);border-bottom-left-radius:4px;align-self:flex-start}
.bel-ik{background:var(--navy);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.bel-wacht{color:var(--inkt-2);font-style:italic}
.bel-fout{border-color:#e6b5ad;background:#fff4f2;color:#7a2d22}
.hulp-starters{display:flex;flex-direction:column;gap:.35rem;margin-top:.2rem}
.hulp-starters button{text-align:left;background:var(--wit);border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.45rem .8rem;
font-weight:700;font-size:.82rem;color:var(--navy);cursor:pointer}
.hulp-starters button:hover{border-color:var(--navy);background:var(--navy-licht)}
.hulp-vorm{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--lijn);background:var(--wit)}
.hulp-vorm input{flex:1;border:1.5px solid var(--lijn-fel);border-radius:999px;padding:.6rem .95rem;font:inherit;font-size:.93rem;min-width:0}
.hulp-vorm input:focus{border-color:var(--navy);outline:none}
.hulp-zend{width:42px;height:42px;border-radius:50%;border:0;background:var(--geel);color:var(--inkt);cursor:pointer;display:grid;place-items:center;flex:none}
.hulp-zend:hover{background:var(--geel-diep)}
.hulp-zend[disabled]{background:var(--lijn-fel);cursor:not-allowed}
.hulp-stop{border:1.5px solid var(--lijn-fel);background:var(--wit);border-radius:999px;padding:0 .8rem;font-weight:700;font-size:.82rem;cursor:pointer}
.hulp-stop[hidden]{display:none}
.hulp-noot{margin:0;padding:.45rem .9rem .6rem;font-size:.72rem;color:var(--inkt-2);background:var(--wit)}
@media(max-width:600px){.hulp{right:.5rem;bottom:.5rem;width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}
.hulp-lijst{min-height:180px}}
/* ---- aanvullingen motor (zonder kleuren) ---- */
.demo-balk{background:#111;color:#fff;font-size:.85rem;text-align:center;padding:.4rem 0}
.nieuws-foto{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--hoek);margin-bottom:.8rem}
.adres-merk{display:flex;align-items:center;gap:.6rem}
html,body{overflow-x:clip}
/* ---- afrekenen en beheer-koppelingen (aanvulling op het demo-ontwerp, zelfde tokens) ---- */
.afreken{align-items:start}
.velden{display:grid;gap:.7rem;margin-top:.8rem}
.velden label{display:block;font-weight:700;font-size:.9rem}
.velden label input,.velden label select,.velden label textarea{display:block;margin-top:.25rem}
.velden label small{font-weight:400;color:var(--inkt-2)}
.velden input,.velden select,.velden textarea{font:inherit;padding:.65rem .8rem;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);background:#fff;width:100%}
.velden input:focus,.velden select:focus,.velden textarea:focus{outline:2px solid var(--geel,#F2C230);outline-offset:1px}
.rij2{display:grid;grid-template-columns:1fr 2fr;gap:.7rem}
.overzicht .regel{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--lijn,#d9e2dc)}
.overzicht .regel img{width:56px;height:56px;object-fit:cover;border-radius:var(--hoek,2px)}
.overzicht .regel b{display:block}.overzicht .regel small{color:var(--inkt-2)}
.afreken-totaal{margin-top:.8rem}.afreken-totaal .rij{display:flex;justify-content:space-between;padding:.25rem 0}
.afreken-totaal .totaal{font-weight:800;font-size:1.1rem;border-top:2px solid var(--navy,#155E3B);margin-top:.4rem;padding-top:.5rem}
.stalen .keuze{font:inherit;font-size:.82rem;padding:.3rem .4rem;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);background:#fff;max-width:100%}
@media (max-width:600px){.rij2{grid-template-columns:1fr}}
/* productpagina en klikbare kaarten */
.product h3 a{color:inherit;text-decoration:none}.product h3 a:hover{text-decoration:underline}
a.product-foto{display:block}
.detail{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:start}
.detail-foto{background:#fff;border:1px solid var(--lijn,#d9e2dc);padding:1.5rem}.detail-foto img{width:100%;height:auto;display:block}
.detail-tekst h1{margin:.2rem 0 .8rem;font-size:clamp(1.8rem,3vw,2.6rem)}.detail-tekst .stalen{margin:.6rem 0}.detail-tekst .omschr{font-size:1.05rem;line-height:1.6}
.detail-keuzes{margin:1.2rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem 1rem}.detail-keuze{margin:0}.detail-keuzes .label{grid-column:1/-1}.detail-keuze label{display:block;font-weight:700;margin-bottom:.4rem}
.detail-keuze select{font:inherit;padding:.6rem .8rem;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);background:#fff;width:100%}
.detail-koop{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-top:1.2rem}
.detail-koop .prijs{font-family:Sora,sans-serif;font-weight:800;font-size:1.8rem}.detail-koop .prijs small{display:block;font-size:.8rem;font-weight:400;color:var(--inkt-2)}
.detail-punten{margin:1.2rem 0 0;padding:0;list-style:none;color:var(--inkt-2);font-size:.92rem}.detail-punten li{padding:.2rem 0}
@media (max-width:820px){.detail{grid-template-columns:1fr}}
a.koop{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
/* pagina's, nieuws, reviews, retour */
.tekst{max-width:760px}.tekst h2{margin:1.6rem 0 .5rem}.tekst p,.tekst li{font-size:1.05rem;line-height:1.65}.tekst ul{padding-left:1.2rem}
/* witruimte tussen alinea's uit de tekstverwerker (de site zet p standaard op margin 0); lege alinea's tellen niet mee */
.tekst p{margin:0 0 .9rem}.tekst p:last-child{margin-bottom:0}.tekst p:empty,.tekst p:has(> br:only-child){display:none}.tekst ul,.tekst ol{margin:0 0 .9rem}
.sterren{color:#e0a800;letter-spacing:1px}
.prijs s{color:var(--inkt-2);font-weight:400;margin-right:.3rem}
.retour-regel{display:flex;gap:.6rem;align-items:center;padding:.4rem 0}.retour-regel input[type=checkbox]{width:auto}
/* galerij en lichtbak */
.detail-foto a{display:block;cursor:zoom-in}
.galerij{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.galerij a{width:72px;height:72px;border:1.5px solid var(--lijn,#d9e2dc);background:#fff;padding:4px;display:block}.galerij a.uit{border-color:var(--navy,#155E3B)}
.galerij img{width:100%;height:100%;object-fit:contain;display:block}
.lichtbak[hidden]{display:none}
.lichtbak{position:fixed;inset:0;background:rgba(10,20,15,.92);z-index:1000;display:flex;align-items:center;justify-content:center;padding:3rem}
.lichtbak img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;padding:1rem}
.lichtbak button{position:absolute;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;padding:.5rem 1rem;line-height:1}
.lb-sluit{top:.6rem;right:.8rem}.lb-vorige{left:.4rem;top:50%;transform:translateY(-50%)}.lb-volgende{right:.4rem;top:50%;transform:translateY(-50%)}
.tekst h3{margin:1.2rem 0 .4rem}.tekst blockquote{border-left:3px solid var(--geel,#F2C230);margin:1rem 0;padding:.2rem 1rem;color:var(--inkt-2)}
@media (max-width:600px){.lichtbak{padding:2.5rem .5rem}}
/* keuzes die bij elkaar horen (Topeinde 1 en 2) */
.detail-paar{grid-column:1/-1}
.paar-kop{display:block;font-weight:700;margin-bottom:.4rem}
.paar-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem}
.paar-grid .detail-keuze label{white-space:nowrap}
.detail-keuze select{white-space:nowrap;text-overflow:ellipsis}
@media (max-width:480px){.paar-grid{grid-template-columns:1fr}}
/* foto en prijskaartje in de kop klikbaar */
.hero2-link{display:block;cursor:pointer}.hero2-link img{transition:transform .25s}.hero2-link:hover img{transform:scale(1.03)}
a.hero2-chip{text-decoration:none;color:var(--inkt);cursor:pointer}a.hero2-chip:hover{box-shadow:0 8px 22px rgba(0,0,0,.18)}
/* reviews onder de foto + popup */
.reviews-knop{display:flex;align-items:center;gap:.5rem;width:100%;margin-top:.8rem;padding:.7rem .9rem;background:#fff;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,2px);font:inherit;cursor:pointer;text-align:left}
.reviews-knop:hover{border-color:var(--navy,#155E3B)}.reviews-knop span{color:var(--inkt-2);font-size:.92rem}.reviews-knop b{font-family:Sora,sans-serif}
.popup[hidden]{display:none}
.popup{position:fixed;inset:0;background:rgba(10,20,15,.6);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:3rem 1rem;overflow-y:auto}
.popup-vel{background:var(--achtergrond,#f4f7f5);max-width:960px;width:100%;padding:1.6rem;position:relative;border-radius:var(--hoek,2px)}
.popup-sluit{position:absolute;top:.5rem;right:.7rem;background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--inkt,#17251d)}
.popup-twee{display:grid;grid-template-columns:1.1fr 1fr;gap:1.4rem;align-items:start}
.review{background:#fff;border:1px solid var(--lijn,#d9e2dc);padding:.8rem 1rem;margin-bottom:.7rem}.review small{color:var(--inkt-2)}.review p{margin:.4rem 0 0}
@media (max-width:760px){.popup{padding:1rem .5rem}.popup-twee{grid-template-columns:1fr}}
.popup-vel h2{font-size:1.5rem;margin:0 2rem 1rem 0}
/* samengestelde keuzes netjes onder elkaar in wagen, afrekenen en bedankpagina */
.regel small{display:block;white-space:pre-line;line-height:1.35;margin-top:.15rem}
.regel .aantal{display:inline-flex}
.regel > div{min-width:0}
/* melding na een actie (uitgelogd, opgeslagen, fout): smalle strook onder de kop, zelf te sluiten; goed nieuws verdwijnt vanzelf */
.melding-balk{background:#1f7a4d;color:#fff;font-weight:600;font-size:.95rem;transition:opacity .4s,max-height .4s;max-height:8rem;overflow:hidden}
.melding-balk.melding-fout{background:var(--rood)}
.melding-balk .vak{display:flex;align-items:center;gap:.7rem;padding-block:.6rem}
.melding-balk .ico{flex:0 0 auto;width:1.35rem;height:1.35rem;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:.8rem;font-weight:800}
.melding-balk .sluit{margin-left:auto;flex:0 0 auto;background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;opacity:.8;padding:.1rem .3rem}.melding-balk .sluit:hover{opacity:1}
.melding-balk.weg{opacity:0;max-height:0}
/* bestellingen op Mijn account klikbaar */
a.bestel-link{text-decoration:none;color:inherit;cursor:pointer}a.bestel-link:hover b{text-decoration:underline}a.bestel-link .pijl{color:var(--navy);font-size:1.3rem;margin-left:.3rem}
/* foto's bij nieuws en pagina's */
.nieuws-foto{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:.8rem;background:#f3f5f4}
.pagina-hoofdfoto{display:block;max-width:760px;margin-bottom:1.6rem}
.pagina-hoofdfoto img{width:100%;max-height:480px;object-fit:cover;display:block}
.pagina-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.6rem;max-width:760px;margin-top:2rem}
.pagina-fotos a{display:block;aspect-ratio:1;background:#f3f5f4;border:1px solid var(--lijn)}
.pagina-fotos img{width:100%;height:100%;object-fit:cover;display:block}
/* ================= kop van de startpagina als carambolebiljart ================= */
.biljart{--rand:clamp(16px,2.6vw,34px);--band:clamp(7px,.9vw,12px)}
/* houten rand met nerf */
.biljart .tafel{position:relative;padding:var(--rand);border-radius:clamp(8px,1.2vw,16px);
box-shadow:0 30px 60px -20px rgba(20,12,4,.55),0 8px 18px rgba(20,12,4,.25),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 0 rgba(255,255,255,.12)}
/* parelmoer diamanten: 7 op de lange zijden, 3 op de korte zijden */
/* het hout als lijst met een open midden, zodat er een foto doorheen kan vallen */
.biljart .hout{position:absolute;inset:0;z-index:0;border-radius:inherit;padding:var(--rand);
background:
linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.25)),
repeating-linear-gradient(90deg,rgba(0,0,0,.07) 0 2px,transparent 2px 9px,rgba(255,255,255,.04) 9px 11px,transparent 11px 23px),
repeating-linear-gradient(90deg,transparent 0 60px,rgba(0,0,0,.08) 60px 64px,transparent 64px 140px),
linear-gradient(90deg,#4a2a14,#6e4020 30%,#5b3419 55%,#74462a 80%,#4f2d16);
-webkit-mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) content-box;-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) border-box,linear-gradient(#000 0 0) content-box;mask-composite:exclude}
.biljart .tafel::before,.biljart .tafel::after{content:"";position:absolute;pointer-events:none;z-index:2}
.biljart .tafel::before{top:0;bottom:0;left:calc(var(--rand) + (100% - 2 * var(--rand)) / 16);right:calc(var(--rand) + (100% - 2 * var(--rand)) / 16);
background:
radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) top/calc(100% / 7) var(--rand) repeat-x,
radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) bottom/calc(100% / 7) var(--rand) repeat-x}
.biljart .tafel::after{left:0;right:0;top:calc(var(--rand) + (100% - 2 * var(--rand)) / 8);bottom:calc(var(--rand) + (100% - 2 * var(--rand)) / 8);
background:
radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) left/var(--rand) calc(100% / 3) repeat-y,
radial-gradient(circle,#fbf5e4 0 2.2px,#d9ccaa 2.8px,transparent 3.4px) right/var(--rand) calc(100% / 3) repeat-y}
/* laken met band en licht van de biljartlamp */
.biljart .hero2-grid{position:relative;isolation:isolate;border-radius:2px;
background:
radial-gradient(ellipse 70% 80% at 50% 42%,rgba(255,255,240,.14),rgba(255,255,240,0) 70%),
repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,rgba(0,0,0,.018) 2px 4px),
radial-gradient(ellipse at 50% 45%,var(--laken-licht,#23804d),var(--laken,#1a6a3f) 55%,var(--laken-diep,#11502f));
box-shadow:inset 0 0 0 var(--band) var(--laken-band,#0f4a2b),inset 0 0 0 calc(var(--band) + 1px) rgba(0,0,0,.35),inset 0 calc(var(--band) + 6px) 18px -8px rgba(0,0,0,.45),inset 0 0 60px rgba(0,0,0,.28)}
.biljart .hero2-tekst{position:relative;z-index:2;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.biljart .hero2-tekst p{color:#e2f0e7}
/* productfoto als kaartje op het laken, recht */
.biljart .hero2-foto{position:relative;z-index:2;background:#fff;margin:clamp(1.2rem,3vw,2.4rem);
box-shadow:0 18px 30px -12px rgba(0,0,0,.55),0 3px 8px rgba(0,0,0,.25)}
/* driebandenstoot in krijt */
.biljart .stoot{position:absolute;inset:var(--band);width:calc(100% - 2 * var(--band));height:calc(100% - 2 * var(--band));z-index:1;pointer-events:none;overflow:visible}
.biljart .stoot polyline{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* ballen */
.biljart .bal{position:absolute;z-index:3;width:clamp(20px,2.3vw,30px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
box-shadow:4px 7px 9px rgba(0,0,0,.45),inset -3px -4px 7px rgba(0,0,0,.28)}
.biljart .bal-wit{left:calc(var(--band) + (100% - 2 * var(--band)) * .15);top:calc(var(--band) + (100% - 2 * var(--band)) * .90);background:radial-gradient(circle at 34% 30%,#fff 0 22%,#f1eee4 48%,#cfc9b8 100%)}
.biljart .bal-rood{left:calc(var(--band) + (100% - 2 * var(--band)) * .50);top:calc(var(--band) + (100% - 2 * var(--band)) * .86);background:radial-gradient(circle at 34% 30%,#ffb3a6 0 12%,#e0301f 45%,#8e140b 100%)}
.biljart .bal-geel{left:calc(var(--band) + (100% - 2 * var(--band)) * .39);top:calc(var(--band) + (100% - 2 * var(--band)) * .93);background:radial-gradient(circle at 34% 30%,#fff6c9 0 12%,#f2c230 45%,#a67a06 100%)}
@media(max-width:959px){.biljart .stoot{opacity:.7}.biljart .bal-wit{left:18%;top:52%}.biljart .bal-rood{left:82%;top:50%}.biljart .bal-geel{left:74%;top:46%}}
@media(prefers-reduced-motion:no-preference){.biljart .bal-wit{animation:bal-rol 1.1s cubic-bezier(.2,.7,.2,1) both .3s}}
@keyframes bal-rol{from{translate:-40px 30px;opacity:0}to{translate:0 0;opacity:1}}
/* demomodus: melding bovenaan */
.demo-balk{background:#17251d;color:#f3f6f4;font-size:.8rem;text-align:center;padding-block:.4rem}
.demo-balk b{color:var(--geel)}
/* Logo in de footer naast de naam, net als in de header: ".voet a" zette elke link op
display:block en won het van .merk, waardoor het logo boven de naam kwam te staan. */
.voet a.merk{display:flex;align-items:center;padding:0}
.voet .merk b{display:block;line-height:1}
/* Subcategorieen: een tweede, kleinere rij onder de hoofdfilters, alleen zichtbaar bij de gekozen hoofdcategorie. */
.subfilters{margin-top:-.6rem}
.subfilters[hidden]{display:none}
.subfilters .filter{font-size:.68rem;padding:.35rem .8rem}
.subfilters .filter small{opacity:.6;margin-left:.2rem}
/* Merklogo's in het merkenblok: witte tegels, want de meeste logo's zijn voor een lichte achtergrond gemaakt. */
.merklogos{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.merklogos li{background:#fff;color:var(--inkt);display:grid;place-items:center;gap:.3rem;padding:.8rem .6rem .55rem;min-height:92px;text-align:center}
.merklogos img{max-width:100%;height:44px;object-fit:contain}
.merklogos b{font-family:Sora,sans-serif;font-size:1.05rem;line-height:44px}
.merklogos small{color:var(--inkt-2);font-size:.72rem;font-weight:600}
/* Op een telefoon stond de kop met het biljart en het product samen bijna 1000 pixels hoog: je
moest scrollen voor je de eerste knop zag, en de tafel oogde uitgerekt. Onder de 900 pixels
krijgen de tekst, de fotolijst en de randen daarom minder ruimte. */
@media(max-width:899px){
.hero2{padding-block:1rem 1.4rem}
.hero2-grid{gap:.7rem}
.hero2-tekst{padding:1.2rem 1.2rem .2rem}
.hero2-tekst .label{margin-bottom:.5rem}
.hero2-tekst h1{font-size:clamp(1.7rem,7.5vw,2.3rem);margin-bottom:.6rem}
.hero2-tekst p{font-size:.95rem;margin-bottom:1rem}
.hero2-foto,.biljart .hero2-foto{min-height:0;aspect-ratio:16/11;margin:.9rem}
.hero2-foto img{width:min(86%,320px);transform:rotate(-6deg) scale(1.06)}
.biljart{--rand:12px;--band:6px}
.hero-knoppen .knop{padding:.6rem 1rem}
}
/* De ballen lagen na het inkorten over de knop "Naar de webshop": op een telefoon horen ze in de
smalle strook laken naast de tekst. */
@media(max-width:899px){
.biljart .bal{width:18px}
.biljart .bal-wit{left:7%;top:58%}
.biljart .bal-geel{left:93%;top:40%}
.biljart .bal-rood{left:90%;top:52%}
}
/* logo in de voet: rond, iets groter en met een dun randje zodat het op de donkere voet uitkomt */
.voet .merk{display:flex;align-items:center;gap:.8rem} /* .voet a maakt links block; hier weer naast elkaar */
.voet .merk img{width:54px;height:54px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.voet .merk span{display:block}
.kop .merk img{border-radius:50%}
/* winkelfoto's van een demo-profiel: eerste foto groot, de rest ernaast */
.winkel-fotos{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr)}
.winkel-fotos a{display:block;background:var(--grijs);overflow:hidden;border-radius:calc(var(--hoek) * 1.2);aspect-ratio:3/2}
.winkel-fotos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.winkel-fotos a:hover img{transform:scale(1.03)}
@media(min-width:900px){
/* vier kleine foto's rechts, samen even hoog als de grote links */
.winkel-fotos{grid-template-columns:repeat(4,1fr)}
/* de foto zelf absoluut, zodat hij de rijhoogte niet opduwt: links en rechts precies even hoog */
.winkel-fotos a:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto;height:100%;position:relative}
.winkel-fotos a:first-child img{position:absolute;inset:0}
}
/* winkelfoto van het bedrijf over de volle breedte achter de kop */
.hero2.met-kopfoto{position:relative;isolation:isolate}
.hero2.met-kopfoto::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
background-image:linear-gradient(180deg,rgba(10,14,12,.38),rgba(10,14,12,.14) 45%,rgba(10,14,12,.5)),var(--kopfoto);
background-size:cover;background-position:center 32%;background-repeat:no-repeat}
.hero2.met-kopfoto{padding-block:clamp(2rem,5vw,3.6rem)}
/* met een winkelfoto achter de kop: geen laken, de houten rand omlijst de winkelfoto */
.biljart.met-kopfoto.door .hero2-grid{
/* doorzichtig: de winkelfoto achter de kop valt door de open lijst heen */
background:none;
box-shadow:inset 0 0 0 var(--band) var(--laken-band-a,rgba(15,74,43,.55)),
inset 0 0 0 calc(var(--band) + 1px) rgba(0,0,0,.35),
inset 0 0 70px rgba(0,0,0,.35)}
/* effen kop (zonder biljart) met winkelfoto: het gekleurde vlak half doorzichtig */
.hero2.met-kopfoto.door .hero2-grid{background:
linear-gradient(100deg,rgba(6,10,9,.72),rgba(6,10,9,.32) 42%,rgba(6,10,9,0) 70%),
linear-gradient(100deg,var(--kop-a,rgba(18,80,50,.85)) 20%,var(--kop-a2,rgba(18,80,50,.45)))}
.hero2.met-kopfoto.door .hero2-foto{margin:clamp(1rem,2.5vw,2rem);box-shadow:0 18px 30px -12px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.25)}
.biljart.met-kopfoto.door .hero2-grid{background:none}
/* tekst iets steviger op de foto */
.hero2.met-kopfoto.door .hero2-tekst{text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* telefoons gaan wisselend om met vastgezette achtergronden: daar gewoon meescrollen */
/* winkelfoto achter de gekleurde kop van webshop-, pagina- en nieuwspagina's */
.pagina-kop{background-image:var(--kopfoto2,none);background-size:cover;background-position:center 62%;background-repeat:no-repeat}
.pagina-kop p{color:#dfe8e3}
/* logo bij het adres in "Kom langs in de winkel" */
.adres-merk{display:flex;align-items:center;gap:.7rem}
.adres-merk img{width:46px;height:46px;flex:none;object-fit:contain;border-radius:50%;background:#fff}
/* dealer ingelogd: dealerprijs in het rood, met een rood label */
.prijs.dealerprijs{color:#c8242b}
.prijs.dealerprijs small{color:var(--inkt-2)}
.dealer-label{display:inline-block;background:#c8242b;color:#fff;font-weight:800;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:.1rem .4rem;border-radius:3px;margin-right:.3rem;vertical-align:middle}
/* dealerkaart op de startpagina */
.kaart#dealerkaart{z-index:0;background:#dfe7f2}
.kaart .leaflet-popup-content{font-family:Manrope,sans-serif;font-size:.9rem;line-height:1.4;margin:.6rem .8rem}
.winkel-speld span{display:block;width:26px;height:26px;border-radius:50%;background:var(--geel);border:4px solid var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.paginering{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:1rem;font-weight:600;font-size:.9rem}.paginering a,.paginering span{display:inline-block;min-width:2.1rem;padding:.35rem .6rem;text-align:center;border:1.5px solid var(--lijn,#d9e2dc);border-radius:var(--hoek,4px);text-decoration:none;color:inherit;background:#fff}.paginering a:hover{border-color:var(--navy)}.paginering .nu{background:var(--navy);border-color:var(--navy);color:#fff}.paginering .uit{color:#aaa}.paginering .punt{border:0;background:none;min-width:auto}
/* verkooppunten: compact blok met logokaarten naast de pomeransservice */
.paneel-logos{display:block}
.paneel-logos>p{color:var(--inkt-2);margin:0 0 1rem}
.paneel-logos .klein{font-size:.85rem;margin:1rem 0 0}
.paneel-logos .klein a{color:var(--navy);font-weight:700}
.muur-rooster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;align-content:start}
@media(max-width:420px){.muur-rooster{grid-template-columns:repeat(2,1fr)}}
.muur-rooster li{display:flex}
.muur-kaart{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;min-height:104px;padding:.8rem .6rem;background:var(--achter,#f4f6fa);border:1px solid var(--lijn);border-radius:var(--hoek);text-decoration:none;color:var(--inkt);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,background .15s}
a.muur-kaart:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(11,42,82,.14);background:#fff}
.muur-kaart img{max-width:84%;max-height:44px;width:auto;height:auto;object-fit:contain;display:block}
.muur-kaart .naam{font-weight:700;font-size:.74rem;text-align:center;line-height:1.2;color:var(--inkt-2)}
.muur-kaart::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--geel);opacity:0;transition:opacity .15s}
a.muur-kaart:hover::after{opacity:1}
/* mobiel: merknaam op één regel, leesbare gele regel in de kop, embleem verbergen */
@media(max-width:600px){
.kop .merk b,.merk b{font-size:1rem;white-space:nowrap}
.merk small{font-size:.58rem;letter-spacing:.06em;white-space:nowrap}
.hero-tekst .label{display:inline-block;background:rgba(6,30,58,.78);color:var(--geel);padding:.45rem .8rem;border-radius:6px;font-size:.95rem;letter-spacing:.12em;line-height:1.4;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.hero-embleem{display:none}
}
@media(max-width:380px){.merk small{display:none}}
/* mobiel webshop: label op één regel en categorieën als schuifbare rij */
@media(max-width:600px){
.tag{font-size:.58rem;padding:.2rem .5rem;letter-spacing:.06em;white-space:nowrap;top:.6rem;left:.6rem}
.filters{flex-wrap:nowrap;overflow-x:auto;gap:.4rem;margin-inline:calc(var(--maat) * -1);padding:.15rem var(--maat) .5rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.filters::-webkit-scrollbar{display:none}
.filter{flex:0 0 auto;font-size:.82rem;padding:.4rem .85rem;scroll-snap-align:start}
.subfilters .filter{font-size:.72rem}
}
/* cookiebalk */
.cookiebalk{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:60;width:min(calc(100vw - 2rem),720px);background:var(--navy);color:#fff;border-radius:var(--hoek);padding:1rem 1.2rem;box-shadow:0 18px 48px rgba(0,0,0,.35);display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem}
.cookiebalk[hidden]{display:none}
.cookiebalk p{margin:0;flex:1 1 320px;font-size:.9rem;line-height:1.5;color:#dbe6f3}
.cookiebalk p a{color:#fff;font-weight:700}
.cookie-knoppen{display:flex;gap:.5rem;flex-wrap:wrap}
.cookiebalk .knop{margin:0;padding:.6rem 1rem;font-size:.9rem}
.knop-geel{background:var(--geel);color:#1b1b1b}
.knop-lijn-licht{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.voet-links a{display:inline;color:inherit}
@media(max-width:600px){.cookiebalk{bottom:.6rem;width:calc(100vw - 1.2rem);padding:.9rem 1rem}.cookiebalk p{font-size:.85rem}}
/* nieuwsbrief: bevestiging op de plek van het formulier */
.brief-ok{margin:0;padding:.9rem 1.1rem;border-radius:var(--hoek);background:#e6f4ea;border:1px solid #b7dfc2;color:#1e5631;font-size:.95rem;line-height:1.5}
/* ---------- aanbiedingen (modules acties, deal, bundels) ---------- */
.product.actie{border-color:var(--rood);box-shadow:0 10px 26px rgba(217,56,43,.12)}
.tag-actie{background:var(--rood);color:#fff;display:inline-flex;align-items:center;gap:.4rem}
.tag-actie b{background:#fff;color:var(--rood);border-radius:999px;padding:0 .4rem;font-size:.68rem}
.prijs-actie{display:flex;flex-direction:column}
.prijs-actie .oud{font-size:.8rem;font-weight:600;color:var(--inkt-2);text-decoration:line-through}
.prijs-actie .nieuw{color:var(--rood);font-size:1.2rem}
.detail-koop .prijs-actie .nieuw{font-size:1.8rem}.detail-koop .prijs-actie .oud{font-size:1rem}
.bespaar{display:inline-block;margin-top:.35rem;font-size:.7rem;font-weight:800;color:var(--rood);background:#fdecea;border-radius:6px;padding:.15rem .45rem;align-self:flex-start}
.prijs-actie .tot{font-size:.7rem;color:var(--inkt-2);font-weight:600;margin-top:.3rem}
/* combideals */
.bundels{display:grid;gap:1rem}
@media(min-width:900px){.bundels{grid-template-columns:repeat(2,1fr)}.bundels-een{grid-template-columns:1fr}}
/* één combideal: over de volle breedte, met grotere foto's en prijs */
@media(min-width:900px){.bundels-een .bundel-kaart{grid-template-columns:1.3fr 1fr;padding:1.8rem 2rem;gap:2rem}.bundels-een .bundel-fotos figure{min-height:170px}.bundels-een .bundel-fotos img{max-height:150px}
.bundels-een .bundel-tekst h3{font-size:1.5rem}.bundels-een .bundel-tekst p{font-size:1rem}.bundels-een .bundel-prijs .nu{font-size:2rem}}
.bundel-kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);padding:1.3rem;display:grid;gap:1rem;position:relative;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.bundel-kaart:hover{border-color:var(--lijn-fel);box-shadow:0 10px 26px rgba(8,42,79,.08)}
@media(min-width:600px){.bundel-kaart{grid-template-columns:1.1fr 1fr;align-items:center}}
.bundel-fotos{display:flex;align-items:center;gap:.5rem}
.bundel-fotos figure{margin:0;background:#f6f7f9;border-radius:var(--hoek);padding:.6rem;display:grid;place-items:center;flex:1;min-height:110px;position:relative}
.bundel-fotos img{max-width:100%;max-height:100px;object-fit:contain}
.bundel-fotos figure b{position:absolute;top:.3rem;right:.4rem;font-size:.7rem;color:var(--navy)}
.bundel-fotos .plus{font:800 1.3rem Outfit,sans-serif;color:var(--navy)}
.bundel-tekst h3{margin:0 0 .3rem;font-size:1.15rem;padding-right:2.4rem} /* ruimte voor het hoeklint */
.bundel-tekst p{margin:0 0 .5rem;color:var(--inkt-2);font-size:.9rem}
.bundel-prijs{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.bundel-prijs .los{font-size:.85rem;color:var(--inkt-2)}.bundel-prijs .los s{font-weight:600}
.bundel-prijs .nu{font:800 1.6rem Outfit,sans-serif;color:var(--navy)}
.bundel-knop{display:block;margin-top:.6rem;font-weight:800;color:var(--navy);font-size:.9rem}
.lint{position:absolute;top:18px;right:-38px;transform:rotate(45deg);background:var(--geel);color:var(--inkt);font:800 .72rem Manrope,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:.35rem 3rem;box-shadow:0 4px 10px rgba(0,0,0,.12);pointer-events:none}
.cadeau{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:800;color:#1f7a4d;background:#e6f4ea;border-radius:6px;padding:.2rem .5rem;margin-top:.5rem}
/* combideal-pagina */
.bundel-pagina{display:grid;gap:1.2rem;align-items:start}
@media(min-width:900px){.bundel-pagina{grid-template-columns:1.4fr .8fr}}
.bundel-items{display:grid;gap:.6rem}
.bundel-item{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;align-items:start;padding:1.1rem 1.3rem}
.bundel-item-foto{background:#f6f7f9;border-radius:var(--hoek);display:grid;place-items:center;padding:.6rem;min-height:110px}
.bundel-item-foto img{max-width:100%;max-height:110px;object-fit:contain}
.bundel-item h3{margin:.1rem 0 .3rem;font-size:1.1rem}.bundel-item h3 a{color:inherit;text-decoration:none}
.bundel-item .omschr{margin:0 0 .5rem;font-size:.9rem;color:var(--inkt-2)}
.bundel-keuzes{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;margin:.3rem 0 .5rem}
.bundel-keuzes label{display:grid;gap:.25rem;font-size:.8rem;font-weight:700}
.bundel-keuzes select{font:inherit;padding:.5rem .6rem;border:1.5px solid var(--lijn);border-radius:var(--hoek);background:#fff}
.bundel-plus{text-align:center;font:800 1.4rem Outfit,sans-serif;color:var(--navy);line-height:1}
.bundel-koop{position:relative;overflow:hidden;position:sticky;top:140px}
.bundel-koop .knop{width:100%;margin-top:1rem}
.bundel-koop .detail-punten{font-size:.85rem}
.regel-bundel{background:#fbfcfe}
@media(max-width:600px){.bundel-item{grid-template-columns:80px 1fr;gap:.8rem}}
/* ---------- agenda (module agenda): waar speelt Gert-Jan ---------- */
.agenda-strook{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 0 .8rem;margin-inline:calc(-1 * var(--maat));padding-inline:var(--maat);scroll-padding-inline:var(--maat);scrollbar-width:thin}
@media(min-width:900px){.agenda-strook{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}}
.agenda-kaart{flex:0 0 78%;scroll-snap-align:start;background:var(--wit);border:1px solid var(--lijn);border-radius:calc(var(--hoek) * 2);padding:1.1rem;display:flex;gap:.9rem;align-items:flex-start;transition:box-shadow .15s,border-color .15s}
.agenda-kaart:hover{border-color:var(--lijn-fel);box-shadow:0 10px 26px rgba(8,42,79,.08)}
.agenda-kaart.eerst{border-color:var(--navy);box-shadow:0 10px 26px rgba(8,42,79,.12)}
@media(min-width:900px){.agenda-kaart{flex:initial}}
.agenda-datum{flex:0 0 3.4rem;text-align:center;background:var(--navy);color:#fff;border-radius:var(--hoek);padding:.45rem .2rem;line-height:1.05}
.agenda-datum b{display:block;font:800 1.5rem Outfit,sans-serif}.agenda-datum span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--geel)}
.agenda-kaart.eerst .agenda-datum{background:var(--geel);color:var(--inkt)}.agenda-kaart.eerst .agenda-datum span{color:var(--navy)}
.agenda-tekst{min-width:0}
.agenda-wanneer{display:block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);margin-bottom:.25rem}
.agenda-kaart h3,.agenda-rij h3{margin:0 0 .3rem;font-size:1.05rem;line-height:1.25}.agenda-rij h3 a{color:inherit;text-decoration:none}.agenda-rij h3 a:hover{text-decoration:underline}
.agenda-kaart p,.agenda-rij p{margin:0;color:var(--inkt-2);font-size:.9rem;line-height:1.45}
.agenda-links{display:flex;flex-wrap:wrap;gap:.4rem .8rem;margin-top:.6rem;font-size:.78rem;font-weight:700;align-items:center}
.agenda-live{color:var(--rood);text-decoration:none}.agenda-live:hover{text-decoration:underline}
.agenda-publiek{color:#1f7a4d}
.agenda-ics{color:var(--navy);text-decoration:none;border:1.5px solid var(--lijn);border-radius:999px;padding:.15rem .55rem}.agenda-ics:hover{border-color:var(--navy)}
/* agendapagina */
.agenda-lijst{display:grid;gap:.8rem}
.agenda-rij{display:flex;gap:1.1rem;align-items:flex-start;padding:1.1rem 1.3rem}
.agenda-rij.gespeeld{opacity:.92}.agenda-rij.gespeeld .agenda-datum{background:var(--navy-licht);color:var(--navy)}.agenda-rij.gespeeld .agenda-datum span{color:var(--inkt-2)}
.agenda-resultaat{display:flex;align-items:center;gap:.5rem;margin-top:.4rem!important;font-weight:600;color:var(--inkt)!important}
.agenda-resultaat .plek{justify-self:start}
/* profielkaart: laatste vijf gespeelde toernooien/wedstrijden uit de agenda */
.laatst{border-top:1px solid var(--lijn);padding:1.1rem 1.5rem 1.3rem}
.laatst .label{display:block;margin-bottom:.5rem}
.laatst ul{list-style:none;margin:0;padding:0}
.laatst li{display:grid;grid-template-columns:3.6rem minmax(0,1fr) auto;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--lijn);font-size:.86rem}
.laatst li:last-child{border-bottom:0}
.laatst-datum{font-weight:700;color:var(--navy);white-space:nowrap;font-size:.78rem}.laatst li{grid-template-columns:4.6rem minmax(0,1fr) auto}.laatst-wat a{color:inherit;text-decoration:none}.laatst-wat a:hover{text-decoration:underline}.laatst .agenda-live{font-size:.74rem;font-weight:800}
.laatst-wat{font-weight:700;color:var(--inkt);line-height:1.25;min-width:0}.laatst-wat small{display:block;font-weight:500;color:var(--inkt-2);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.laatst .plek{justify-self:end}.laatst-res{font-size:.74rem;color:var(--inkt-2);font-weight:600}
.laatst > a{display:inline-block;margin-top:.7rem;font-size:.85rem;font-weight:800;color:var(--navy);text-decoration:none}.laatst > a:hover{text-decoration:underline}
.laatst-leeg{display:block!important;color:var(--inkt-2);font-size:.86rem;line-height:1.5;padding:.4rem 0!important;border:0!important}