/* =====================================================================================
   sios.be — de publieke kant en het deelnemersscherm.

   Alles wat uitzicht is komt uit de tokens hieronder. De waarden op :root zijn de
   standaard (SIOS-geel spaarzaam, grafiet als drager, 4 px afronding, Kumbh Sans en
   Poppins). Beheer → Huisstijl in Filament zet ze over via een <style>-blok in de layout,
   zodat een redacteur kleur, afronding en letters wijzigt zonder dat hier iets verandert.
   Geen Tailwind en geen buildstap voor deze kant: één bestand, leesbaar, en op de server
   hoeft er niets gecompileerd te worden. Filament heeft zijn eigen, gecompileerde stijl.
   ===================================================================================== */
:root{
  --accent:#FFED00; --accent-ink:#1F2124;
  --drager:#1F2124; --drager-ink:#F2F1EC; --drager-soft:#B9BBB9;
  --ground:#FFFFFF; --alt:#F6F5F0; --ink:#1F2124; --soft:#5A5D61;
  --line:#E4E3DB; --line2:#CBCAC0;
  --blue:#1E73BE; --good:#2E7D52; --warn:#B4671A;
  --rond:4px; --rond-klein:2px;
  --font-kop:"Kumbh Sans","Poppins",sans-serif; --font-tekst:"Poppins",sans-serif;
  --kop-gewicht:800; --tekst-gewicht:300; --kop-spatie:-.015em;
  --maat:1; --tekst:16px;
  --breed:1240px;
}

*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-tekst);font-weight:var(--tekst-gewicht);font-size:var(--tekst);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-kop);font-weight:var(--kop-gewicht);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:var(--kop-spatie)}
p{margin:0}
a{color:var(--blue)}
img,svg{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.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}

/* raamwerk */
.in{max-width:var(--breed);margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
.pad{padding-block:calc(44px*var(--maat))}
.eyebrow{font-family:var(--font-kop);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.kop-site{border-block-end:1px solid var(--line);background:var(--ground);position:sticky;top:0;z-index:40}
.kop-site .in{display:flex;align-items:center;gap:calc(26px*var(--maat));padding-block:calc(14px*var(--maat));flex-wrap:wrap}
.kop-site img{height:34px;width:auto}
.menu{display:flex;gap:calc(24px*var(--maat));font-size:14.5px;font-weight:500;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.menu a{color:var(--ink);text-decoration:none;padding-block:6px;display:inline-block;min-height:44px;line-height:32px}
.menu a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}
.kop-site .rechts{margin-inline-start:auto;display:flex;align-items:center;gap:14px;font-size:14px}
.tel{background:var(--drager);color:var(--drager-ink);font-family:var(--font-kop);font-weight:700;font-size:11px;padding:3px 8px;border-radius:var(--rond-klein)}
.voet{background:var(--drager);color:var(--drager-soft);margin-block-start:calc(60px*var(--maat));border-block-start:6px solid var(--accent)}
.voet .in{padding-block:calc(40px*var(--maat));display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));font-size:14px}
.voet b{color:var(--drager-ink);font-family:var(--font-kop);display:block;margin-block-end:8px}
.voet a{color:var(--drager-ink);text-decoration:none}

