/* Basislaag: reset, typografie, layout-hulpen, knoppen, header en footer.
   Mobile-first (alleen min-width-queries). Gebiedsbestanden (it-home.css,
   it-app-bord.css, ...) bouwen hierop voort. */
*,*::before,*::after{box-sizing:border-box}
/* scroll-padding: een anker (#hoe, #faq) of een gefocust veld valt nooit onder
   de vaste header, de mobiele onderbalk of de cookiebalk (WCAG 2.4.11). */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;scroll-padding-bottom:16px}
html:has(.it-onderbalk){scroll-padding-bottom:88px}
@media (min-width:720px){html:has(.it-onderbalk){scroll-padding-bottom:16px}}
html:has(.it-cookiebalk:not([hidden])){scroll-padding-bottom:220px}
@media (min-width:720px){html:has(.it-cookiebalk:not([hidden])){scroll-padding-bottom:120px}}
/* Minder beweging: geen smooth scroll, geen animaties, transities of hover-sprongen. */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}.it-knop:hover{transform:none}}
body{margin:0;font-family:var(--it-font-tekst);font-size:var(--it-fs-body);line-height:1.6;color:var(--it-ink);background:var(--it-wit)}
[hidden]{display:none !important}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--it-font-kop);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:var(--it-fs-h1);font-weight:800}
h2{font-size:var(--it-fs-h2);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
a{color:var(--it-groen-diep)}
/* Focusring: massief, 3px, 2px los van het element. Groen-diep op licht (5,04:1),
   geel op donkere vlakken (10,5:1). Nooit outline:none zonder vervanging. */
:focus-visible{outline:3px solid var(--it-focus-kleur);outline-offset:2px}
.it-header--app,.it-onderbalk,.it-footer,.it-thuis .it-header,.it-samenvatting,.it-bordvlak,.it-foto,.it-donker{--it-focus-kleur:var(--it-focus-kleur-donker)}
h1[tabindex="-1"]:focus{outline:none}
em.it-accent{font-style:normal;color:var(--it-groen)}
.it-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.it-skip{position:absolute;left:-999px;top:8px;background:var(--it-geel);color:var(--it-ink);padding:8px 14px;border-radius:var(--it-radius-pil);z-index:100;font-weight:700}
.it-skip:focus{left:8px}
.it-eyebrow{display:block;font-size:.95rem;font-weight:600;color:var(--it-ink-zachter);margin:0 0 .3em}
.it-eyebrow a{color:inherit}
.it-kruimelpad{font-size:.9rem;color:var(--it-ink-zachter);margin:0 0 14px}
.it-kruimelpad ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px}
.it-kruimelpad li+li::before{content:"›";margin-right:6px;color:var(--it-ink-zachter)}
.it-kruimelpad a{color:inherit;text-decoration:none}
.it-kruimelpad a:hover{text-decoration:underline;color:var(--it-ink)}
.it-kruimelpad [aria-current]{color:var(--it-ink);font-weight:600}

/* Knoppen */
/* Hoofdknop: wit op groen-diep (5,04:1), hover groen-donker (6,57:1). Nooit wit op --it-groen (3,18:1). */
.it-knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.85em 1.5em;border-radius:var(--it-radius-pil);border:2px solid transparent;font-family:var(--it-font-kop);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;background:var(--it-groen-diep);color:var(--it-wit)}
.it-knop:hover{background:var(--it-groen-donker);transform:translateY(-1px);box-shadow:var(--it-schaduw)}
.it-knop--geel{background:var(--it-geel);color:var(--it-ink)}
.it-knop--geel:hover{background:var(--it-geel-diep)}
.it-knop--licht{background:var(--it-wit);color:var(--it-ink);border-color:var(--it-lijn)}
.it-knop--licht:hover{background:var(--it-mist)}
.it-knop--tekst{background:transparent;color:var(--it-groen-diep);padding-left:.6em;padding-right:.6em}
.it-knop--tekst:hover{background:var(--it-groen-zacht);color:var(--it-groen-donker);transform:none;box-shadow:none}
.it-knop--groot{font-size:1.1rem;padding:1em 1.9em}
.it-knop--klein{font-size:.9rem;padding:.55em 1.1em}
.it-knop[disabled],.it-knop[aria-disabled="true"]{opacity:.55;pointer-events:none}

