/* ===========================================================================
   TIMM - gepersonaliseerde scheenbeschermers
   Een stylesheet, met de hand geschreven. Geen preprocessor, geen buildstap.
   Mobiel eerst: alles hieronder is geschreven voor een telefoon, en groeit
   daarna mee naar groter.
   =========================================================================== */

@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
/* Alleen voor tekst op het product; de interface gebruikt ze niet. */
@font-face{font-family:'Archivo Black';src:url('../fonts/ArchivoBlack-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Anton';src:url('../fonts/Anton-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0B0F14;
  --ink-2:#0E141B;
  --surface:#151B23;
  --surface-2:#1B232D;
  --line:#263240;
  --line-soft:#1E2833;
  --text:#F2F5F8;
  --muted:#94A3B2;
  --muted-2:#6B7A8B;
  --accent:#C6FF3D;
  --accent-dim:#A8DC28;
  --accent-ink:#0B0F14;
  --danger:#FF5A5A;
  --warn:#FFC24B;
  --ok:#4BE3A0;

  --r-panel:14px;
  --r-card:18px;
  --r-pill:999px;
  --t:150ms cubic-bezier(.2,.7,.3,1);

  --pad:16px;

  /* Verticale ruimte komt uit deze reeks en nergens anders vandaan. Hij stond
     er niet, en dat was te zien: marges van 10, 12, 14, 18 en 22 pixels door
     elkaar heen, en mt-2 (12) die niet even groot was als mb-2 (14). Zulke
     verschillen zie je niet los van elkaar, maar samen maken ze een pagina
     rommelig zonder dat je kunt aanwijzen waarom. */
  --s1:8px;
  --s2:16px;
  --s3:24px;
  --s4:32px;
  --s5:48px;
  --s6:64px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --header-h:58px;

  --font-display:'Barlow Condensed',ui-sans-serif,system-ui,'Arial Narrow',sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* Zonder !important verliest [hidden] van elke klasse die zelf display zet
   (.btn is display:inline-flex). Dan blijft een verborgen knop gewoon staan. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}
img,svg,canvas{max-width:100%;display:block}
/* Zonder height:auto rekt een beeld uit zodra de breedte krimpt maar het
   height-attribuut blijft staan. Dat attribuut houden we wel, want het
   voorkomt dat de pagina verspringt tijdens het laden. */
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:0;
}
h1{font-size:clamp(38px,11vw,72px)}
h2{font-size:clamp(26px,7vw,40px)}
h3{font-size:20px;letter-spacing:.04em}
p{margin:0 0 1em}
small,.small{font-size:13px}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}

.wrap{width:100%;max-width:1100px;margin-inline:auto;padding-inline:var(--pad)}
.stack>*+*{margin-top:var(--gap,16px)}

/* ---------------------------------------------------------------- header -- */
/* De kopbalk scrolt gewoon mee. Hij stond vast bovenaan, en dat kost op een
   telefoon 58 pixels van een scherm dat toch al klein is, de hele dag, terwijl
   je hem maar twee keer nodig hebt. */
.site-header{
  position:relative;z-index:40;
  padding-top:var(--safe-t);
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.site-header__in{min-height:var(--header-h);display:flex;align-items:center;
  flex-wrap:wrap;gap:2px 12px;padding-block:8px}
.brand{display:flex;align-items:center;color:var(--text);min-width:0}
.brand:hover{text-decoration:none;opacity:.85}
/* Het logo is een bestand, geen tekst: zo staat het merk overal gelijk en blijft
   de opmaak van de pagina er los van. De payoff zit in het bestand, dus hij
   staat hier niet los in HTML. Hoogte stuurt, breedte volgt. */
/* De hoogte loopt vloeiend mee met het scherm in plaats van in een sprong bij
   een breekpunt. Dat moet ook wel: het logo is ruim acht keer zo breed als
   hoog, dus elke pixel hoogte kost er acht in de breedte. Bij een vaste hoogte
   duwde het de navigatie op een telefoon naar een tweede regel en werd de
   kopbalk op elke pagina twee keer zo hoog. */
.brand__logo{height:clamp(18px,3.4vw,28px);width:auto;display:block}
@media(max-width:520px){
  .nav{gap:0}
  .nav a{font-size:13px;padding:8px 7px}
}
.brand:hover{text-decoration:none}
.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;color:var(--muted);font-size:14px;padding:9px 12px;border-radius:var(--r-pill);
  transition:color var(--t),background var(--t);
}
.nav a:hover{color:var(--text);background:var(--surface);text-decoration:none}
/* Een streepje dat vanuit het midden uitgroeit. Genoeg om te laten merken dat
   er iets aanklikbaar is, zonder dat de balk gaat staan schreeuwen. */
.nav a::after{
  content:'';position:absolute;left:50%;right:50%;bottom:4px;height:2px;
  background:var(--accent);border-radius:2px;transition:left var(--t),right var(--t);
}
.nav a:hover::after{left:12px;right:12px}
.nav a.nav__cta::after,.nav a.nav__account::after{display:none}
@media(max-width:640px){.nav a.hide-sm{display:none}}

/* Zoeken is een knop, want er opent een venster en geen pagina. Hij ziet er
   daarom ook anders uit dan de links ernaast. */
.nav__zoek{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  padding:9px 15px 9px 13px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:14px;
  transition:border-color var(--t),color var(--t),background var(--t);
}
.nav__zoek:hover{color:var(--text);border-color:var(--muted-2);background:var(--surface-2)}
.nav__zoek svg{color:var(--accent)}

.nav__scheiding{width:1px;height:22px;background:var(--line);margin:0 6px;flex:0 0 auto}
@media(max-width:640px){.nav__scheiding{display:none}}
.nav__account{display:inline-flex;align-items:center;gap:7px}
.nav__cta{
  background:var(--accent);color:var(--accent-ink)!important;font-weight:600;
  padding:9px 16px;
}
.nav__cta:hover{background:var(--accent-dim)}
@media(max-width:820px){.nav__cta{display:none}}