/* knoppen, badges, kaarten */
.knop{background:var(--accent);color:var(--accent-ink);border:none;padding:calc(12px*var(--maat)) calc(20px*var(--maat));border-radius:var(--rond-klein);font-family:var(--font-kop);font-weight:700;font-size:13px;min-height:44px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.knop:hover{filter:brightness(.96)}
.knop.stil{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.knop.donker{background:var(--drager);color:var(--drager-ink)}
.knop.klein{min-height:36px;padding:6px 12px;font-size:12px}
.knop.breed{width:100%}
.link{background:none;border:none;color:var(--blue);font-weight:500;padding:0;font-size:inherit;text-align:start;text-decoration:none}
.link:hover{text-decoration:underline}
.kaart{border:1px solid var(--line);border-radius:var(--rond);background:var(--ground);overflow:hidden}
.foto{background:var(--alt) center/cover no-repeat;position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
.pil{font-family:var(--font-kop);font-size:10.5px;font-weight:700;letter-spacing:.07em;padding:4px 9px;border-radius:var(--rond-klein);white-space:nowrap;border:1px solid currentColor;display:inline-block}
.pil.ok{color:var(--good)}.pil.let{color:var(--warn)}.pil.bezig{color:var(--blue)}.pil.niet{color:var(--soft)}
.pil.geel{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.balk{height:6px;background:var(--line);border-radius:99px;overflow:hidden;min-width:70px}
.balk i{display:block;height:100%;background:var(--accent)}.balk.klaar i{background:var(--good)}
.melding{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;background:#FFFBE6;border:1px solid #EBD98A;border-radius:var(--rond);padding:12px 14px;font-size:14px;color:#5C4E13}
.melding::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-block-start:8px}
.melding.groen{background:#EEF6F0;border-color:#BFDCC8;color:#1F4A30}
.melding.groen::before{background:var(--good)}
.melding.rood{background:#FBEFEA;border-color:#EBC5B5;color:#6B2E14}
.melding.rood::before{background:var(--warn)}

/* winkel */
/* Compact: de uitleg over credits en abonnementen moet zonder scrollen in beeld komen. */
.hero{display:grid;grid-template-columns:1.2fr 1fr;min-height:260px;background:var(--drager);color:var(--drager-ink);border-block-end:6px solid var(--accent)}
.hero .tekst{padding:calc(34px*var(--maat)) clamp(16px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:calc(14px*var(--maat))}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(26px,3.2vw,38px);color:var(--drager-ink);max-width:22ch}
.hero p{color:var(--drager-soft);font-size:var(--tekst);max-width:52ch}
.hero .acties{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:4px}
.hero .knop.stil{color:var(--drager-ink);border-color:rgba(255,255,255,.35)}
/* De foto vult de hoogte van het tekstblok en bepaalt ze niet: absoluut gepositioneerd, anders
   groeit het blok mee met de natuurlijke hoogte van de afbeelding en vult het het hele scherm. */
.hero .foto{position:relative;min-height:200px;overflow:hidden}
.hero .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero .foto::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--drager) 0%,transparent 35%);z-index:1}
.bewijs{display:flex;gap:calc(40px*var(--maat));padding-block:calc(22px*var(--maat));border-block-end:1px solid var(--line);flex-wrap:wrap;font-size:14px;color:var(--soft)}
.bewijs b{font-family:var(--font-kop);font-size:22px;color:var(--ink);display:block;font-variant-numeric:tabular-nums;line-height:1.1}
.sectiekop{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-block-end:calc(26px*var(--maat))}
.sectiekop h2{font-size:clamp(24px,3vw,34px)}
.sectiekop p{color:var(--soft);max-width:60ch;margin-block-start:8px}
.vormen{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(20px*var(--maat))}
.vorm{border:1px solid var(--line);border-radius:var(--rond);padding:calc(26px*var(--maat));display:flex;flex-direction:column;gap:12px;text-align:start;background:var(--ground);color:inherit;text-decoration:none}
.vorm:hover{border-color:var(--ink)}
.vorm.aan{border-color:var(--ink);box-shadow:inset 0 4px 0 var(--accent)}
.vorm h3{font-size:20px}
.vorm p{color:var(--soft);font-size:14.5px;flex:1}
.vorm .prijs{font-family:var(--font-kop);font-weight:700;font-size:15px}
.vorm .prijs small{font-weight:400;color:var(--soft);font-family:var(--font-tekst);font-size:12.5px}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:calc(18px*var(--maat))}
.module{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.module .foto{aspect-ratio:16/9} /* alles 16:9: één foto per module, de site verkleint zelf */
.module .body{padding:calc(16px*var(--maat));display:flex;flex-direction:column;gap:6px;flex:1}
.module h3{font-size:17px}
.module .meta{font-size:13px;color:var(--soft)}
.module .voetje{margin-block-start:auto;padding-block-start:10px;display:flex;justify-content:space-between;align-items:baseline;border-block-start:1px solid var(--line)}
.module .voetje b{font-family:var(--font-kop);font-size:15px}
.module .voetje small{color:var(--soft);font-size:12.5px}
.prodkaart{display:flex;flex-direction:column}
.prodkaart .body{padding:calc(20px*var(--maat));display:flex;flex-direction:column;gap:8px;flex:1}
.prodkaart h3{font-size:22px}
.prodkaart .prijs{margin-block-start:auto;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-block-start:12px;border-block-start:1px solid var(--line)}
.prodkaart .prijs b{font-family:var(--font-kop);font-size:20px;font-variant-numeric:tabular-nums}
.prodkaart .prijs small{font-size:12.5px;color:var(--soft)}
.prodkaart .voetje{padding:0 calc(20px*var(--maat)) calc(20px*var(--maat))}
.prodkaart.uitgelicht{border-color:var(--ink)}
.lint{font-family:var(--font-kop);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);color:var(--accent-ink);padding:3px 8px;border-radius:var(--rond-klein);align-self:flex-start}
.voordelen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.voordelen li{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start}
.voordelen li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);margin-block-start:9px}
.stappen4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.uitleg{background:var(--alt);border:1px solid var(--line);border-radius:var(--rond);padding:16px 18px;font-size:14px;color:var(--soft);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.uitleg b{color:var(--ink);font-weight:600}
.uitleg .nr{font-family:var(--font-kop);font-weight:800;font-size:22px;color:var(--ink);line-height:1}

/* formulieren en bestelbon */
.stapbalk{display:flex;margin-block-end:26px;border:1px solid var(--line);border-radius:var(--rond);overflow:hidden}
.stap{flex:1;padding:11px 16px;font-size:13px;color:var(--soft);display:flex;gap:10px;align-items:center;background:var(--ground);min-height:44px}
.stap + .stap{border-inline-start:1px solid var(--line)}
.stap i{font-style:normal;font-family:var(--font-kop);font-weight:800;font-size:11px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;flex:none}
.stap.aan{color:var(--ink);font-weight:500;background:var(--alt)}
.stap.aan i{background:var(--drager);color:var(--drager-ink);border-color:var(--drager)}
.stap.klaar i{background:var(--good);color:#fff;border-color:var(--good)}
.kolommen{display:grid;gap:20px;grid-template-columns:1.6fr 1fr;align-items:start}
.plak{position:sticky;top:84px}
.kaartkop{padding:13px 16px;background:var(--alt);border-block-end:1px solid var(--line);font-family:var(--font-kop);font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.kaartkop .r{font-family:var(--font-tekst);font-weight:400;font-size:12.5px;color:var(--soft)}
.kaartbody{padding:16px;display:flex;flex-direction:column;gap:13px}
.veld{display:flex;flex-direction:column;gap:5px}
.veld label{font-size:12.5px;font-weight:500;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.veld label .hint{font-size:11px;color:var(--soft);font-weight:400}
.veld input,.veld select,.veld textarea{border:1px solid var(--line2);border-radius:var(--rond-klein);padding:10px 12px;font:inherit;font-size:14.5px;background:var(--ground);min-height:44px;color:var(--ink);width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--ink);outline:none}
.veld .fout{font-size:12px;color:var(--warn)}
.hulp{font-size:12px;color:var(--soft)}
.tweekolom{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.keuze{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 13px;border:1px solid var(--line2);border-radius:var(--rond-klein);background:var(--ground);text-align:start;width:100%;min-height:44px;cursor:pointer}
.keuze:has(input:checked){border-color:var(--ink);background:var(--alt)}
.keuze input{accent-color:var(--drager);width:16px;height:16px;margin:0}
.keuze .sub{display:block;font-size:12.5px;color:var(--soft)}
.kosten{font-family:var(--font-kop);font-weight:700;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rekening{display:flex;flex-direction:column;gap:9px}
.rekenrij{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-variant-numeric:tabular-nums}
.rekenrij .sub{display:block;font-size:12.5px;color:var(--soft)}
.rekenrij.tot{border-block-start:1px solid var(--line2);padding-block-start:9px;font-weight:600;font-size:16px;font-family:var(--font-kop)}
.rekenrij .neg{color:var(--warn)}.rekenrij .pos{color:var(--good)}

/* deelnemer */
.mijn{max-width:820px}
.modrij{border:1px solid var(--line);border-radius:var(--rond);overflow:hidden;margin-block-start:14px;display:grid;grid-template-columns:120px 1fr;background:var(--ground)}
.modrij .foto{min-height:100px}
.modrij .txt{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.modrij h3{font-size:16px}
.modrij .sub{font-size:12.5px;color:var(--soft)}
.modrij .onder{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-start:auto}
.afmeldbalk{position:sticky;bottom:0;padding:12px 0 18px;background:linear-gradient(transparent,var(--ground) 30%)}

/* speler */
.contentchrome{background:#2A2D30;color:#B9BBB9;font-size:12px;padding:8px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.contentchrome b{color:#F2F1EC;font-weight:500}
.spelerframe{width:100%;aspect-ratio:16/9;border:0;background:#1D2023;display:block;min-height:420px}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero .foto{display:none} /* op een smal scherm mag de foto de uitleg niet naar beneden duwen */
  .vormen,.tweekolom,.kolommen{grid-template-columns:1fr}
  .plak{position:static}
  .stapbalk{flex-direction:column}
  .stap + .stap{border-inline-start:none;border-block-start:1px solid var(--line)}
  .modrij{grid-template-columns:96px 1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Taal op het beeld van elke module, en de stempel voor wat nog in ontwikkeling is (24-09-2026). */
.module .foto{position:relative}
.module .taalpil{position:absolute;inset-block-start:10px;inset-inline-end:10px;background:rgba(31,33,36,.82);color:#fff;font-family:var(--font-kop);font-weight:700;font-size:11px;letter-spacing:.08em;padding:4px 8px;border-radius:var(--rond-klein)}
.module.binnenkort{cursor:default}
.module.binnenkort .foto img{filter:grayscale(.35)}
.module.binnenkort .stempel{position:absolute;inset:0;display:grid;place-items:center;background:rgba(246,245,240,.55)}
.module.binnenkort .stempel span{transform:rotate(-12deg);border:3px solid var(--drager);color:var(--drager);background:rgba(255,255,255,.7);font-family:var(--font-kop);font-weight:800;font-size:clamp(16px,2.4vw,22px);letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:var(--rond-klein);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.module.binnenkort h3{color:var(--soft)}
/* Zonder prijzen, voor schermafbeeldingen (?zonderprijs=1). */
.zonder-prijs .module .voetje small,.zonder-prijs .prijs,.zonder-prijs [data-prijs],.zonder-prijs [data-eenheidsprijs],.zonder-prijs .staffel,.zonder-prijs [data-vanaf]{visibility:hidden}