/* Meldingen */
.it-melding{padding:.9em 1.1em;border-radius:var(--it-radius);background:var(--it-groen-zacht);color:var(--it-ink);border-left:4px solid var(--it-groen);margin:0 0 1.2em}
.it-melding--let{background:var(--it-geel-zacht);border-left-color:var(--it-geel-diep)}
.it-melding--fout{background:var(--it-rood-zacht);border-left-color:var(--it-rood)}

/* Header */
.it-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--it-lijn)}
.it-header .it-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:64px;padding:0 16px}
@media (min-width:480px){.it-header .it-wrap{gap:16px;padding:0 20px}}
.it-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--it-ink);font-family:var(--it-font-kop);font-weight:800;font-size:1.05rem;letter-spacing:-.01em}
.it-logo svg{width:34px;height:34px;flex:0 0 auto}
.it-logo b{color:var(--it-groen)}
/* Op de telefoon staat het woordmerk op twee regels, zodat de knop ernaast past. */
.it-logo span{line-height:1.05}
.it-logo b{display:block}
@media (min-width:720px){.it-logo b{display:inline}}
.it-nav{display:flex;align-items:center;gap:6px}
.it-nav a{text-decoration:none;color:var(--it-ink-zacht);font-weight:600;padding:.5em .7em;border-radius:var(--it-radius-pil);display:none;white-space:nowrap}
.it-nav .it-knop{display:inline-flex;white-space:nowrap}
/* Gasten op de telefoon: "Inloggen" als tekstknop naast de CTA, niet alleen in de footer. */
.it-nav a.it-nav-inloggen{display:inline-flex;align-items:center;min-height:44px;padding:.5em .4em}
@media (min-width:720px){.it-nav a.it-nav-inloggen{padding:.5em .7em}}
/* De CTA houdt wit op groen-diep, ook binnen .it-nav (die kleurt links grijs). */
.it-nav .it-knop,.it-nav .it-knop:hover{color:var(--it-wit)}
/* Onder 480px past naast Inloggen en de CTA alleen het beeldmerk: het woordmerk
   blijft voor schermlezers de naam van de link (visueel verborgen, niet weg). */
.it-header:not(.it-header--app) .it-logo>span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.it-header:not(.it-header--app) .it-nav .it-knop--klein{padding-left:.8em;padding-right:.8em;font-size:.85rem}
@media (min-width:360px){.it-header:not(.it-header--app) .it-nav .it-knop--klein{font-size:.9rem}}
@media (min-width:480px){.it-header:not(.it-header--app) .it-logo>span{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}.it-header:not(.it-header--app) .it-nav .it-knop--klein{padding-left:1.1em;padding-right:1.1em}}
.it-nav a:hover{background:var(--it-mist);color:var(--it-ink)}
.it-nav-uit{display:none;margin:0}
@media (min-width:720px){.it-nav-uit{display:block}}
@media (min-width:720px){.it-nav a{display:inline-block}}

/* App-topbalk (ingelogd): navy, 56 px, geen marketinglinks */
.it-header--app{background:var(--it-navy);border-bottom:0;backdrop-filter:none}
.it-header--app .it-wrap{min-height:56px}
.it-header--app .it-logo{color:var(--it-wit);font-size:1rem}
.it-header--app .it-logo svg{width:30px;height:30px}
.it-header--app .it-nav a{color:var(--it-op-navy);padding:.45em .8em}
.it-header--app .it-nav a:hover{background:rgba(255,255,255,.1);color:var(--it-wit)}
.it-header--app .it-nav a[aria-current="page"]{color:var(--it-wit);background:rgba(255,255,255,.14)}
.it-header--app .it-nav-beheer::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--it-geel);margin-left:6px;vertical-align:middle}
.it-header--app .it-knop--tekst{color:var(--it-op-navy)}
.it-header--app .it-knop--tekst:hover{background:rgba(255,255,255,.1);color:var(--it-wit)}