/* ------------------------------------------------------------ zoekvenster -- */
.zoekmodal{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;
  padding:calc(var(--s4) + var(--safe-t)) var(--pad) var(--s4)}
.zoekmodal__achter{position:absolute;inset:0;background:rgba(6,9,13,.72);backdrop-filter:blur(4px)}
.zoekmodal__vak{
  position:relative;width:100%;max-width:560px;max-height:100%;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;
  animation:zoek-in 180ms cubic-bezier(.2,.7,.3,1);
}
@keyframes zoek-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.zoekmodal__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--s2) var(--s2) 0}
.zoekmodal__kop h2{font-size:20px;margin:0}
.zoekmodal__x{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px}
.zoekmodal__x:hover{color:var(--text);background:var(--surface-2)}
.zoekmodal__veld{display:flex;align-items:center;gap:10px;margin:var(--s2);
  padding:0 14px;background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-pill)}
.zoekmodal__veld svg{color:var(--muted-2);flex:0 0 auto}
.zoekmodal__veld:focus-within{border-color:var(--accent)}
.zoekmodal__veld:focus-within svg{color:var(--accent)}
.zoekmodal__veld input{flex:1 1 auto;min-width:0;min-height:50px;background:none;border:0;color:var(--text)}
.zoekmodal__veld input:focus{outline:none}
.zoekmodal__hint{margin:0 var(--s2) 8px;font-size:12px;color:var(--muted-2);
  text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-display)}
.zoekmodal__lijst{overflow-y:auto;padding:0 var(--s2) var(--s2);display:grid;gap:6px;min-height:60px}
.zoekklub{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;
  background:var(--ink-2);border:1px solid transparent;color:var(--text);
}
.zoekklub:hover{border-color:var(--accent);text-decoration:none}
.zoekklub__kleuren{display:flex;flex:0 0 auto;border-radius:6px;overflow:hidden;
  width:30px;height:30px;border:1px solid var(--line)}
.zoekklub__kleuren i{flex:1 1 0;display:block}
.zoekklub__txt{min-width:0}
.zoekklub__txt b{display:block;font-size:14.5px}
.zoekklub__txt span{color:var(--muted-2);font-size:12.5px}
.zoekmodal__leeg{padding:14px 12px;color:var(--muted);font-size:14px}
.zoekmodal__alle{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border-top:1px solid var(--line-soft);color:var(--accent);font-size:14px;
}
.zoekmodal__alle:hover{background:var(--surface-2);text-decoration:none}
body.zoek-open{overflow:hidden}

/* ---------------------------------------------------------------- knoppen -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--surface-2);color:var(--text);font-weight:600;font-size:15px;
  cursor:pointer;transition:transform var(--t),background var(--t),border-color var(--t),opacity var(--t);
  touch-action:manipulation;user-select:none;text-align:center;
}
.btn:hover{text-decoration:none;background:#232D39}
.btn:active{transform:scale(.97)}
.btn[disabled],.btn.is-busy{opacity:.55;pointer-events:none}
.btn--primary{background:var(--accent);color:var(--accent-ink);font-weight:700}
.btn--primary:hover{background:var(--accent-dim)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--ghost:hover{background:var(--surface)}
.btn--danger{background:transparent;border-color:#4A2830;color:var(--danger)}
.btn--lg{min-height:56px;font-size:17px;padding:0 30px}
.btn--block{display:flex;width:100%}
.btn--icon{min-height:44px;width:44px;padding:0;border-radius:14px}
.btn__spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.is-busy .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------------ hero -- */
/* De ruimte boven de eyebrow en de ruimte onder de knoppen zijn hetzelfde
   getal. Ze stonden op 28 en 22, en dat verschil van zes pixels was precies
   genoeg om de kop te laten hangen zonder dat je zag waardoor. */
.hero{position:relative;padding:var(--s4) 0 var(--s1);overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:-30% -20% auto -20%;height:520px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(198,255,61,.13),transparent 70%);
  pointer-events:none;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid #2E3A22;background:#151C10;
  padding:6px 13px;border-radius:var(--r-pill);margin-bottom:var(--s2);
}
.hero h1{margin-bottom:var(--s2)}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero__lead{color:var(--muted);font-size:17px;max-width:44ch;margin-bottom:var(--s3)}
.hero__cta{display:flex;flex-direction:column;gap:10px}
@media(min-width:560px){.hero__cta{flex-direction:row;align-items:center}}

/* --------------------------------------------------------------- stroken -- */
.ticker{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding:14px var(--pad);margin-inline:calc(var(--pad)*-1);
  scroll-snap-type:x mandatory;
}
.ticker::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-pill);
  padding:9px 15px;font-size:13.5px;color:var(--muted);white-space:nowrap;
}
.chip b{color:var(--text);font-weight:600}
.chip svg{color:var(--accent);flex:0 0 auto}

/* ---------------------------------------------------------------- panels -- */
.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);padding:var(--s2)}
.panel--flush{padding:0;overflow:hidden}
.section{padding:var(--s5) 0}
.section__head{margin-bottom:var(--s3)}
/* text-wrap:pretty voorkomt dat de laatste regel uit een enkel woord bestaat.
   "...en je bent klaar." liet dat "klaar." alleen achter, en dat leest als een
   fout in de tekst terwijl het een regelafbreking is. */
.section__head p{color:var(--muted);margin:8px 0 0;max-width:56ch;text-wrap:pretty}
.hero__lead,.wiz__lead,.veld__hint,.nieuwsband__tekst{text-wrap:pretty}
h1,h2,.h-lead{text-wrap:balance}

