/* 🌐 Website van Club Kompass (licentieserver, openbare poort). */
:root { --primair: #0089C0; --licht: #00AEEF; --accent: #EC008C; --oranje: #F59F00; --groen: #2F9E44; --paars: #7048E8;
  --tekst: #0B2533; --zacht: #5B6B76; --vlak: #FFFFFF; --achter: #F4F8FB; --rand: #DCE6EE;
  --tint-blauw: #E6F6FD; --tint-roze: #FDEBF5; --tint-groen: #E9F7EC; --tint-oranje: #FFF4DB; --tint-paars: #F0ECFE; }
/* Donker: alleen met de knop (thema.js zet html.donker); standaard licht. */
html.donker { --tekst: #E6EDF2; --zacht: #9AA9B4; --vlak: #14212A; --achter: #0D171E; --rand: #26343D;
  --tint-blauw: #0F2A38; --tint-roze: #2E1426; --tint-groen: #12291A; --tint-oranje: #2E2410; --tint-paars: #1F1838; color-scheme: dark; }
.thema-knop { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rand); background: var(--vlak); font-size: 18px; cursor: pointer; display: inline-grid; place-items: center; padding: 0; }
.thema-knop:hover { border-color: var(--primair); }
/* 🌓 Schuifbalk: dezelfde planning in licht (onder) en donker (boven, afgeknipt tot de schuif). */
.schuif-vergelijk { position: relative; --pos: 50%; }
.schuif-vergelijk img { display: block; width: 100%; height: auto; }
.schuif-vergelijk .boven { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.schuif-vergelijk .lijn { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); pointer-events: none; }
.schuif-vergelijk .lijn::after { content: "☀️ ⇆ 🌙"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #0B2533; border-radius: 999px; padding: 6px 10px; font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.schuif-vergelijk input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.schuif-vergelijk input[type=range]:focus-visible + .lijn { background: var(--accent); }
.schuif-uitleg { text-align: center; margin: 8px 0 0; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); background: var(--achter); }
a { color: var(--primair); }
.binnen { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.kop { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--vlak) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rand); }
.kop .binnen { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.merk { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; color: var(--tekst); text-decoration: none; }
nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--tekst); font-weight: 600; font-size: 15px; }
/* Menuknoppen lichten op als je ze aanwijst of aanraakt. */
nav a:not(.knop) { padding: 6px 12px; border-radius: 999px; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
nav a:not(.knop):hover, nav a:not(.knop):focus-visible, nav a:not(.knop):active { background: var(--tint-blauw); color: var(--primair); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primair) 25%, transparent), 0 6px 18px color-mix(in srgb, var(--licht) 30%, transparent); }
.knop { display: inline-block; background: var(--primair); color: #fff !important; border: 0; border-radius: 12px; padding: 12px 20px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.knop.licht { background: transparent; color: var(--primair) !important; box-shadow: inset 0 0 0 2px var(--primair); }
.knop.klein { padding: 7px 14px; font-size: 14px; }
.knop:hover { filter: brightness(1.08); }
.held { position: relative; overflow: hidden; background: linear-gradient(125deg, #006E9C 0%, var(--primair) 35%, var(--licht) 65%, #C2188B 120%); color: #fff; padding: 72px 0 80px; }
.held h1 { font-size: clamp(32px, 5.2vw, 54px); line-height: 1.1; margin: 0 0 16px; max-width: 720px; letter-spacing: -.5px; }
.held .groot { font-size: 19px; max-width: 680px; margin: 0 0 24px; }
.held .knop { background: #fff; color: var(--primair) !important; }
.held .knop.licht { background: transparent; color: #fff !important; box-shadow: inset 0 0 0 2px #fff; }
.held .zacht { color: rgba(255, 255, 255, .85); font-size: 14px; margin-top: 16px; }
.knoppen { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
section.binnen { padding-top: 56px; }
h2 { font-size: 28px; margin: 0 0 12px; }
.zacht { color: var(--zacht); }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-top: 16px; }
.tegel { background: var(--vlak); border: 1px solid var(--rand); border-radius: 16px; padding: 18px; }
.tegel p { margin: 6px 0 0; color: var(--zacht); }
.pakketten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; margin-top: 18px; align-items: stretch; }
.pakket { background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pakket.uitgelicht { border: 2px solid var(--primair); box-shadow: 0 10px 30px rgba(0, 137, 192, .15); }
/* Een pakket licht op als je het aanwijst of aanraakt. */
.pakket { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pakket:hover, .pakket:focus-within, .pakket:active { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primair) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--licht) 22%, transparent), 0 16px 40px color-mix(in srgb, var(--primair) 28%, transparent); }
@media (prefers-reduced-motion: reduce) { .pakket, nav a:not(.knop) { transition: none; } .pakket:hover, .pakket:focus-within, .pakket:active { transform: none; } }
.pakket h3 { margin: 0; font-size: 21px; }
.pakket .prijs { font-size: 28px; font-weight: 800; }
.pakket .prijs small { font-size: 14px; font-weight: 600; color: var(--zacht); }
.pakket ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.pakket .plus { font-size: 13px; color: var(--zacht); font-weight: 700; }
.pakket .knop { margin-top: auto; text-align: center; }
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: 20px; margin-top: 16px; }
.formulier label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.formulier .breed { grid-column: 1 / -1; }
.formulier input, .formulier select, .formulier textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--achter); color: var(--tekst); }
.verstopt { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#aanvraagUit.goed { color: #2B8A3E; font-weight: 700; }
#aanvraagUit.fout { color: #C92A2A; font-weight: 700; }
/* 💳 Kopen en Mijn licentie */
main.binnen > h1 { margin-top: 40px; }
.groot { font-size: 18px; }
.pakket-keuze { display: grid; gap: 8px; margin: 12px 0; }
.pakket-optie { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; cursor: pointer; }
.pakket-optie span { display: grid; gap: 2px; flex: 1; }
.pakket-optie input { width: auto; }
label.pakket-optie:has(input:checked) { border-color: var(--primair); box-shadow: inset 0 0 0 1px var(--primair); }
.voorwaarden { background: var(--achter); border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; }
.voorwaarden ul { margin: 6px 0 10px; padding-left: 20px; font-size: 14px; }
.formulier label.vinkje { display: flex; gap: 8px; align-items: center; }
.formulier label.vinkje input { width: auto; }
.formulier small { font-weight: 400; }
.rij { display: flex; gap: 8px; flex-wrap: wrap; }
.rij input { flex: 1 1 240px; font: inherit; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--vlak); color: var(--tekst); }
.melding { padding: 10px 14px; border-radius: 12px; background: var(--achter); border: 1px solid var(--rand); }
.melding.goed { border-color: #2B8A3E; } .melding.fout { border-color: #C92A2A; color: #C92A2A; }
.mijn-kaart { margin: 14px 0; }
.mijn-kaart h2 { margin: 0 0 8px; } .mijn-kaart h3 { margin: 16px 0 6px; }
.mijn-gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.mijn-gegevens dt { color: var(--zacht); } .mijn-gegevens dd { margin: 0; font-weight: 600; }
/* ---------- 🌈 Voorpagina (2026-10): kleur, het product zelf en waarom het anders is ---------- */
.held .binnen { position: relative; z-index: 1; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.blob.b1 { width: 420px; height: 420px; background: #EC008C; right: -120px; top: -140px; }
.blob.b2 { width: 360px; height: 360px; background: #FFD43B; left: -140px; bottom: -200px; opacity: .35; }
.blob.b3 { width: 300px; height: 300px; background: #00E5FF; right: 30%; bottom: -180px; opacity: .35; }
.held-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
.label { display: inline-block; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; margin: 0 0 14px; }
.markeer { background: linear-gradient(transparent 64%, #FF4FB0 64%, #FFB020 100%); padding: 0 6px; border-radius: 4px; }
.kenmerken { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kenmerken li { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 5px 12px; font-size: 14px; font-weight: 600; }
.toonkast { position: relative; min-height: 380px; }
.browser { border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(6, 30, 50, .35); transform: rotate(-1.5deg); }
.browser .balk { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #EEF3F7; color: #5B6B76; font-size: 12px; }
.browser .balk i { width: 10px; height: 10px; border-radius: 50%; background: #FF6B6B; } .browser .balk i:nth-child(2) { background: #FCC419; } .browser .balk i:nth-child(3) { background: #51CF66; }
.browser .balk span { margin-left: 10px; background: #fff; border-radius: 6px; padding: 2px 10px; }
.browser img, .telefoon img, .scherm img { display: block; width: 100%; height: auto; }
.telefoon { position: absolute; right: -10px; bottom: -40px; width: 34%; border: 8px solid #111; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 60px rgba(6, 30, 50, .45); transform: rotate(4deg); background: #111; aspect-ratio: 9 / 18; }
.telefoon img { height: 100%; object-fit: cover; object-position: top; }
.push { position: absolute; left: -24px; bottom: -24px; width: min(300px, 70%); background: rgba(255, 255, 255, .96); color: #0B2533; border-radius: 16px; padding: 12px 14px; box-shadow: 0 18px 40px rgba(6, 30, 50, .35); display: grid; gap: 2px; font-size: 14px; animation: zweef 5s ease-in-out infinite; }
.push span { color: #5B6B76; font-size: 13px; }
.push div { display: flex; gap: 6px; margin-top: 8px; }
.push em { font-style: normal; font-weight: 700; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: #E6F6FD; color: #0089C0; }
.push em + em { background: #FDEBF5; color: #C2188B; }
@keyframes zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .push { animation: none; } }

.herkenbaar { text-align: center; }
.pijn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin-top: 18px; text-align: left; }
.pijn div { background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: 18px; }
.pijn span { font-size: 30px; }
.pijn p { margin: 6px 0 0; color: var(--zacht); }
.dus { font-size: 20px; font-weight: 700; margin: 26px auto 0; max-width: 640px; color: var(--primair); }

/* Kleurvlakken lopen zacht in en uit (geen harde rand met de achtergrond). */
/* Gekleurde vlakken lopen zacht in en uit (doorzichtig aan de randen), zodat de gloed van de pagina erdoor blijft lopen. */
.kleurvlak { background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--tint-blauw) 75%, transparent) 260px, color-mix(in srgb, var(--tint-blauw) 75%, transparent) calc(100% - 260px), transparent 100%); margin-top: 24px; padding: 88px 0 24px; }
.kleurvlak.roze { background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--tint-roze) 70%, transparent) 240px, color-mix(in srgb, var(--tint-roze) 70%, transparent) calc(100% - 240px), transparent 100%); }
.toon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px; align-items: center; margin: 36px 0 56px; }
.toon.omgekeerd .tekst { order: 2; }
.toon h3 { font-size: 26px; margin: 10px 0 8px; line-height: 1.2; }
.toon p { color: var(--zacht); margin: 0 0 12px; }
.pil { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; }
.pil.blauw { background: var(--tint-blauw); color: var(--primair); } .pil.roze { background: var(--tint-roze); color: #C2188B; }
.pil.groen { background: var(--tint-groen); color: var(--groen); } .pil.oranje { background: var(--tint-oranje); color: #C77700; }
.pil.paars { background: var(--tint-paars); color: var(--paars); }
.vink { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.vink li::before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--groen); color: #fff; font-size: 12px; font-weight: 800; margin-right: 8px; }
.scherm { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--rand); box-shadow: 0 24px 50px rgba(6, 30, 50, .18); background: #fff; }
.scherm.telefoonvorm { max-width: 290px; justify-self: center; border: 8px solid #111; border-radius: 30px; aspect-ratio: 9 / 18; }
.scherm.telefoonvorm img { height: 100%; object-fit: cover; object-position: top; }

.intro { color: var(--zacht); font-size: 18px; margin: 0 0 18px; }
.uniek { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 16px; }
.uniek .kaart { border-radius: 20px; padding: 22px; border: 1px solid var(--rand); background: var(--vlak); position: relative; overflow: hidden; }
.uniek .kaart::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; }
.uniek .k1 { background: var(--tint-groen); } .uniek .k1::before { background: var(--groen); }
.uniek .k2 { background: var(--tint-blauw); } .uniek .k2::before { background: var(--primair); }
.uniek .k3 { background: var(--tint-roze); } .uniek .k3::before { background: var(--accent); }
.uniek .k4 { background: var(--tint-paars); } .uniek .k4::before { background: var(--paars); }
.uniek .k5 { background: var(--tint-oranje); } .uniek .k5::before { background: var(--oranje); }
.uniek .k6 { background: var(--tint-roze); } .uniek .k6::before { background: linear-gradient(90deg, var(--accent), var(--oranje)); }
.uniek .ico { font-size: 34px; }
.uniek h3 { margin: 8px 0 6px; font-size: 19px; }
.uniek p { margin: 0; color: var(--zacht); }
.vergelijk { margin-top: 28px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 20px; padding: 8px 18px 14px; overflow-x: auto; }
.vergelijk table { width: 100%; border-collapse: collapse; min-width: 560px; }
.vergelijk th, .vergelijk td { padding: 10px 8px; border-bottom: 1px solid var(--rand); text-align: center; }
.vergelijk td:first-child, .vergelijk th:first-child { text-align: left; }
.vergelijk .wij { background: var(--tint-blauw); color: var(--primair); font-weight: 800; }
.vergelijk tr:last-child td { border-bottom: 0; }
.oordeel { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.oordeel.ja { background: var(--tint-groen); color: var(--groen); }
.oordeel.deels { background: var(--tint-oranje); color: #B86E00; }
.oordeel.nee { background: transparent; color: var(--zacht); font-weight: 600; }
.klein { font-size: 13px; }

.stappen { list-style: none; counter-reset: stap; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.stappen li { counter-increment: stap; background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: 18px; display: grid; gap: 4px; align-content: start; }
.stappen li::before { content: counter(stap); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tint-blauw); color: var(--primair); border: 1px solid color-mix(in srgb, var(--primair) 30%, transparent); font-weight: 800; margin-bottom: 6px; }
.stappen span { color: var(--zacht); }

/* Pakketten naast elkaar; past het niet, dan horizontaal schuiven (met snap). */
/* Alleen de pakketten zelf mogen breder dan de rest (vijf naast elkaar); de kop en tekst blijven in de lijn. */
#pakketten.binnen { max-width: 1320px; }
#pakketten > h2, #pakketten > p { max-width: 1048px; margin-left: auto; margin-right: auto; }
.pakketten { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 14px; scrollbar-width: thin; }
.pakketten > * { scroll-snap-align: start; }
.pakket { position: relative; }
.pakket .lint { position: absolute; top: -1px; right: 16px; background: linear-gradient(135deg, var(--accent), var(--oranje)); color: #fff; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 0 0 10px 10px; }
.pakket h3 { display: flex; align-items: center; gap: 8px; }
.pakket .kop-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tint-blauw); font-size: 22px; }
.pakket:nth-child(2) .kop-ico { background: var(--tint-roze); } .pakket:nth-child(3) .kop-ico { background: var(--tint-groen); }
.pakket:nth-child(4) .kop-ico { background: var(--tint-oranje); } .pakket:nth-child(5) .kop-ico { background: var(--tint-paars); }
.schuif-hint { display: none; }
/* 🪜 Pakketten stapelen: balkje (hoe ver) en de pakketten die er al in zitten. */
.trap { display: flex; align-items: center; gap: 10px; }
.loper { flex: 1; height: 8px; border-radius: 999px; background: var(--rand); overflow: hidden; }
.loper i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #F2B705, #FFD43B); box-shadow: 0 0 8px rgba(242, 183, 5, .45); }
.trap-tekst { font-size: 12px; font-weight: 700; color: var(--zacht); white-space: nowrap; }
.inclusief { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; align-items: center; background: var(--tint-groen); border-radius: 12px; padding: 8px 10px; }
.inclusief.basis { background: var(--tint-blauw); } .inclusief.basis .inclusief-kop { color: var(--primair); }
/* Alles op één lijn: de kaarten delen de rijen van het raster (subgrid): naam, prijs, uitleg, trapje, inclusief, kopje, lijst, knop. */
@supports (grid-template-rows: subgrid) {
  .pakketten { grid-template-rows: repeat(8, auto); row-gap: 0; }
  .pakket { grid-row: 1 / span 8; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 10px; align-content: start; }
  .pakket ul { align-content: start; }
  .pakket .knop { align-self: end; }
}
.inclusief-kop { font-size: 12px; font-weight: 800; color: var(--groen); width: 100%; }
.inclusief-tag { font-size: 12px; font-weight: 700; background: var(--vlak); border-radius: 999px; padding: 2px 8px; }
.stapel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-weight: 700; }
.stapel span { background: var(--vlak); border: 1px solid var(--rand); border-radius: 999px; padding: 4px 12px; }
.stapel b { color: var(--accent); }

.vragen { display: grid; gap: 10px; margin-top: 14px; }
.vragen details { background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; padding: 14px 18px; }
.vragen summary { cursor: pointer; font-weight: 700; }
.vragen details p { margin: 8px 0 0; color: var(--zacht); }
.vragen details[open] { border-color: var(--primair); }

@media (max-width: 900px) {
  .held-raster, .toon { grid-template-columns: 1fr; }
  .toon.omgekeerd .tekst { order: 0; }
  .toonkast { min-height: 0; margin: 10px 8px 50px; }
  .schuif-hint { display: block; }
}
@media (max-width: 1220px) { .schuif-hint { display: block; } }
.pakket .prijs { font-size: 26px; }

/* ---------- 📚 Handleiding (/docs/) ---------- */
.docs { max-width: 1240px; margin: 0 auto; padding: 24px 16px 0; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.docs-menu { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow: auto; background: var(--vlak); border: 1px solid var(--rand); border-radius: 18px; padding: 12px; }
.docs-zoek input { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--achter); color: var(--tekst); }
.docs-menu nav { display: block; }
.docs-versie[hidden] { display: none; }
.docs-versie { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--zacht); }
.docs-versie select { flex: 1; font: inherit; padding: 6px 8px; border: 1px solid var(--rand); border-radius: 8px; background: var(--achter); color: var(--tekst); }
.docs-info { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.docs-info .docs-wie { margin: 0; }
.docs-bijgewerkt { font-size: 13px; font-weight: 700; color: var(--zacht); background: var(--achter); border: 1px solid var(--rand); border-radius: 999px; padding: 3px 10px; }
.docs-suggestie { margin-top: 28px; background: var(--vlak); border: 1px dashed var(--rand); border-radius: 14px; padding: 12px 16px; }
.docs-suggestie summary { cursor: pointer; font-weight: 700; color: var(--primair); }
.docs-suggestie-binnen { margin-top: 10px; display: grid; gap: 8px; }
.docs-suggestie textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px; background: var(--achter); color: var(--tekst); width: 100%; }
.docs-suggestie-dank { color: var(--groen); font-weight: 700; }
/* Stijlvol maar speels: elk stapnummer een eigen zachte pastelkleur (blauw, roze, groen, oranje, paars). */
.stappen li:nth-child(5n+2)::before, .docs-stappen > li:nth-child(5n+2)::before { background: var(--tint-roze); color: #C2188B; border-color: rgba(194, 24, 139, .3); }
.stappen li:nth-child(5n+3)::before, .docs-stappen > li:nth-child(5n+3)::before { background: var(--tint-groen); color: var(--groen); border-color: rgba(47, 158, 68, .3); }
.stappen li:nth-child(5n+4)::before, .docs-stappen > li:nth-child(5n+4)::before { background: var(--tint-oranje); color: #B86E00; border-color: rgba(184, 110, 0, .3); }
.stappen li:nth-child(5n+5)::before, .docs-stappen > li:nth-child(5n+5)::before { background: var(--tint-paars); color: var(--paars); border-color: rgba(112, 72, 232, .3); }
.docs-groep { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); margin: 14px 8px 4px; }
.docs-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; color: var(--tekst); text-decoration: none; font-size: 14px; font-weight: 600; }
.docs-link:hover { background: var(--achter); }
.docs-link.aan { background: var(--tint-blauw); color: var(--primair); }
.docs-ico { width: 22px; text-align: center; }
.docs-aantal { margin-left: auto; font-size: 11px; font-weight: 800; background: var(--tint-groen); color: var(--groen); border-radius: 999px; padding: 0 7px; }
.docs-inhoud { min-width: 0; }
.docs-inhoud h1 { font-size: clamp(26px, 3.5vw, 34px); margin: 0 0 8px; line-height: 1.2; }
.docs-inhoud h2 { font-size: 21px; margin: 28px 0 10px; }
.docs-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-top: 18px; }
.docs-tegel { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 16px; text-decoration: none; color: var(--tekst); }
.docs-tegel:hover { border-color: var(--primair); box-shadow: 0 8px 24px rgba(0, 137, 192, .12); }
.docs-tegel-ico { font-size: 26px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--tint-blauw); flex: none; }
.docs-tegel-tekst { display: grid; } .docs-tegel-tekst small { color: var(--zacht); }
.docs-kop { display: flex; gap: 14px; align-items: center; }
.docs-kop-ico { font-size: 34px; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: var(--tint-blauw); flex: none; }
.docs-pakket { display: inline-block; font-size: 13px; font-weight: 700; background: var(--tint-oranje); color: #B86E00; border-radius: 999px; padding: 2px 10px; }
.docs-gidsen { display: grid; gap: 8px; }
.docs-gids-link { display: grid; gap: 2px; padding: 12px 16px; background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; text-decoration: none; color: var(--tekst); }
.docs-gids-link:hover { border-color: var(--primair); }
.docs-gids-link small { color: var(--zacht); }
.docs-onderdelen { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.docs-onderdelen li { background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; padding: 10px 14px; }
.docs-onderdelen p { margin: 4px 0 0; color: var(--zacht); font-size: 14px; }
.docs-tag { margin-left: 8px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; background: var(--tint-blauw); color: var(--primair); }
.docs-tag.uit { background: var(--achter); color: var(--zacht); }
.docs-binnenkort { margin-top: 24px; padding: 14px 16px; border-radius: 14px; background: var(--tint-oranje); }
.docs-pad { font-size: 14px; margin: 0 0 6px; } .docs-pad a { text-decoration: none; }
.docs-wie { background: var(--tint-blauw); border-radius: 12px; padding: 8px 12px; display: inline-block; margin: 4px 0 6px; }
/* Stappen strak in één kaart: rijen met een dunne lijn ertussen, het nummer op de eerste regel. */
.docs-stappen { counter-reset: s; list-style: none; padding: 0; margin: 16px 0; background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; }
.docs-stappen > li { counter-increment: s; position: relative; padding: 11px 16px 11px 52px; border-bottom: 1px solid var(--rand); line-height: 1.5; }
.docs-stappen > li:last-child { border-bottom: 0; }
.docs-stappen > li::before { content: counter(s); position: absolute; left: 14px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--primair); background: var(--tint-blauw); border: 1px solid color-mix(in srgb, var(--primair) 30%, transparent); }
.docs-beeld { margin: 12px 0 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--rand); }
.docs-beeld img { display: block; width: 100%; height: auto; }
.ui { display: inline-block; font-weight: 700; font-size: .92em; background: var(--tint-blauw); color: var(--primair); border-radius: 8px; padding: 0 7px; white-space: nowrap; }
.docs-tip { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--tint-groen); border-left: 4px solid var(--groen); }
.docs-verder { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 860px) { .docs { grid-template-columns: 1fr; } .docs-menu { position: static; max-height: 300px; } }
@media (max-width: 640px) { .docs-menu nav a.docs-link { display: flex; } }

footer { margin-top: 64px; padding: 24px 0; border-top: 1px solid var(--rand); color: var(--zacht); font-size: 14px; }
@media (max-width: 640px) { .formulier { grid-template-columns: 1fr; } nav a:not(.knop) { display: none; } .held { padding: 48px 0; } }

/* Glaseffect zoals in de app: zachte kleurvlekken achter de pagina, kaarten half doorschijnend. */
body { background-color: #EAF6FC;
  background-image: radial-gradient(42vw 42vw at 8% 18%, rgba(0,174,239,.30), transparent 62%),
                    radial-gradient(36vw 36vw at 92% 28%, rgba(236,0,140,.16), transparent 62%),
                    radial-gradient(48vw 48vw at 55% 105%, rgba(0,137,192,.24), transparent 62%);
  background-attachment: fixed; }
html.donker body { background-color: #0E171D;
  background-image: radial-gradient(42vw 42vw at 8% 18%, rgba(0,137,192,.22), transparent 62%),
                    radial-gradient(36vw 36vw at 92% 28%, rgba(236,0,140,.12), transparent 62%),
                    radial-gradient(48vw 48vw at 55% 105%, rgba(0,100,150,.20), transparent 62%); }
:is(.tegel, .pakket, .formulier, .pakket-optie, .docs-menu, .docs-tegel, .docs-gids-link, .docs-onderdelen li, .docs-stappen, .docs-suggestie) {
  background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%);
  border-color: rgba(255,255,255,.75); box-shadow: 0 8px 30px rgba(0,60,90,.10), inset 0 1px 0 rgba(255,255,255,.85); }
html.donker :is(.tegel, .pakket, .formulier, .pakket-optie, .docs-menu, .docs-tegel, .docs-gids-link, .docs-onderdelen li, .docs-stappen, .docs-suggestie) {
  background: rgba(23,35,43,.62); border-color: rgba(255,255,255,.08); box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }/* Subtiele scrollbalk in het docs-menu: dun, pas zichtbaar bij aanwijzen. */
.docs-menu { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.docs-menu:hover { scrollbar-color: color-mix(in srgb, var(--zacht) 35%, transparent) transparent; }
.docs-menu::-webkit-scrollbar { width: 6px; }
.docs-menu::-webkit-scrollbar-track { background: transparent; }
.docs-menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.docs-menu:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--zacht) 35%, transparent); }
/* 🎭 Persoonlijke demo: modules als vinkjes in kolommen, kleur en logo. */
.demo-modules { border: 1px solid var(--rand); border-radius: 12px; padding: 10px 14px; margin: 0; }
.demo-modules legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.vinkjes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 6px 14px; }
.vinkjes .vinkje { font-weight: 500; font-size: 14px; }
.formulier input[type=color] { height: 42px; padding: 4px; cursor: pointer; }
.formulier input[type=file] { padding: 8px; }

/* 🔔 Inschrijven voor de opening (zolang kopen dicht is). */
.formulier.opening { margin-top: 24px; } .formulier.opening h3 { margin: 0 0 4px; } #openingMelding { margin-top: 20px; }
#openingUit.goed { color: #2B8A3E; font-weight: 700; } #openingUit.fout { color: #C92A2A; font-weight: 700; }

/* 📚 Een pagina van de handleiding als echte HTML (docs/pagina.html, voor zoekmachines): dezelfde stijl als de interactieve. */
.docs-statisch > ol { counter-reset: s; list-style: none; padding: 0; margin: 16px 0; background: var(--vlak); border: 1px solid var(--rand); border-radius: 14px; overflow: hidden; }
.docs-statisch > ol > li { counter-increment: s; position: relative; padding: 11px 16px 11px 52px; border-bottom: 1px solid var(--rand); line-height: 1.5; }
.docs-statisch > ol > li:last-child { border-bottom: 0; }
.docs-statisch > ol > li::before { content: counter(s); position: absolute; left: 14px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--primair); background: var(--tint-blauw); }
.docs-statisch img { display: block; max-width: 100%; height: auto; margin: 12px 0 0; border-radius: 12px; border: 1px solid var(--rand); }
.docs-statisch code { display: inline-block; font: inherit; font-weight: 700; font-size: .92em; background: var(--tint-blauw); color: var(--primair); border-radius: 8px; padding: 0 7px; white-space: nowrap; }
.docs-statisch blockquote { margin: 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--tint-groen); border-left: 4px solid var(--groen); }
.docs-statisch blockquote p { margin: 0; }
.docs-menu-kop { font-weight: 800; margin: 4px 6px 8px; } .docs-menu-kop a { color: inherit; text-decoration: none; }
.docs-statisch-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.docs-statisch-lijst a { display: block; padding: 6px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.docs-statisch-lijst a:hover, .docs-statisch-lijst .aan a { background: var(--tint-blauw); color: var(--primair); }