/* Mobiele onderbalk (ingelogd, onder 720 px) */
.it-ingelogd main{padding-bottom:72px}
.it-onderbalk{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--it-navy);border-top:1px solid rgba(255,255,255,.1);padding-bottom:env(safe-area-inset-bottom)}
.it-onderbalk a{display:grid;justify-items:center;gap:3px;padding:8px 4px 9px;text-decoration:none;color:var(--it-op-navy-zacht);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.it-onderbalk a[aria-current="page"]{color:var(--it-geel)}
.it-onderbalk a:focus-visible{outline-offset:-3px}
.it-onderbalk .ico{width:22px;height:22px;border:2px solid currentColor;border-radius:6px;position:relative;box-sizing:border-box}
.it-onderbalk .ico--bord::after{content:"";position:absolute;left:4px;right:4px;top:50%;border-top:2px solid currentColor}
.it-onderbalk .ico--spelers{border-radius:50%}
.it-onderbalk .ico--spelers::after{content:"";position:absolute;left:5px;top:4px;width:8px;height:8px;border-radius:50%;background:currentColor}
.it-onderbalk .ico--delen{border-radius:50%}
.it-onderbalk .ico--instellingen::after{content:"";position:absolute;left:4px;right:4px;top:5px;border-top:2px solid currentColor;box-shadow:0 5px 0 currentColor}
.it-onderbalk .ico--delen::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.it-onderbalk .ico--lijst::before,.it-onderbalk .ico--lijst::after{content:"";position:absolute;left:4px;right:4px;border-top:2px solid currentColor}
.it-onderbalk .ico--lijst::before{top:5px}.it-onderbalk .ico--lijst::after{bottom:5px}
.it-onderbalk .ico--nieuw::before,.it-onderbalk .ico--nieuw::after{content:"";position:absolute;background:currentColor}
.it-onderbalk .ico--nieuw::before{left:50%;top:4px;bottom:4px;width:2px;margin-left:-1px}
.it-onderbalk .ico--nieuw::after{top:50%;left:4px;right:4px;height:2px;margin-top:-1px}
.it-onderbalk .ico--club{border-radius:4px 4px 10px 10px}
.it-onderbalk .ico--club::after{content:"";position:absolute;left:50%;top:4px;bottom:4px;width:2px;margin-left:-1px;background:currentColor}
.it-onderbalk .ico--account{border-radius:50% 50% 8px 8px}
.it-onderbalk .ico--account::after{content:"";position:absolute;left:5px;top:3px;width:8px;height:8px;border-radius:50%;border:2px solid currentColor;box-sizing:border-box}
@media (min-width:720px){.it-ingelogd main{padding-bottom:0}.it-onderbalk{display:none}}

/* App-pagina's: kop, secties (koppen en lijnen in plaats van panelen), lijsten */
.it-pagina{padding:28px 20px 64px}
.it-pagina--smal{max-width:680px}
.it-paginakop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 18px;margin-bottom:8px}
.it-paginakop h1{margin:0;font-size:var(--it-fs-h2)}
.it-paginakop .acties{display:flex;flex-wrap:wrap;gap:8px}
.it-account-raster{display:grid;gap:0}
.it-paneel,.it-sectie{padding:22px 0 26px;border-top:1px solid var(--it-lijn)}
.it-paneel:first-child,.it-sectie:first-child{border-top:0;padding-top:12px}
.it-paneel h2,.it-sectie h2{font-size:1.15rem;margin:0 0 .4em}
.it-paneel h2 small,.it-sectie h2 small{font-weight:500;color:var(--it-ink-zachter);font-size:.85rem}
.it-paneel>p,.it-sectie>p{color:var(--it-ink-zacht);margin:0 0 .6em}
.it-paneel--gevaar h2{color:var(--it-rood-diep)}
.it-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--it-lijn)}
.it-lijst li a{display:grid;grid-template-columns:5px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--it-lijn);text-decoration:none;color:inherit}
.it-lijst li a:hover strong{color:var(--it-groen-diep)}
.it-lijst .streep{align-self:stretch;border-radius:3px;background:var(--it-mist-diep)}
.it-lijst .streep--live{background:var(--it-geel)}
.it-lijst .streep--afgerond{background:var(--it-groen)}
.it-lijst .streep--concept{background:var(--it-mist-diep)}
.it-lijst strong{display:block;font-family:var(--it-font-kop);font-size:1.05rem}
.it-lijst span.meta{display:block;color:var(--it-ink-zachter);font-size:.9rem}
.it-lijst .pijl{color:var(--it-ink-zachter);font-family:var(--it-font-kop);font-weight:800}
.it-dagkop{font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--it-ink-zachter);margin:28px 0 8px}