.grid{display:grid;gap:var(--s2)}
@media(min-width:700px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--2{grid-template-columns:repeat(2,1fr)}}

/* ------------------------------------------------------------ maatkeuze -- */
.sizes{display:grid;gap:10px}
@media(min-width:620px){.sizes{grid-template-columns:repeat(3,1fr)}}
.size-card{
  position:relative;display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1.5px solid var(--line-soft);border-radius:var(--r-card);
  padding:14px 16px;cursor:pointer;transition:border-color var(--t),background var(--t),transform var(--t);
  text-align:left;width:100%;
}
@media(min-width:620px){.size-card{flex-direction:column;align-items:flex-start;gap:6px;padding:18px}}
.size-card:hover{background:var(--surface-2);text-decoration:none}
.size-card:active{transform:scale(.985)}
.size-card.is-active{border-color:var(--accent);background:#141A12}
.size-card__letter{
  font-family:var(--font-display);font-size:34px;line-height:1;color:var(--accent);
  width:42px;flex:0 0 auto;
}
.size-card__body{min-width:0;padding-right:26px}
.size-card__age{display:block;font-weight:600;font-size:15px;color:var(--text)}
.size-card__meta{display:block;color:var(--muted);font-size:13px}
.size-card__check{
  position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;color:var(--accent-ink);
}
.size-card.is-active .size-card__check{background:var(--accent);border-color:var(--accent)}
.size-card__check svg{opacity:0;transition:opacity var(--t)}
.size-card.is-active .size-card__check svg{opacity:1}

/* ------------------------------------------------------------------ list -- */
.facts{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.facts li{display:flex;gap:11px;align-items:flex-start;color:var(--muted)}
.facts b{color:var(--text);font-weight:600}
.facts svg{flex:0 0 auto;margin-top:3px;color:var(--accent)}

/* ------------------------------------------------------------- meldingen -- */
.note{
  display:flex;gap:11px;align-items:flex-start;
  border-radius:var(--r-panel);padding:13px 15px;font-size:14px;line-height:1.5;
  border:1px solid var(--line);background:var(--surface);
}
.note svg{flex:0 0 auto;margin-top:2px}
.note--warn{border-color:#4A3D1C;background:#1D1810;color:#F1DFB4}
.note--warn svg{color:var(--warn)}
.note--info{border-color:#22323F;background:#101922;color:#CBDBE7}
.note--info svg{color:#6FA8CF}
.note--ok{border-color:#1E4536;background:#0F1D18;color:#C3EEDA}
.note--ok svg{color:var(--ok)}

/* ------------------------------------------------------------------ form -- */
.field{display:block;margin-bottom:14px}
.field__label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.input,select.input,textarea.input{
  width:100%;min-height:48px;padding:12px 14px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;color:var(--text);
  transition:border-color var(--t);
}
.input:focus{border-color:var(--accent);outline:none}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:11px 0;font-size:14px;line-height:1.5}
.check input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:24px;height:24px;margin:0;border:1.5px solid var(--line);border-radius:7px;
  background:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:all var(--t);
}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{content:'';width:11px;height:6px;border:2.5px solid var(--accent-ink);
  border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-2px)}
.check.is-required .check__text::after{content:' *';color:var(--accent)}

/* ------------------------------------------------------------------ toast -- */
.toasts{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(18px + var(--safe-b));z-index:200;
  display:flex;flex-direction:column;gap:8px;width:min(440px,calc(100vw - 24px));
  pointer-events:none;
}
.toast{
  display:flex;gap:10px;align-items:flex-start;
  background:#20293480;backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px;
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  animation:toast-in .25s cubic-bezier(.2,.8,.3,1);pointer-events:auto;
}
.toast--error{border-color:#4A2830}
.toast--error svg{color:var(--danger)}
.toast--ok svg{color:var(--ok)}
.toast svg{flex:0 0 auto;margin-top:1px}
.toast.is-out{animation:toast-out .2s ease-in forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ----------------------------------------------------------------- footer -- */
.site-footer{
  border-top:1px solid var(--line-soft);margin-top:var(--s5);
  padding:var(--s4) 0 calc(var(--s4) + var(--safe-b));color:var(--muted-2);font-size:13px;
}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}

/* De kolommen groeien mee met de ruimte in plaats van op vaste breekpunten te
   springen. Op een telefoon staan ze onder elkaar, op een tablet naast elkaar,
   en op een breed scherm staan alle vijf op een rij. Zonder auto-fit zou je
   voor elk van die situaties een eigen regel moeten schrijven. */
/* Op een telefoon: alles onder elkaar, ingeklapt. Vier kolommen naast elkaar
   op 375 pixels worden vier strookjes van 80 pixels waar geen link in past.
   Vanaf 720 pixels is er ruimte en staan ze naast elkaar, altijd open. */
.foot__cols{
  display:grid;gap:0;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line-soft);
}
.foot__col{border-top:1px solid var(--line-soft)}
.foot__col:first-child{border-top:0}
.foot__col ul{list-style:none;margin:0;padding:0 0 var(--s2)}
.foot__col li+li{margin-top:9px}
.foot__h{
  font-family:var(--font-display);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--text);
  margin:0;
}
summary.foot__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 0;cursor:pointer;list-style:none;
}
summary.foot__h::-webkit-details-marker{display:none}
.foot__pijl{
  display:inline-flex;color:var(--muted);
  transition:transform 220ms cubic-bezier(.2,.7,.3,1),color 220ms;
}
.foot__col[open] .foot__pijl{transform:rotate(180deg);color:var(--accent)}
summary.foot__h:hover .foot__pijl{color:var(--text)}

@media(min-width:720px){
  .foot__cols{
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:var(--s3) var(--s2);padding-bottom:var(--s4);
  }
  .foot__col{border-top:0}
  /* Op een breed scherm valt er niets uit of in te klappen: het pijltje is weg
     en de lijst staat altijd open, ook als het element dicht is. */
  .foot__col ul{display:block!important;padding-bottom:0}
  summary.foot__h{padding:0 0 var(--s1);cursor:default;pointer-events:none}
  .foot__pijl{display:none}
}

/* ------------------------------------------------------------ nieuwsbrief -- */
.nieuwsband{
  border-top:1px solid var(--line-soft);
  background:linear-gradient(180deg,#121A0C 0%,var(--ink) 100%);
  padding:var(--s4) 0;margin-top:var(--s5);
}
.nieuwsband__in{display:grid;gap:var(--s2);align-items:center}
@media(min-width:820px){.nieuwsband__in{grid-template-columns:1fr minmax(320px,440px);gap:var(--s5)}}
.nieuwsband__kop{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(22px,5vw,30px);margin:0 0 6px;color:var(--text);
}
.nieuwsband__tekst{color:var(--muted);margin:0;max-width:48ch}
/* De voettekst sluit direct op deze strook aan; anders staat er een streep met
   niets ertussen. */
.nieuwsband + .site-footer{margin-top:0;border-top:0}
.foot__more{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}

.foot__band{
  display:grid;gap:var(--s3);padding:var(--s4) 0;
  border-bottom:1px solid var(--line-soft);
}
@media(min-width:820px){.foot__band{grid-template-columns:1.15fr 1fr;gap:var(--s5)}}
.foot__logo{height:44px;width:auto;display:block}
.foot__small{color:var(--muted-2);margin:0 0 var(--s2);max-width:44ch}
/* "Veilig betalen met" krijgt op een telefoon een eigen regel. Tussen de
   betaalmethoden ingeklemd werd het een los woord op een halve regel. */
.foot__pay{display:flex;flex-direction:column;gap:8px;margin:var(--s3) 0 0}
.foot__paychips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media(min-width:560px){
  .foot__pay{flex-direction:row;flex-wrap:wrap;align-items:center}
}
.foot__paylabel{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.foot__via{color:var(--muted-2)}
/* De betaalmethoden staan er als tekst en niet als merklogo. De beeldmerken van
   betaaldiensten hebben eigen richtlijnen over kleur, marge en minimale maat,
   en die kun je pas volgen als er ook echt een rekening aan hangt. */
.paychip{
  border:1px solid var(--line);border-radius:8px;padding:3px 9px;
  font-size:12px;color:var(--text);background:var(--surface);white-space:nowrap;
}

.news{display:flex;gap:8px;flex-wrap:wrap}
.news__input{
  flex:1 1 190px;min-width:0;min-height:48px;padding:0 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--text);
}
.news__input::placeholder{color:var(--muted-2)}
.news__input:focus{outline:none;border-color:var(--accent)}
.news__btn{flex:0 0 auto}
.foot__msg{margin:var(--s1) 0 0;color:var(--ok)}
.foot__msg.is-error{color:var(--danger)}

/* Elk kanaal in zijn eigen kleur, want daaraan herken je ze; grijs zou ze
   allemaal op elkaar laten lijken. */
.socials{display:flex;flex-wrap:wrap;gap:8px}
.social{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-soft);color:var(--text);
  transition:background var(--t),color var(--t),transform var(--t);
}
.social:hover{color:#fff;transform:translateY(-1px);text-decoration:none}
.social--instagram:hover{background:#C13584;border-color:#C13584}
.social--tiktok:hover{background:#000;border-color:#25F4EE}
.social--youtube:hover{background:#FF0000;border-color:#FF0000}
.social--facebook:hover{background:#1877F2;border-color:#1877F2}
.social--x:hover{background:#000;border-color:#000}
.social--whatsapp:hover{background:#25D366;border-color:#25D366}

.foot__legal{margin:var(--s3) 0 0;color:var(--muted-2)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Vraag en antwoord, ingeklapt. Op een pagina met twaalf vragen scroll je
   anders langs elf antwoorden die je niet zocht. */
.qa details{border-top:1px solid var(--line-soft);padding:var(--s1) 0}
.qa details:first-child{border-top:0}
.qa summary{cursor:pointer;font-weight:600;list-style:none;padding-right:24px;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';position:absolute;right:2px;top:-2px;color:var(--accent);font-size:20px}
.qa details[open] summary::after{content:'\2212'}
.qa details p{margin:var(--s1) 0 0}
.page__mail{font-size:18px;font-weight:600}

/* ------------------------------------------------------------- skeletons -- */
.skeleton{
  background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%);
  background-size:220% 100%;animation:sheen 1.3s linear infinite;border-radius:12px;
}
@keyframes sheen{to{background-position:-120% 0}}

.spinner{
  width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;
}
.spinner--sm{width:18px;height:18px;border-width:2px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* --------------------------------------------------------- hulpklassen --- */
/* Klein en saai, maar wel nodig: met een strikte CSP mag er geen style-attribuut
   in de HTML staan, dus dit soort marges krijgen een klasse. */
.mt-0{margin-top:0}
.mt-1{margin-top:var(--s1)}
.mt-2{margin-top:var(--s2)}
.mt-3{margin-top:var(--s3)}
.mt-4{margin-top:var(--s4)}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:var(--s1)}
.mb-2{margin-bottom:var(--s2)}
.mb-3{margin-bottom:var(--s3)}
.mb-4{margin-bottom:var(--s4)}
.center{text-align:center}
.narrow{max-width:760px;margin-inline:auto}
.narrower{max-width:720px;margin-inline:auto}
.page-error{text-align:center;padding-top:56px}
.h-lead{font-size:clamp(30px,8.5vw,52px)}
.step{font-family:var(--font-display);font-size:21px;line-height:1.1;color:var(--accent);
  width:22px;flex:0 0 auto}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.table th{text-align:left;color:var(--muted);font-weight:600;padding:8px 10px}
.table th:first-child,.table td:first-child{padding-left:0}
.table td{padding:10px}
.table tbody tr{border-top:1px solid var(--line-soft)}
/* Twee klassen, zodat deze regel wint van .wrap in het desktopblok verderop.
   Met een enkele klasse besliste de volgorde in het bestand, en dan werd een
   inlogformulier 1180 pixels breed. */
.wrap.form-narrow{max-width:430px;margin-inline:auto}
.form-narrow{max-width:430px;margin-inline:auto}
.pad{padding:14px}
/* De voorbeeldafbeelding heeft een vaste verhouding, zodat de kaart al op zijn
   plek staat voordat het beeld binnen is en de lijst niet verspringt terwijl je
   scrollt. De ondergrond is de kleur van het gerenderde beeld zelf, dus je ziet
   geen lichte flits. */
.thumb{display:block;aspect-ratio:8/5;background:var(--ink-2);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.ok-txt{color:var(--ok)}
.warn-txt{color:var(--warn)}
.err-txt{color:var(--danger)}
.center .ticker{justify-content:flex-start}

/* Deelrij: ook op de deelpagina, buiten de editor. */
.done__link{
  display:flex;align-items:center;gap:8px;background:var(--ink-2);border:1px solid var(--line);
  border-radius:var(--r-card);padding:8px;margin:14px 0;flex-wrap:wrap;
}
.done__link input{
  flex:1 1 220px;background:none;border:0;color:var(--muted);font-size:13px;min-width:0;
  padding:6px 8px;text-overflow:ellipsis;
}
.done__link .btn{flex:1 1 130px;min-height:44px}
@media(min-width:520px){
  .done__link{flex-wrap:nowrap;border-radius:var(--r-pill);padding:6px 6px 6px 14px}
  .done__link .btn{flex:0 0 auto}
}

/* -------------------------------------------------------------- clubs ---- */
.prov{display:flex;align-items:center;gap:10px;padding:16px 18px}
.prov:hover{text-decoration:none;background:var(--surface-2)}
.prov b{font-size:16px;color:var(--text)}
.prov span{margin-left:auto}
.prov svg{color:var(--accent);flex:0 0 auto}

.clubgrid{display:grid;gap:8px;grid-template-columns:1fr}
@media(min-width:560px){.clubgrid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.clubgrid{grid-template-columns:repeat(3,1fr)}}
.clubcard{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;
  transition:background var(--t),border-color var(--t);
}
.clubcard:hover{text-decoration:none;background:var(--surface-2);border-color:var(--line)}
.clubcard__cols{display:flex;width:34px;height:26px;border-radius:7px;overflow:hidden;flex:0 0 auto}
.clubcard__cols i{flex:1}
.clubcard__txt{min-width:0}
.clubcard__txt b{display:block;font-size:14.5px;color:var(--text);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clubcard__txt span{display:block;font-size:12px;color:var(--muted)}

.crumbs{color:var(--muted-2);margin-bottom:10px}
.accent{font-style:normal;color:var(--accent)}

/* Vaste clubkleuren: laten zien, niet laten kiezen. */
.colourshow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.colourshow__dot{width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  border:2px solid var(--line);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.colourshow p{flex:1 1 220px;min-width:0}

/* De lopende tekst onder aan een clubpagina. */
.clubtekst{margin-top:var(--s4);max-width:64ch}
.clubtekst h2{font-size:22px;margin:0 0 var(--s2)}
.clubtekst p{color:var(--muted);line-height:1.65;margin:0 0 var(--s2)}
.clubtekst a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

.colourpair{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.colourpick{display:flex;flex-direction:column;gap:6px}
.colourpick__label{font-size:12.5px;color:var(--muted)}
.colourpick input[type=color]{width:64px;height:48px;padding:0;border:1px solid var(--line);
  border-radius:12px;background:var(--ink-2);cursor:pointer}

.examples{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.examples{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.examples{grid-template-columns:repeat(4,1fr)}}
.example{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:12px 12px 10px;cursor:pointer;text-align:center;color:var(--text);
  transition:border-color var(--t),transform var(--t),background var(--t);
}
.example:hover{border-color:var(--accent);background:var(--surface-2)}
.example:active{transform:scale(.98)}
.example__art{display:flex;justify-content:center;gap:6px;height:150px;margin-bottom:9px}
.example__art canvas{height:100%;width:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.example b{display:block;font-size:13.5px;font-weight:600}
.example span{display:block;font-size:11.5px;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ------------------------------------------------------------- dialoog --- */
.dialog{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:18px;
  background:rgba(4,7,10,.72);backdrop-filter:blur(6px);
  animation:dialog-in .16s ease-out;
}
.dialog.is-out{animation:dialog-out .15s ease-in forwards}
@keyframes dialog-in{from{opacity:0}}
@keyframes dialog-out{to{opacity:0}}
.dialog__box{
  width:min(420px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:dialog-pop .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes dialog-pop{from{transform:translateY(10px) scale(.97);opacity:0}}
.dialog__box h3{margin-bottom:8px}
.dialog__box p{font-size:14.5px;margin-bottom:0}
.dialog__actions{display:flex;gap:9px;margin-top:20px}
.dialog__actions .btn{flex:1 1 auto}

.row--tight{flex:0 0 auto;gap:6px}
.row--tight .btn{min-height:38px;padding:0 12px}

/* Naam op het product: hoofdletters, want zo wordt hij ook geprint. */
.input--caps{text-transform:uppercase}
.input--caps::placeholder{text-transform:uppercase}

/* ------------------------------------------------------------ deelmenu --- */
.share-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:18px 0 4px}
@media(min-width:420px){.share-grid{grid-template-columns:repeat(3,1fr)}}
.share-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:78px;padding:12px 8px;border:0;border-radius:14px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:#fff;
  transition:transform var(--t),filter var(--t);
}
.share-btn:hover{text-decoration:none;filter:brightness(1.12)}
.share-btn:active{transform:scale(.95)}
.share-btn svg{flex:0 0 auto}
/* Kleuren van de platforms zelf, zodat je ze herkent zonder te lezen. */
.share-btn--whatsapp{background:#25D366;color:#05270F}
.share-btn--facebook{background:#1877F2}
.share-btn--x{background:#0B0F14;border:1px solid var(--line)}
.share-btn--telegram{background:#26A5E4}
.share-btn--mail{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.share-btn--link{background:var(--accent);color:var(--accent-ink)}
.share-btn--more{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
/* In de voettekst is er ruimte, dus staat het logo hier groter dan in de kop:
   dit is de plek waar de payoff daadwerkelijk te lezen is. */
.site-footer__brand{display:block;margin-bottom:16px}
.site-footer__brand img{height:52px;width:auto;display:block}
@media(max-width:520px){.site-footer__brand img{height:40px}}

/* Kortere navigatielabels op een smal scherm, zodat de kop op een regel past. */
.only-narrow{display:none}
@media(max-width:520px){
  .only-wide{display:none}
  .only-narrow{display:inline}
}

/* ============================================================================
   Ruimte op een groot scherm
   ----------------------------------------------------------------------------
   Alles hierboven is voor een telefoon geschreven: krappe marges, want daar is
   elke pixel er een. Diezelfde krapte werkt op een desktop tegen je. De pagina
   wordt dan een smal kolommetje met alles tegen elkaar aan geplakt, en juist op
   het scherm waar je de ruimte hebt oogt het benauwd.

   Vanaf 900 pixels gaat de basismarge omhoog en groeit de rest vanzelf mee,
   omdat de opmaak hierboven met var(--pad) rekent in plaats van met vaste
   getallen. Wat hier staat zijn dus alleen de uitzonderingen die niet aan die
   variabele hangen.
   ========================================================================== */
@media(min-width:900px){
  /* Alleen de schaal schuift op. De opmaak hierboven rekent met --s1 tot --s6
     en met --pad, dus alles wat eraan hangt groeit vanzelf mee en hoeft hier
     niet nog een keer te staan. */
  :root{
    --pad:32px;--header-h:64px;
    --s1:10px;--s2:20px;--s3:28px;--s4:44px;--s5:64px;--s6:88px;
  }
  .wrap{max-width:1180px}
  .site-header__in{padding-block:16px;gap:4px 24px}
  .nav{gap:6px}
  .nav a{font-size:15px;padding:10px 14px}
  .hero__lead{font-size:18px}
  .ticker{padding-block:var(--s3)}
}
@media(min-width:1280px){
  :root{--pad:40px;--s4:52px;--s5:72px}
  .wrap{max-width:1240px}
}

/* ------------------------------------------------------------- kale pagina --
   Inloggen en account maken hebben geen navigatie nodig. Alles in die balk is
   een afleiding van het enige wat je hier komt doen, en een menu waarin je kunt
   wegklikken maakt een formulier niet vriendelijker. Alleen het logo, en dat is
   meteen de weg terug. */
.kaal{padding:var(--s4) 0 var(--s3);text-align:center}
/* Klein houden. Dit logo is ruim acht keer zo breed als hoog, dus elke pixel
   hoogte kost er acht in de breedte: op 54 pixels was het 436 pixels breed en
   overheerste het een formulier van 430. Hier is het een merkteken boven een
   pagina, niet het onderwerp ervan. */
.kaal__logo{height:22px;width:auto;margin-inline:auto;display:block}
@media(min-width:720px){.kaal__logo{height:26px}}
.kaal a{display:inline-block}
.kaal a:hover{opacity:.85}
.kaalvoet{
  padding:var(--s4) 0 calc(var(--s4) + var(--safe-b));text-align:center;
  color:var(--muted-2);font-size:13px;
}
.kaalvoet a{color:var(--muted)}

/* ---------------------------------------------------- inloggen met sociaal --
   De knoppen staan boven het e-mailformulier: voor de meeste mensen is dat de
   snelste weg, zonder wachtwoord bedenken en zonder bevestigingsmail. Ze
   dragen de kleuren van de aanbieder zelf, want daar herken je ze aan, maar in
   een omhulsel dat bij deze site past. */
.sociaal{display:grid;gap:9px}
.sociaal__knop{
  display:flex;align-items:center;justify-content:center;gap:11px;
  min-height:50px;padding:0 18px;border-radius:var(--r-pill);
  background:var(--text);color:#1F2933!important;font-weight:600;font-size:15px;
  transition:transform var(--t),opacity var(--t);
}
.sociaal__knop:hover{text-decoration:none;opacity:.9}
.sociaal__knop:active{transform:scale(.98)}
.sociaal__merk{display:inline-flex;flex:0 0 auto}
.of{
  display:flex;align-items:center;gap:14px;margin:var(--s3) 0;
  color:var(--muted-2);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  font-family:var(--font-display);
}
.of::before,.of::after{content:'';flex:1 1 0;height:1px;background:var(--line-soft)}
.veld-rij{display:flex;justify-content:flex-end;margin-top:-4px}
.klein-link{font-size:13px;color:var(--muted)}
.klein-link:hover{color:var(--accent)}
.kaal-onder{text-align:center;color:var(--muted);font-size:14px;margin:var(--s3) 0 0}
/* Een regel met gegevens is geen alinea: die hoeft niet op 56 tekens afgekapt. */
.section__head p.meta{max-width:none}
/* Apple schrijft voor dat hun knop wit-op-zwart of zwart-op-wit is; wij nemen
   de lichte, zodat alle knoppen naast elkaar hetzelfde ogen. */
.sociaal__knop svg{display:block}

/* -------------------------------------------------------------- winkelwagen -- */
.nav__mand{position:relative;display:inline-flex;align-items:center;padding:9px 11px}
.nav__mand svg{color:var(--muted);transition:color var(--t)}
.nav__mand:hover svg,.nav__mand.is-vol svg{color:var(--text)}
.nav__mand::after{display:none}
.nav__mand-teller{
  position:absolute;top:1px;right:1px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:99px;
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:11.5px;line-height:1;
}
/* Een tikje bij een nieuw aantal: genoeg om te zien dat er iets veranderd is,
   kort genoeg om niet in de weg te zitten. */
.nav__mand-teller.is-nieuw{animation:mand-tik 420ms cubic-bezier(.2,.9,.3,1.5)}
@keyframes mand-tik{
  0%{transform:scale(1)}
  35%{transform:scale(1.45)}
  100%{transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.nav__mand-teller.is-nieuw{animation:none}}

/* Een knop die eruitziet als een link: hij opent een venster, dus het is geen
   link, maar hij hoort er wel zo uit te zien. */
.tekstknop{
  background:none;border:0;padding:0;color:var(--accent);cursor:pointer;
  font:inherit;text-decoration:underline;text-underline-offset:2px;
}
.tekstknop:hover{color:var(--accent-dim)}
/* Een pijl hoort naast de tekst te staan, niet erboven. Zonder dit valt het
   svg-icoon op een eigen regel, want svg's staan globaal op display:block. */
.terug-link{display:inline-flex;align-items:center;gap:8px}

.zoekmodal__vak--breed{max-width:640px}
.maathulp{padding:0 var(--s2) var(--s2);overflow-y:auto}
.maattabel{width:100%;border-collapse:collapse;margin-top:var(--s2);font-size:14px}
.maattabel th{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;
}
.maattabel td{padding:11px 10px;border-bottom:1px solid var(--line-soft)}
.maattabel tr:last-child td{border-bottom:0}
.maattabel__code{
  font-family:var(--font-display);font-size:20px;color:var(--accent);width:56px;
}

/* Een venster om iets in na te lezen: breder en scrollbaar, want hier staat
   tekst in plaats van een handeling. */
.dialog__box--lezen{
  width:min(680px,100%);max-height:min(80vh,760px);display:flex;flex-direction:column;
  padding:0;
}
.lezen__kop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:var(--s3) var(--s3) var(--s2);border-bottom:1px solid var(--line-soft);
}
.lezen__kop h3{margin:0}
.lezen__body{overflow-y:auto;padding:var(--s3);flex:1 1 auto}
.lezen__body .section__head{margin-bottom:var(--s2)}
.lezen__body .panel{background:var(--ink-2)}
.dialog__box--lezen > .btn{margin:0 var(--s3) var(--s3)}

/* --------------------------------------------------------------- de routes --
   Voor jezelf of voor het hele team. Die tweede is het onderscheidende deel van
   het aanbod en krijgt daarom de accentrand; de eerste blijft de gewone weg. */
.route{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  padding:var(--s3);display:flex;flex-direction:column;gap:10px;
}
.route--team{border-color:#2E3A22;background:linear-gradient(180deg,#121A0C 0%,var(--surface) 55%)}
.route__ico{
  width:44px;height:44px;display:grid;place-items:center;border-radius:13px;
  background:var(--surface-2);color:var(--accent);margin-bottom:2px;
}
.route--team .route__ico{background:var(--accent);color:var(--accent-ink)}
.route h3{font-size:22px}
.route p{margin:0}
.route__stappen{
  list-style:none;counter-reset:rs;margin:6px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
}
.route__stappen li{
  counter-increment:rs;position-relative;position:relative;padding-left:30px;
  color:var(--muted);font-size:14.5px;
}
.route__stappen li::before{
  content:counter(rs);position:absolute;left:0;top:1px;
  width:21px;height:21px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);color:var(--accent);
  font-family:var(--font-display);font-size:12px;
}
.route__prijs{
  margin-top:auto;padding-top:var(--s2);display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  color:var(--muted);font-size:14px;
}
.route__prijs b{
  font-family:var(--font-display);font-size:26px;color:var(--text);letter-spacing:.02em;
}
.route__vlag{
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);
}

/* ------------------------------------------------------------------- faq -- */
.faqnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s5)}
.faqnav a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:var(--r-pill);font-size:14px;
  background:var(--surface);border:1px solid var(--line-soft);color:var(--muted);
  transition:border-color var(--t),color var(--t);
}
.faqnav a:hover{color:var(--text);border-color:var(--accent);text-decoration:none}
.faqnav i{
  font-style:normal;font-family:var(--font-display);font-size:12px;
  color:var(--accent-ink);background:var(--accent);border-radius:99px;padding:1px 7px;
}
.faqgroep{margin-bottom:var(--s5)}
.faqgroep:last-of-type{margin-bottom:0}
.faqgroep__kop{
  font-size:clamp(22px,5vw,30px);scroll-margin-top:var(--s3);
  padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block;
}
.faqgroep__intro{color:var(--muted);margin:var(--s2) 0 var(--s2);max-width:56ch;text-wrap:pretty}
.faqgroep .qa details{border-top:1px solid var(--line-soft);padding:var(--s2) 0}
.faqgroep .qa summary{font-size:16px;line-height:1.45;padding-right:30px}
.faqgroep .qa summary::after{top:10px;font-size:24px}
.faqgroep .qa details p{max-width:64ch;text-wrap:pretty;line-height:1.6}
/* Het Nederlandse woord bij de maat. De letter blijft de blikvanger, want die
   staat ook op het product; het woord staat eronder voor wie twijfelt. */
.size-card__naam{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;color:var(--accent);
}

/* Voorstellen voor clubkleuren in het beheer. Het logo staat erbij, want
   zonder dat plaatje is goedkeuren gokken. */
.suglijst{display:flex;flex-direction:column;gap:8px}
.sug{display:flex;align-items:center;gap:12px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.sug__logo{width:52px;height:52px;flex:0 0 auto;object-fit:contain;border-radius:8px;
  background:#fff;padding:3px}
.sug__logo--leeg{display:grid;place-items:center;background:var(--surface-2);color:var(--muted)}
.sug__tekst{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.sug__tekst b{font-size:14.5px}
.sug__tekst .muted{font-weight:400}
.sug .row{flex:0 0 auto}

.balk{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.balk__vol{display:block;height:100%;background:var(--accent);border-radius:99px}

/* Clubs bij de bezoeker in de buurt. */
.dichtbij .blok__kop{margin:0 0 6px}
.dichtbij .clubgrid{margin-top:var(--s3)}

/* Het buurtblok boven de footer. Iets rustiger dan de rest van de pagina:
   het is een aanbod, geen onderdeel van waar je mee bezig was. */
.dichtbij-blok{padding-top:0}
.dichtbij .blok__kop{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:19px}
.dichtbij .blok__kop svg{color:var(--accent)}
.dichtbij .clubgrid{margin-top:var(--s3)}

/* De norm in de hero en in de balk eronder zijn nu links naar de
   veiligheidspagina. Ze mogen er hetzelfde uitzien als eerst, maar wel
   reageren zodat je ziet dat er iets achter zit. */
a.hero__eyebrow{text-decoration:none;transition:border-color .15s, background .15s}
a.hero__eyebrow:hover{border-color:var(--accent);background:#1A230F}
a.chip{text-decoration:none;transition:border-color .15s, color .15s}
a.chip:hover{border-color:var(--accent);color:var(--text)}

/* De voorbeeldgalerij op de startpagina. Dezelfde opbouw als de voorbeelden op
   een clubpagina, maar met meer lucht: hier kijk je rond, daar kies je. */
.galerij__grid{
  display:grid;gap:var(--s2);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:620px){.galerij__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:860px){.galerij__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.voorbeeld{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:14px 10px 12px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);color:var(--text);cursor:pointer;font:inherit;text-align:center;
  transition:border-color .15s, transform .15s, background .15s;
}
.voorbeeld:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--surface-2)}
.voorbeeld:disabled{opacity:.6;cursor:progress;transform:none}
.voorbeeld__art{display:grid;place-items:center;margin-bottom:8px}
/* De beschermer is bijna twee keer zo hoog als breed. Zonder deze grens vult
   hij de hele kolom en wordt de galerij een lap van anderhalve meter. */
.voorbeeld__art canvas{display:block;max-height:230px;width:auto}
.voorbeeld b{font-family:var(--font-display);font-size:14px;letter-spacing:.04em}
.voorbeeld span{font-size:12.5px;color:var(--muted)}
.galerij__meer{margin-top:var(--s3);text-align:center}

/* De kleine letters onder de sponsorrij. */
.galerij__kleine-letters{margin-top:var(--s2);text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}

/* ── Huisstijlpagina in het beheer ──────────────────────────────────────── */
/* Het logo op de twee ondergronden waarvoor het gemaakt is, zodat je meteen
   ziet welke versie je nodig hebt. */
.hs-proef{padding:var(--s4);border-radius:12px;display:flex;justify-content:center;
  align-items:center;margin:var(--s2) 0}
.hs-proef--donker{background:var(--ink)}
.hs-proef--licht{background:var(--paper,#F2F5F8)}
.hs-proef__beeld{width:auto;height:52px;max-width:100%;display:block}
.hs-knoppen{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hs-kleuren{display:flex;flex-wrap:wrap;gap:var(--s3)}
.hs-kleur{display:flex;align-items:center;gap:var(--s1)}
.hs-kleur__vlak{width:28px;height:28px;border-radius:6px;display:inline-block;
  border:1px solid rgba(127,127,127,.35)}

/* ── Kortingscode in beeld ──────────────────────────────────────────────── */
/* Groot en in een vaste letter, want dit getal wordt overgetypt. */
.codebox{
  font:700 clamp(22px,5vw,30px)/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:2px;margin:0 0 var(--s1);word-break:break-all
}

/* ── Kortingscodes in het beheer ────────────────────────────────────────── */
/* Het formulier is een raster dat op een telefoon vanzelf een kolom wordt. */
.codeform{display:grid;gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start}
.codeform label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
.codeform input,.codeform select{
  font:inherit;font-weight:400;padding:10px 12px;border-radius:10px;
  border:1px solid var(--lijn,#2A3340);background:var(--ink-2,#0E141B);color:inherit}
.codeform small{font-weight:400;opacity:.7}
.codeform__vink{flex-direction:row;align-items:center;gap:8px}
.codeform__vink input{width:auto}
.codeform__knop{grid-column:1/-1}

/* Een tabel met acht kolommen past niet op een telefoon. Laten scrollen is
   eerlijker dan kolommen verstoppen die je juist nodig hebt. */
.tabelrol{overflow-x:auto}
.tabel{width:100%;border-collapse:collapse;font-size:14px}
.tabel th,.tabel td{text-align:left;padding:10px 12px;vertical-align:top;
  border-bottom:1px solid var(--lijn,#2A3340)}
.tabel th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.tabel tr:last-child td{border-bottom:0}
.tabel .is-uit,.tabel tr.is-uit td{opacity:.45}
.btn--klein{padding:6px 10px;font-size:13px}