/* Footer: kolommen (merk, uitleg en voorbeelden, de tool, contact), mobile-first. */
.it-footer{background:var(--it-navy-diep);color:var(--it-op-navy);padding:36px 0 20px;margin-top:64px}
.it-footer a{color:var(--it-wit);text-decoration:none}
.it-footer a:hover{text-decoration:underline}
.it-footer-kolommen{display:grid;gap:28px 32px}
.it-footer .it-footer-kop{color:var(--it-wit);margin:0 0 .7em;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.it-footer ul{list-style:none;margin:0;padding:0;font-size:.95rem}
.it-footer li{margin:0 0 .5em}
.it-footer-merk .it-logo{color:var(--it-wit)}
.it-footer-merk p{margin:.7em 0 0;font-size:.95rem;max-width:34ch}
.it-footer-onder{margin-top:28px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.9rem;color:var(--it-op-navy-stil)}
.it-footer-onder a,.it-footer-onder .it-linkknop{color:var(--it-op-navy)}
.it-footer-onder a:hover,.it-footer-onder .it-linkknop:hover{color:var(--it-wit)}
/* Een knop die eruitziet als een link (actie zonder adres, zoals Cookievoorkeuren). */
.it-linkknop{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--it-groen-diep);cursor:pointer;text-decoration:none}
.it-linkknop:hover{text-decoration:underline}
@media (min-width:720px){.it-footer-kolommen{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.it-footer-kolommen{grid-template-columns:1.4fr 1fr .8fr 1fr}}

/* Foutpagina's */
.it-fout{min-height:60vh;display:grid;place-items:center;text-align:center;padding:48px 20px}
.it-fout p{color:var(--it-ink-zacht);max-width:44ch}

/* Cookiebalk (alleen als er gemeten wordt) */
.it-cookiebalk{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--it-wit);border-top:1px solid var(--it-lijn);box-shadow:var(--it-schaduw-l);padding:16px 0}
.it-cookiebalk .it-wrap{display:grid;gap:12px}
.it-cookiebalk p{margin:0}
.it-cookiebalk-knoppen{display:flex;gap:10px;flex-wrap:wrap}
@media (min-width:720px){.it-cookiebalk .it-wrap{grid-template-columns:1fr auto;align-items:center}}
.it-footer-kolom{min-width:0}

/* Formulieren (overal gelijk) */
.it-form{display:grid;gap:14px;margin-top:14px}
.it-form--rij{grid-template-columns:1fr auto;align-items:center}
.it-formregel{display:grid;gap:6px;font-weight:600;font-size:.95rem}
.it-formregel small{font-weight:500;color:var(--it-ink-zachter)}
.it-veld{width:100%;padding:.85em 1em;border:1px solid var(--it-lijn);border-radius:var(--it-radius);font:inherit;background:var(--it-wit);color:var(--it-ink)}
.it-veld:disabled{background:var(--it-mist);color:var(--it-ink-zachter)}
.it-vink{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--it-ink-zacht)}
.it-vink input{margin-top:.3em;width:18px;height:18px;accent-color:var(--it-groen)}
/* Een groep keuzes (radio's) als fieldset met legend, opgemaakt als formregel. */
.it-veldgroep{border:0;margin-left:0;margin-right:0;padding:0;min-width:0;display:grid;gap:10px}
.it-veldgroep>legend{padding:0;margin:0 0 6px;font-weight:600;font-size:.95rem}
.it-honing{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.it-knop--rood{background:var(--it-rood-diep);color:var(--it-wit)}
.it-knop--rood:hover{background:var(--it-rood-donker)}

/* Kaarten (home, dashboard) */
.it-kaarten{display:grid;gap:16px}
@media (min-width:720px){.it-kaarten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.it-kaarten{grid-template-columns:repeat(4,1fr)}}
.it-kaart{background:var(--it-wit);border-radius:var(--it-radius);padding:20px;border:1px solid var(--it-lijn)}
.it-kaart h3{font-size:1.05rem}
.it-kaart p{margin:0;color:var(--it-ink-zacht);font-size:.95rem}

.it-hesjesbalk{display:flex;height:8px}
.it-hesjesbalk i{flex:1}
.it-hesjesbalk .o{background:var(--it-hesje-oranje)}.it-hesjesbalk .b{background:var(--it-hesje-blauw)}.it-hesjesbalk .ge{background:var(--it-hesje-geel)}.it-hesjesbalk .gr{background:var(--it-hesje-groen)}.it-hesjesbalk .r{background:var(--it-hesje-rood)}.it-hesjesbalk .w{background:var(--it-hesje-wit)}.it-hesjesbalk .p{background:var(--it-hesje-paars)}.it-hesjesbalk .z{background:var(--it-hesje-zwart)}
.it-footer{margin-top:0}
.it-footer-procamp{color:var(--it-op-navy-stil);font-size:.85rem}

/* Starttarief (B-039): één korte, groene toelichting bij een prijs */
.it-actie{color:var(--it-groen-diep);font-weight:700}
small.it-actie{display:block;font-size:.8rem;font-weight:600;margin-top:2px}