:root {
    --brand-primary: #1c6f94;
    --brand-accent: #2f93b0;
    --brand-bg: #0f1b2a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.reg-shell {
    min-height: 100vh;
    background-color: var(--brand-bg, #0f1b2a);
    background-image: var(--brand-bg-image, none);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.reg-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem 2.25rem;
    width: min(100%, 480px);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    color: #1f2937;
}

.reg-logo { max-height: 56px; margin-bottom: 1rem; }
.reg-card h1 { margin: 0 0 .75rem; font-size: 1.4rem; color: var(--brand-primary, #1c6f94); }
.reg-intro { margin: 0 0 1rem; color: #374151; }
.reg-muted { color: #6b7280; }
.reg-note { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: .6rem .75rem; font-size: .88rem; color: #9a3412; }
.reg-err { color: #b91c1c; font-size: .9rem; }
.reg-code { font-size: 1.05rem; }

.reg-form { display: flex; flex-direction: column; gap: .7rem; margin-top: .5rem; }
.reg-form label { display: flex; flex-direction: column; font-size: .82rem; font-weight: 700; gap: .25rem; color: #374151; }
.reg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.reg-input {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    font-size: .95rem;
    font-weight: 400;
}
.reg-input:focus { outline: 2px solid var(--brand-accent, #2f93b0); border-color: transparent; }

.reg-btn {
    margin-top: .6rem;
    padding: .75rem;
    border: 0;
    border-radius: 10px;
    background: var(--brand-accent, #2f93b0);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
}
.reg-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 420px) { .reg-grid2 { grid-template-columns: 1fr; } }

/* Meervoudige keuze (dagen / rollen): even brede tegels, vinkje links, tekst ernaast (ook bij lange namen). */
.reg-group { display:flex; flex-direction:column; gap:.45rem; }
.reg-group__label { display:flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:700; color:#374151; }
.reg-group__count { min-width:1.35rem; height:1.35rem; padding:0 .35rem; border-radius:999px; background:var(--brand-accent,#2f93b0); color:#fff;
                    font-size:.72rem; display:inline-flex; align-items:center; justify-content:center; }
/* Smalle tegels (150px): twee kolommen op de telefoon en in de kaart, drie of meer op een breed scherm. */
.reg-choices { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap:.4rem; min-width:0; }
.reg-form label.reg-choice, .reg-choice { display:flex; flex-direction:row; align-items:center; gap:.5rem; min-height:44px; min-width:0; box-sizing:border-box; padding:.4rem .6rem;
              border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#1f2937; font-size:.92rem; font-weight:500;
              line-height:1.25; text-align:left; cursor:pointer; transition:border-color .12s, background .12s; }
.reg-choice:hover { border-color:#9ca3af; }
.reg-choice:focus-within { outline:2px solid var(--brand-accent,#2f93b0); outline-offset:1px; }
.reg-choice.is-on, .reg-form label.reg-choice.is-on { border-color:var(--brand-accent,#2f93b0);
              background:color-mix(in srgb, var(--brand-accent,#2f93b0) 9%, #fff); font-weight:600; }
.reg-choice input { flex:0 0 auto; width:18px; height:18px; margin:0; accent-color:var(--brand-accent,#2f93b0); }
/* Lange woorden op lettergrenzen afbreken met een koppelteken (taal uit <html lang>), niet midden in een woord zonder streepje. */
.reg-choice__text { display:flex; flex-direction:column; min-width:0; overflow-wrap:break-word; hyphens:manual; }
.reg-choice__sub { font-size:.75rem; font-weight:500; color:#6b7280; }
@media (max-width: 420px) { .reg-choices { grid-template-columns:repeat(2, minmax(0, 1fr)); } .reg-form label.reg-choice, .reg-choice { font-size:.88rem; padding:.45rem .6rem; } }
@media (max-width: 380px) { .reg-choices { gap:.3rem; } .reg-form label.reg-choice, .reg-choice { font-size:.85rem; gap:.4rem; padding:.45rem .45rem; } }

/* Klasseweergave (docs/12): kaarten (m) en pakketten (l) — naam, tekst, benefits, prijs; "Meer informatie" eronder. */
.reg-ccards { display:flex; flex-direction:column; gap:.6rem; }
.reg-ccard { position:relative; border:1px solid #d1d5db; border-left:4px solid #d1d5db; border-radius:12px; background:#fff;
             transition:border-color .12s, background .12s, box-shadow .12s; }
.reg-ccard:hover { border-color:#9ca3af; }
.reg-ccard.is-on { border-color:var(--brand-accent,#2f93b0); border-left-color:var(--brand-primary,#1c6f94);
                   background:color-mix(in srgb, var(--brand-accent,#2f93b0) 7%, #fff); box-shadow:0 4px 14px rgba(15,27,42,.08); }
.reg-ccard.is-full { opacity:.6; }
.reg-ccard__pick { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:start; gap:.75rem; width:100%; padding:.8rem .95rem; border:0; background:none; font:inherit;
                   color:#1f2937; text-align:left; cursor:pointer; border-radius:12px; }
.reg-ccard__pick:disabled { cursor:not-allowed; }
.reg-ccard__pick:focus-visible { outline:2px solid var(--brand-accent,#2f93b0); outline-offset:2px; }
.reg-ccard__mark { flex:0 0 auto; width:22px; height:22px; margin-top:.1rem; border:2px solid #9ca3af; border-radius:6px; color:#fff;
                   display:inline-flex; align-items:center; justify-content:center; }
.reg-ccard__mark--radio { border-radius:999px; }
.reg-ccard.is-on .reg-ccard__mark { background:var(--brand-accent,#2f93b0); border-color:var(--brand-accent,#2f93b0); }
.reg-ccard__main { flex:1 1 auto; display:flex; flex-direction:column; gap:.25rem; min-width:0; overflow-wrap:break-word; }
.reg-ccard__name { font-weight:700; font-size:1rem; color:#111827; }
.reg-ccard__sum { font-size:.88rem; color:#4b5563; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.reg-ccard__benefitline { font-size:.82rem; color:#4b5563; }
.reg-ccard__benefits { margin:.2rem 0 0; padding-left:1.1rem; font-size:.9rem; color:#374151; line-height:1.45; }
.reg-ccard__note { font-size:.78rem; font-weight:600; color:#b45309; }
.reg-ccard__price { margin-left:.5rem; font-weight:800; font-size:1.05rem; color:var(--brand-primary,#1c6f94); white-space:nowrap; }
.reg-ccard__more { display:inline-block; margin:-.35rem 0 .7rem calc(.95rem + 22px + .75rem); font-size:.85rem; }
/* Pakketten: groter, volledige tekst, prijs prominent. */
.reg-ccards--l .reg-ccard__pick { padding:1.15rem 1.25rem; }
.reg-ccards--l .reg-ccard__name { font-size:1.25rem; }
.reg-ccards--l .reg-ccard__sum { font-size:.95rem; -webkit-line-clamp:unset; display:block; }
.reg-ccards--l .reg-ccard__price { font-size:1.45rem; align-self:center; }
.reg-ccard__body { font-size:.92rem; color:#4b5563; line-height:1.5; }
.reg-ccard__body > :first-child { margin-top:0; } .reg-ccard__body > :last-child { margin-bottom:0; }
.reg-ccards--l .reg-ccard__more { margin-left:calc(1.25rem + 22px + .75rem); }
@media (max-width: 520px) {
    .reg-ccard__pick { grid-template-columns:22px minmax(0,1fr); }
    .reg-ccard__price, .reg-ccards--l .reg-ccard__price { grid-column:2; margin-left:0; align-self:start; }
}
/* "Meer informatie": venster met de uitgebreide omschrijving. */
.reg-info { padding:1rem 1.25rem; }
.reg-info__sum { font-weight:600; margin-top:0; }
.reg-info__price { font-weight:800; font-size:1.2rem; color:var(--brand-primary,#1c6f94); }

/* ── Vergunning / veiligheid: publieke view ─────────────────────────────── */
.permit-shell { max-width: 900px; margin: 0 auto; padding: 1.25rem 1rem 3rem; color: #16202c; }
.permit-head h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.permit-muted { color: #5a6775; font-size: .9rem; }
.permit-sec { margin-top: 1.5rem; }
.permit-sec h2 { font-size: 1.15rem; border-bottom: 2px solid #e4e9ee; padding-bottom: .25rem; }
.permit-sec h3 { font-size: .95rem; margin: .75rem 0 .25rem; color: #39485a; }
.permit-map { height: 420px; border: 1px solid #d7dee5; border-radius: 8px; overflow: hidden; }
.permit-legend { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.permit-chip { background: #eef3f7; border: 1px solid #d7dee5; border-radius: 999px; padding: .15rem .6rem; font-size: .82rem; }
.permit-chip strong { margin-left: .25rem; }
.permit-table { width: 100%; border-collapse: collapse; margin-top: .4rem; }
.permit-table th, .permit-table td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid #edf1f4; font-size: .9rem; }
.permit-table th { color: #5a6775; font-weight: 600; }
.permit-num { text-align: right; font-variant-numeric: tabular-nums; }
.permit-days { margin: .25rem 0; padding-left: 1.1rem; }
.permit-days li { font-size: .9rem; }
.permit-foot { margin-top: 2rem; border-top: 1px solid #e4e9ee; padding-top: .75rem; }

/* Formulierconfig (063): adres-/ouderblokken, veldfouten, vinkjes */
.reg-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; }
.reg-err--field { display: block; font-size: .8rem; margin-top: .2rem; font-weight: 500; }
.reg-check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.reg-check input { width: auto; }
@media (max-width: 420px) { .reg-grid3 { grid-template-columns: 1fr; } }
.reg-ok { color: #15803d; font-weight: 600; }
.reg-btn--ghost { background: transparent; color: inherit; border: 1px solid currentColor; margin-left: .5rem; }
.reg-step-title { font-size: 1.15rem; margin: .2rem 0 .8rem; }
.reg-step-sub { font-size: 1rem; margin: 1rem 0 .4rem; }

/* ── Eventkaart (docs/16): huisstijl van het event (--em-brand / --em-accent) + licht/donker ── */
:root {
    --em-brand: #1f2937; --em-accent: #2f93b0;
    --em-bg: #f4f6f8; --em-panel: #ffffff; --em-text: #0f172a; --em-muted: #64748b; --em-line: #e2e8f0; --em-hover: #eef2f7; --em-input: #ffffff;
}
.em-page {
    display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--em-bg); color: var(--em-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.em-page[data-theme="dark"] {
    --em-bg: #0b1220; --em-panel: #111a2b; --em-text: #e5e7eb; --em-muted: #94a3b8; --em-line: #1f2a3d; --em-hover: #1a2537; --em-input: #0b1220;
}
@media (prefers-color-scheme: dark) {
    .em-page[data-theme="auto"] {
        --em-bg: #0b1220; --em-panel: #111a2b; --em-text: #e5e7eb; --em-muted: #94a3b8; --em-line: #1f2a3d; --em-hover: #1a2537; --em-input: #0b1220;
    }
}
/* Links op de openbare pagina's (kaart, uitslagen): accentkleur, in donker lichter; ook bezocht. Specificiteit 0. */
.em-page :where(a), .em-page :where(a:visited) { color: var(--em-accent); }
.em-page[data-theme="dark"] :where(a), .em-page[data-theme="dark"] :where(a:visited) { color: color-mix(in srgb, var(--em-accent) 60%, #fff); }
@media (prefers-color-scheme: dark) { .em-page[data-theme="auto"] :where(a), .em-page[data-theme="auto"] :where(a:visited) { color: color-mix(in srgb, var(--em-accent) 60%, #fff); } }
.em-head { display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; background: var(--em-brand); color: #fff; min-height: 3.2rem; box-sizing: border-box; }
.em-head h1 { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-head__sub { font-weight: 400; opacity: .8; }
.em-logo { height: 2.2rem; max-width: 9rem; object-fit: contain; border-radius: 6px; flex: none; }
.em-logo--light { background: #fff; padding: .2rem .35rem; }
.em-logo--dark { background: #111827; padding: .2rem .35rem; }
.em-themebtn { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; cursor: pointer; }
.em-themebtn:hover { background: rgba(255,255,255,.25); }
.em-crewtag { display: inline-block; margin-left: .5rem; padding: .05rem .5rem; border-radius: 999px; background: #f59e0b; color: #1f2937; font-size: .72rem; font-weight: 700; vertical-align: middle; }
.em-body { flex: 1; display: grid; grid-template-columns: 1fr 19rem; min-height: 0; }
.em-map { width: 100%; height: 100%; min-height: 320px; background: var(--em-bg); }
.em-list { overflow-y: auto; background: var(--em-panel); border-left: 1px solid var(--em-line); padding: .5rem; }
.em-search { width: 100%; box-sizing: border-box; padding: .45rem .6rem; border: 1px solid var(--em-line); border-radius: 8px; margin-bottom: .4rem; font-size: .9rem; background: var(--em-input); color: var(--em-text); }
.em-search:focus { outline: 2px solid var(--em-accent); border-color: transparent; }
.em-item { display: flex; gap: .55rem; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: .35rem .4rem; cursor: pointer; color: inherit; font: inherit; }
.em-item:hover { background: var(--em-hover); }
.em-item.is-open { background: var(--em-hover); box-shadow: inset 3px 0 0 var(--em-accent); }
.em-item__txt { display: grid; min-width: 0; }
.em-item__txt small { color: var(--em-muted); }
.em-item__txt .em-crewtag { margin: .15rem 0 0; justify-self: start; }
.em-muted { color: var(--em-muted); }
.em-empty { max-width: 34rem; margin: 3rem auto; padding: 0 1rem; }
@media (max-width: 760px) { .em-body { grid-template-columns: 1fr; grid-template-rows: 62vh auto; } .em-list { border-left: 0; border-top: 1px solid var(--em-line); } }
.em-ctrl { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: var(--em-panel); color: var(--em-text); border: 2px solid rgba(0,0,0,.2); border-radius: 4px; cursor: pointer; font-size: 16px; margin-bottom: 4px; }
.em-ctrl.is-on { background: var(--em-brand); color: #fff; }
.em-pop { min-width: 180px; max-width: 280px; font-size: .84rem; }
.em-pop__title { font-weight: 800; font-size: .95rem; }
.em-pop__sub { color: var(--em-muted); margin-top: .1rem; }
.em-pop__crew { display: inline-block; margin-top: .25rem; padding: 0 .45rem; border-radius: 999px; background: #f59e0b; color: #1f2937; font-size: .7rem; font-weight: 700; }
.em-pop__chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.em-pop__chips span { background: var(--em-hover); border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-weight: 600; }
.em-pop__body { margin-top: .4rem; }
.em-pop__body img { max-width: 100%; height: auto; }
.em-pop__body a { color: var(--em-accent); }
.em-pop__cal { margin-top: .45rem; border-top: 1px solid var(--em-line); padding-top: .3rem; }
.em-pop__day { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--em-muted); margin: .3rem 0 .1rem; }
.em-pop__row { display: flex; gap: .5rem; padding: .05rem 0; }
.em-pop__row span:first-child { flex-shrink: 0; width: 5.2rem; color: var(--em-muted); font-variant-numeric: tabular-nums; }
.em-share { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 3000; background: var(--em-panel, #fff); color: var(--em-text, #0f172a); border: 1px solid var(--em-line, #cbd5e1); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2); padding: .5rem; display: flex; gap: .4rem; align-items: center; max-width: 92vw; }
.em-share input { width: min(60vw, 420px); border: 1px solid var(--em-line, #cbd5e1); border-radius: 6px; padding: .35rem .5rem; font-size: .8rem; background: var(--em-input, #fff); color: inherit; }
.em-share button { border: 0; border-radius: 6px; padding: .35rem .7rem; background: var(--em-brand, #1f2937); color: #fff; cursor: pointer; }
.em-share .em-share__x { background: transparent; color: var(--em-muted, #64748b); }
/* Donker: Leaflet-bediening, popups en de straatkaart (OSM) mee; satelliet blijft ongemoeid. */
.em-page[data-theme="dark"] .leaflet-bar a, .em-page[data-theme="dark"] .leaflet-popup-content-wrapper, .em-page[data-theme="dark"] .leaflet-popup-tip { background: var(--em-panel); color: var(--em-text); }
.em-page[data-theme="dark"] .leaflet-control-attribution { background: rgba(17,26,43,.8); color: var(--em-muted); }
.em-page[data-theme="dark"] .leaflet-control-attribution a { color: var(--em-muted); }
.em-page[data-theme="dark"] .em-osm { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }
@media (prefers-color-scheme: dark) {
    .em-page[data-theme="auto"] .leaflet-bar a, .em-page[data-theme="auto"] .leaflet-popup-content-wrapper, .em-page[data-theme="auto"] .leaflet-popup-tip { background: var(--em-panel); color: var(--em-text); }
    .em-page[data-theme="auto"] .leaflet-control-attribution { background: rgba(17,26,43,.8); color: var(--em-muted); }
    .em-page[data-theme="auto"] .leaflet-control-attribution a { color: var(--em-muted); }
    .em-page[data-theme="auto"] .em-osm { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.9); }
}
/* Routes (077) */
.em-list__head { margin: .55rem .4rem .2rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--em-muted); }
.em-item--route { display: flex; align-items: center; gap: .35rem; padding: 0 0 0 .4rem; cursor: default; }
.em-item--route input { accent-color: var(--em-accent); flex: none; }
.em-item__btn { display: flex; gap: .55rem; align-items: center; flex: 1; min-width: 0; background: none; border: 0; padding: .35rem .3rem; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.em-swatch { flex: none; width: 26px; height: 6px; border-radius: 3px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.15); }
.em-badge { display: inline-block; transform: translate(-50%, -50%); white-space: nowrap; padding: .05rem .4rem; border-radius: 999px; font: 700 11px/1.4 system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.em-pop__dist { margin-top: .2rem; font-weight: 700; }
.em-pop__gpx { display: inline-block; margin-top: .45rem; padding: .25rem .6rem; border-radius: 6px; background: var(--em-brand, #1f2937); color: #fff !important; text-decoration: none; font-weight: 600; font-size: .8rem; }

/* ── Uitslagen (docs/23): zelfde huisstijl als de kaart (em-*) ── */
.rr-page { height: auto; min-height: 100vh; }
.rr-body { max-width: 60rem; width: 100%; margin: 0 auto; padding: 1rem; box-sizing: border-box; }
.rr-races { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.rr-race { border: 1px solid var(--em-line); background: var(--em-panel); color: var(--em-text); border-radius: 999px; padding: .35rem .9rem; cursor: pointer; font: inherit; }
.rr-race.is-on { background: var(--em-brand); color: #fff; border-color: var(--em-brand); }
.rr-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.rr-search, .rr-select { border: 1px solid var(--em-line); background: var(--em-input); color: var(--em-text); border-radius: 8px; padding: .45rem .6rem; font: inherit; }
.rr-search { flex: 1; min-width: 12rem; }
.rr-table { width: 100%; border-collapse: collapse; background: var(--em-panel); border-radius: 10px; overflow: hidden; }
.rr-table th, .rr-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--em-line); text-align: left; vertical-align: top; }
.rr-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--em-muted); }
.rr-table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-table tr.is-dnf td { color: var(--em-muted); }
.rr-sub { font-size: .82rem; }
.rr-table .show-s { display: none; }
@media (max-width: 600px) {
    .rr-table .hide-s { display: none; }
    .rr-table .show-s { display: block; }
}

/* Voettekst: echte footer onderaan de pagina, over de volle breedte. De kaart staat gecentreerd in de ruimte erboven. */
.reg-shell > .reg-card { margin-block: auto; }
.reg-powered {
    align-self: stretch;
    margin: 2rem -2rem -2rem;          /* tegen de rand van .reg-shell (padding 2rem) */
    padding: .85rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .22);
    font-size: .78rem;
    letter-spacing: .01em;
    text-align: center;
    color: rgba(255, 255, 255, .55);
}
/* Telefoon: minder rand om en in de kaart, zodat keuzetegels en velden de breedte krijgen. */
@media (max-width: 480px) {
    .reg-shell { padding: 3.2rem .6rem 1rem; }          /* boven: ruimte voor de taalknoppen */
    .reg-shell .reg-langs { top: .6rem; right: .6rem; }
    .reg-card { padding: 1.4rem 1.1rem; }
    .reg-powered { margin: 1.5rem -.6rem -1rem; }
}
.reg-powered a { color: rgba(255, 255, 255, .8); text-decoration: none; font-weight: 600; }
.reg-powered a:hover { color: #fff; text-decoration: underline; }
.reg-powered i { opacity: .8; }

/* Voorscherm: keuze van de inschrijfgroep (kaarten, zoals de TRT-site) */
.reg-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-top: .5rem; }
.reg-groupcard {
    display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center;
    padding: 1.1rem .9rem 1rem; border: 1px solid #e3e7ec; border-radius: 14px; background: #f8fafc;
    font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.reg-groupcard:hover, .reg-groupcard:focus-visible {
    border-color: var(--brand-primary, #1c6f94); box-shadow: 0 8px 22px rgba(15, 27, 42, .12); transform: translateY(-1px); outline: none;
}
.reg-groupcard__name { font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: var(--brand-primary, #1c6f94); }
.reg-groupcard__classes { font-size: .82rem; color: #64748b; line-height: 1.35; }
.reg-groupcard__go {
    margin-top: auto; padding: .4rem .95rem; border-radius: 999px; font-size: .85rem; font-weight: 700;
    background: var(--brand-primary, #1c6f94); color: #fff;
}
.reg-groupbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: .25rem 0 .75rem;
    padding: .55rem .8rem; border-radius: 10px; background: #f1f5f9; }
.reg-groupbar strong { color: var(--brand-primary, #1c6f94); }
/* "Andere keuze": duidelijke knop (kiosk/touch) i.p.v. een klein linkje. */
.reg-back-btn { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; min-height: 2.6rem; padding: .45rem .9rem;
    border: 2px solid var(--brand-primary, #1c6f94); border-radius: 10px; background: #fff; color: var(--brand-primary, #1c6f94);
    font: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; }
.reg-back-btn:hover, .reg-back-btn:focus-visible { background: var(--brand-primary, #1c6f94); color: #fff; }
.reg-back-btn:focus-visible { outline: 2px solid var(--brand-accent, #2f93b0); outline-offset: 2px; }
/* Opnieuw beginnen: rechts boven het formulier, rustig tot je hem nodig hebt; bevestigen op de pagina zelf. */
.reg-resetbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin: 0 0 .75rem; }
.reg-resetbar__q { font-weight: 700; margin-right: auto; }
.reg-reset-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .45rem .9rem; border: 1px solid #94a3b8;
    border-radius: 10px; background: #fff; color: #334155; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.reg-reset-btn:hover, .reg-reset-btn:focus-visible { border-color: #334155; }
.reg-reset-btn--yes { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.reg-reset-btn--yes:hover, .reg-reset-btn--yes:focus-visible { background: #991b1b; border-color: #991b1b; }
/* Gewone site (telefoon/pc): klein en rustig; op de kioskzuil (?kiosk=) groot genoeg voor een vinger. */
.reg-resetbar:not(.reg-resetbar--kiosk) { margin-bottom: .4rem; }
.reg-resetbar:not(.reg-resetbar--kiosk) .reg-reset-btn { min-height: 0; padding: .2rem .55rem; font-size: .82rem; font-weight: 600; border-color: transparent; background: transparent; color: #64748b; }
.reg-resetbar:not(.reg-resetbar--kiosk) .reg-reset-btn:hover, .reg-resetbar:not(.reg-resetbar--kiosk) .reg-reset-btn:focus-visible { border-color: #cbd5e1; color: #334155; }
.reg-resetbar:not(.reg-resetbar--kiosk) .reg-reset-btn svg { width: 15px; height: 15px; }
.reg-resetbar:not(.reg-resetbar--kiosk) .reg-reset-btn--yes { border-color: #b91c1c; background: #b91c1c; color: #fff; }
.reg-link { background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: #475569; text-decoration: underline; cursor: pointer; }
.reg-link:hover { color: var(--brand-primary, #1c6f94); }

/* Afbeelding per inschrijfgroep op de kaart */
.reg-groupcard__img { width: 100%; max-height: 110px; object-fit: contain; border-radius: 8px; background: #fff; margin-bottom: .2rem; }

/* Taalkeuze rechtsboven (alleen bij een meertalig event) */
.reg-shell { position: relative; }
.reg-langs { position: absolute; top: 1rem; right: 1rem; display: flex; gap: .35rem; z-index: 2; }
.reg-lang {
    min-width: 2.4rem; padding: .3rem .55rem; border-radius: 8px; text-align: center; text-decoration: none;
    font-size: .8rem; font-weight: 700; letter-spacing: .04em;
    color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
}
.reg-lang:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.reg-lang.is-on { background: #fff; color: var(--brand-primary, #1c6f94); border-color: #fff; }

/* Uitslagen: voorlopige stand (afkap, docs/25) */
.rr-prov { margin:.4rem 0 .7rem; padding:.5rem .75rem; border-radius:8px; border:1px solid #e0b252; background:rgba(224,178,82,.12); font-weight:600; }

/* Capaciteit: volle klasse/groep zichtbaar maar niet te kiezen. */
.reg-choice.is-full, .reg-form label.reg-choice.is-full { opacity:.55; cursor:not-allowed; background:#f3f4f6; }
.reg-groupcard.is-full { opacity:.55; cursor:not-allowed; }

/* Benefits claimen (/benefits/{token}). */
.reg-benefit { border-top: 1px solid #e5e7eb; padding-top: .4rem; margin-top: .8rem; }
.reg-benefit:first-of-type { border-top: 0; }
.reg-benefit__count { font-weight: 400; font-size: .85rem; color: #6b7280; margin-left: .4rem; }
.reg-benefit__text { margin: .2rem 0 .5rem; white-space: pre-line; }
.reg-benefit__claims { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .3rem; }
.reg-benefit__claims li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.reg-benefit__state { font-size: .8rem; padding: 0 .45rem; border-radius: 999px; border: 1px solid #d1d5db; }
.reg-benefit__state.is-used { border-color: #86efac; color: #15803d; }
.reg-benefit__state.is-revoked { color: #6b7280; text-decoration: line-through; }
.reg-benefit__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .6rem; }
.reg-benefit__row label { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
/* Benefit-product op naam: bewijs met QR (bestelcode) voor de balie of de toegang. */
.reg-proof { border: 1px solid #e5e7eb; border-radius: 10px; padding: .55rem .7rem; margin: .45rem 0; }
.reg-proof.is-out { opacity: .75; }
.reg-proof__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem .8rem; }
.reg-proof__detail { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .04em; }
.reg-proof__card { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; padding: .8rem .5rem; margin: .5rem 0; border: 2px dashed #d1d5db; border-radius: 10px; }
.reg-proof__card img { max-width: 70vw; height: auto; }
.reg-proof__code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; }
.reg-proof__acts { display: flex; gap: 1rem; margin-top: .25rem; }
.reg-benefit__state.is-ready { border-color: #93c5fd; color: #1d4ed8; }
.reg-benefit__state.is-handedout { border-color: #86efac; color: #15803d; }

/* Crew: functie bevestigen (119) */
.reg-crew__st { display: inline-block; margin-left: .4rem; border-radius: 999px; padding: .05rem .55rem; font-size: .75rem; font-weight: 600; vertical-align: middle; }
.reg-crew__st--invited   { background: rgba(180,83,9,.13);  color: #92400e; }
.reg-crew__st--confirmed { background: rgba(21,128,61,.13); color: #15803d; }
.reg-crew__st--declined  { background: rgba(185,28,28,.12); color: #b91c1c; }

/* ── Tijdvakken per dag (127) ── */
.reg-windows { margin: .25rem 0 1rem; }
.reg-windows > .reg-muted { margin: 0 0 .5rem; font-size: .9rem; }
.reg-windows__day { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid #e5e7eb; }
.reg-windows__date { min-width: 6.5rem; font-weight: 600; padding-top: .45rem; }
.reg-windows__slots { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; flex: 1; min-width: 0; }
.reg-windows__all { color: #6b7280; padding-top: .45rem; }
.reg-windows__row { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.reg-windows__row .reg-input { width: auto; min-width: 7.5rem; margin: 0; }
@media (max-width: 480px) {
    .reg-windows__day { flex-direction: column; gap: .3rem; }
    .reg-windows__date, .reg-windows__all { padding-top: 0; }
}

/* ── Voorwaarden: akkoord + popup met het document (127) ── */
.reg-terms { margin: 1rem 0 .5rem; }
.reg-terms__row { display: flex; gap: .55rem; align-items: flex-start; padding: .35rem 0; cursor: pointer; line-height: 1.4; }
.reg-terms__row input { width: 1.15rem; height: 1.15rem; margin-top: .1rem; flex: none; }
.reg-terms__doc { font-size: inherit; color: var(--brand-primary, #1c6f94); }
/* Privacyverklaring: alleen een leeslink, geen akkoord */
.reg-privacy { margin: .75rem 0 .5rem; font-size: .92rem; color: #475569; line-height: 1.4; }
/* Klaar-knop na het inschrijven (kiosk): groot genoeg voor een vinger */
.reg-done { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }
.reg-done .reg-btn { min-height: 3rem; width: 100%; }
/* Kioskzuil: na het inschrijven alleen nog inchecken bij de balie (groot en duidelijk). */
.reg-kiosk-next { margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; font-size: 1.1rem; }
html.reg-noscroll, html.reg-noscroll body { overflow: hidden; }
.reg-modal {
    position: fixed; inset: 0; z-index: 1000; background: rgba(15, 23, 42, .55);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.reg-modal__box {
    background: #fff; color: #0f172a; width: min(860px, 100%); height: min(92vh, 1100px);
    border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}
.reg-modal__head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; }
.reg-modal__head h2 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-modal__x { background: none; border: 0; padding: .35rem; cursor: pointer; color: inherit; border-radius: 6px; line-height: 0; }
.reg-modal__x:hover { background: #f1f5f9; }
.reg-modal__body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: #e5e7eb; padding: .75rem; }
.reg-modal__body > .reg-muted { background: #fff; padding: 1rem; border-radius: 8px; margin: 0; }
.reg-doc__page { display: block; background: #fff; margin: 0 auto .75rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.reg-doc__img { display: block; max-width: 100%; margin: 0 auto; background: #fff; }
.reg-modal__foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .7rem 1rem; padding-bottom: max(.7rem, env(safe-area-inset-bottom)); border-top: 1px solid #e5e7eb;
}
.reg-modal__foot .reg-btn { margin: 0; }
/* Telefoon: popup over het hele scherm, knoppen onderaan binnen bereik. */
@media (max-width: 640px) {
    .reg-modal { padding: 0; align-items: stretch; }
    .reg-modal__box { width: 100%; height: 100%; height: 100dvh; border-radius: 0; }
    .reg-modal__body { padding: .4rem; }
    .reg-modal__foot .reg-btn { flex: 1; }
}

/* Inschrijfvenster: aftellen tot de opening (voorscherm-kaart en in plaats van het formulier) */
.reg-countdown { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.reg-countdown__label { font-size: .85rem; color: #64748b; }
.reg-countdown__time { font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--brand-primary, #1c6f94); }
.reg-countdown__at { font-size: .8rem; color: #64748b; }
.reg-groupcard__opens { margin-top: auto; }
.reg-groupcard.is-full { cursor: default; }
.reg-groupcard.is-full:hover { transform: none; box-shadow: none; border-color: #e3e7ec; }
.reg-opens { margin: 1rem 0; padding: 1.4rem 1rem; border: 1px solid #e3e7ec; border-radius: 14px; background: #f8fafc; }
.reg-opens .reg-countdown__time { font-size: 2rem; }
.reg-opens__closed { margin: 0; text-align: center; font-weight: 700; color: #64748b; }
/* Testmodus (?test=1) */
.reg-testbar { margin: -.25rem 0 1rem; padding: .55rem .8rem; border: 1px dashed #d97706; border-radius: 10px; background: #fffbeb; color: #92400e; font-size: .85rem; font-weight: 600; }
.reg-testok { margin: .5rem 0; padding: .6rem .8rem; border-radius: 10px; background: #f0fdf4; color: #15803d; font-weight: 600; font-size: .9rem; }
.reg-open { margin: .5rem 0; padding: .7rem .9rem; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.reg-open p { margin: 0; flex-basis: 100%; }

/* ── Compacter, en breder op grote schermen (05-11-2026) ──
   De veldflow (rf-flow) zet korte velden naast elkaar zodra er ruimte is; in 480px paste bijna niets naast elkaar. */
.reg-card { padding: 1.4rem 1.6rem; }
.reg-logo { max-height: 44px; margin-bottom: .5rem; }
.reg-card h1 { margin: 0 0 .5rem; font-size: 1.3rem; }
.reg-form { gap: .5rem; }
.reg-input { padding: .42rem .6rem; font-size: .92rem; border-radius: 8px; }
.reg-btn { padding: .55rem 1.1rem; font-size: .95rem; }
.reg-step-title { font-size: 1.05rem; margin: .1rem 0 .6rem; }
.reg-testbar { margin: 0 0 .75rem; padding: .4rem .7rem; }
.rf-field { margin-bottom: .45rem; }
.rf-group { margin: .25rem 0 .6rem; }
.rf-steps { margin-bottom: .7rem; }
@media (min-width: 900px) {
    .reg-card { width: min(100%, 880px); padding: 1.5rem 2rem; }
}
a.reg-groupcard { text-decoration: none; }   /* startpagina: typekaarten zijn links */
/* Kop: logo links, titel en subtitel rechts ernaast */
.reg-head { display: flex; align-items: center; gap: 1rem; margin: 0 0 .9rem; }
.reg-head .reg-logo { max-height: 64px; margin: 0; flex: none; }
.reg-head__text { min-width: 0; }
.reg-head__text h1 { margin: 0; }
.reg-head__text .reg-step-title { margin: .2rem 0 0; }
/* Rand van de pagina in één variabele, zodat de footer er precies tegenaan valt (geen scrollbalken). */
.reg-shell { --pad: 1rem; padding: 3.2rem var(--pad) var(--pad); }          /* boven: ruimte voor de taalknoppen */
@media (max-width: 480px) { .reg-shell { --pad: .6rem; } }
@media (min-width: 900px) { .reg-shell { --pad: 1.5rem; padding-top: 1.5rem; } }
.reg-powered { margin: 1.5rem calc(-1 * var(--pad)) calc(-1 * var(--pad)); }
.reg-shell > .reg-card { margin-block: clamp(0rem, 5vh, 3rem) auto; }      /* bovenin met wat lucht; footer onderaan */
.reg-form[hidden] { display: none; }                                         /* hidden wint van display:flex */
/* Velden die geen <label> zijn (geboortedatum): zelfde kop als de andere velden, zodat de regel niet hoger wordt. */
.reg-form div.rf-field { font-size: .82rem; font-weight: 700; color: #374151; }
/* Kop: "INSCHRIJVEN" klein boven de eventnaam; brede logo's (bv. HMZ) begrensd zodat de titel ernaast past. */
.reg-head__kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; margin-bottom: .1rem; }
.reg-head .reg-logo { max-height: 64px; max-width: min(40%, 220px); width: auto; height: auto; object-fit: contain; }
@media (max-width: 480px) { .reg-head .reg-logo { max-height: 48px; max-width: 45%; } .reg-head { gap: .7rem; } .reg-card h1 { font-size: 1.15rem; } }
/* Voorwaarden: vinkje links, tekst als eigen kolom ernaast (lange tekst loopt door naast het vinkje, niet eronder).
   Sterker dan .reg-form label (kolom) en eventuele algemene inputmaten. */
.reg-form label.reg-terms__row, .reg-terms__row { display: flex; flex-direction: row; align-items: flex-start; gap: .55rem;
    font-size: .92rem; font-weight: 500; color: inherit; }
.reg-form label.reg-terms__row > input[type=checkbox], .reg-terms__row > input[type=checkbox] { width: 1.15rem; height: 1.15rem; min-width: 0; margin: .15rem 0 0; padding: 0; flex: none; }
.reg-terms__row > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.reg-terms__row .reg-terms__doc { display: inline; padding: 0; margin: 0; border: 0; background: none; text-align: left; white-space: normal; font: inherit; line-height: inherit; cursor: pointer; }
/* Documenten aanleveren (130): één blok per document met status; bestand kiezen = uploaden. */
.reg-updoc { border: 1px solid #e3e7ec; border-left: 4px solid #cbd5e1; border-radius: 10px; padding: .7rem .9rem; margin: .7rem 0; }
.reg-updoc--received { border-left-color: #2f93b0; }
.reg-updoc--approved { border-left-color: #15803d; background: #f0fdf4; }
.reg-updoc--rejected { border-left-color: #dc2626; background: #fef2f2; }
.reg-updoc__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; }
.reg-updoc__req { color: #dc2626; }
.reg-updoc__status { margin-left: auto; font-size: .8rem; font-weight: 700; color: #475569; }
.reg-updoc--approved .reg-updoc__status { color: #15803d; }
.reg-updoc--rejected .reg-updoc__status { color: #dc2626; }
.reg-updoc__desc { margin: .3rem 0; font-size: .88rem; color: #374151; }
.reg-updoc__due { margin: .2rem 0; font-size: .82rem; color: #92400e; font-weight: 600; }
.reg-updoc__btn { position: relative; overflow: hidden; display: inline-block; margin: .4rem .5rem 0 0; padding: .45rem .9rem; cursor: pointer; }
.reg-updoc__btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── Donkere modus (kioskzuil: ?theme=dark, gezet door de displaypagina; docs/07 §Kiosk) ──
   Alleen als de link erom vraagt; de gewone site blijft licht. Overschrijft de vaste lichte kleuren hierboven. */
html[data-reg-theme="dark"] {
    color-scheme: dark;   /* keuzelijsten, vinkjes en scrollbalken ook donker */
    --rd-card: #111a2b; --rd-panel: #16213a; --rd-input: #0b1220; --rd-text: #e5e7eb; --rd-soft: #cbd5e1; --rd-muted: #94a3b8; --rd-line: #2a3850;
}
html[data-reg-theme="dark"] .reg-card { background: var(--rd-card); color: var(--rd-text); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
html[data-reg-theme="dark"] .reg-card h1,
html[data-reg-theme="dark"] .reg-groupcard__name,
html[data-reg-theme="dark"] .reg-groupbar strong,
html[data-reg-theme="dark"] .reg-terms__doc,
html[data-reg-theme="dark"] .reg-countdown__time { color: color-mix(in srgb, var(--brand-primary, #1c6f94) 45%, #fff); }
html[data-reg-theme="dark"] .reg-intro,
html[data-reg-theme="dark"] .reg-form label,
html[data-reg-theme="dark"] .reg-form div.rf-field,
html[data-reg-theme="dark"] .reg-group__label,
html[data-reg-theme="dark"] .reg-updoc__desc { color: var(--rd-soft); }
html[data-reg-theme="dark"] .reg-muted,
html[data-reg-theme="dark"] .reg-head__kicker,
html[data-reg-theme="dark"] .reg-groupcard__classes,
html[data-reg-theme="dark"] .reg-choice__sub,
html[data-reg-theme="dark"] .reg-countdown__label,
html[data-reg-theme="dark"] .reg-countdown__at,
html[data-reg-theme="dark"] .reg-opens__closed,
html[data-reg-theme="dark"] .reg-windows__all,
html[data-reg-theme="dark"] .reg-privacy,
html[data-reg-theme="dark"] .reg-link,
html[data-reg-theme="dark"] .reg-benefit__count,
html[data-reg-theme="dark"] .reg-updoc__status { color: var(--rd-muted); }
html[data-reg-theme="dark"] .reg-input,
html[data-reg-theme="dark"] .reg-card input:not([type=checkbox]):not([type=radio]):not([type=file]),
html[data-reg-theme="dark"] .reg-card select,
html[data-reg-theme="dark"] .reg-card textarea { background: var(--rd-input); color: var(--rd-text); border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-input::placeholder { color: #64748b; }
html[data-reg-theme="dark"] .reg-choice,
html[data-reg-theme="dark"] .reg-form label.reg-choice { background: var(--rd-panel); color: var(--rd-text); border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-choice:hover { border-color: #475569; }
html[data-reg-theme="dark"] .reg-choice.is-on,
html[data-reg-theme="dark"] .reg-form label.reg-choice.is-on { background: color-mix(in srgb, var(--brand-accent, #2f93b0) 22%, var(--rd-panel)); border-color: var(--brand-accent, #2f93b0); }
html[data-reg-theme="dark"] .reg-choice.is-full,
html[data-reg-theme="dark"] .reg-form label.reg-choice.is-full { background: var(--rd-input); }
html[data-reg-theme="dark"] .reg-groupcard,
html[data-reg-theme="dark"] .reg-opens { background: var(--rd-panel); border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-groupcard:hover,
html[data-reg-theme="dark"] .reg-groupcard:focus-visible { box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
html[data-reg-theme="dark"] .reg-groupcard.is-full:hover { border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-groupcard__img { background: #fff; }   /* logo's zijn meestal voor een lichte achtergrond gemaakt */
html[data-reg-theme="dark"] .reg-groupbar { background: var(--rd-panel); }
html[data-reg-theme="dark"] .reg-back-btn { background: transparent; color: color-mix(in srgb, var(--brand-primary, #1c6f94) 45%, #fff); border-color: color-mix(in srgb, var(--brand-primary, #1c6f94) 60%, #fff); }
html[data-reg-theme="dark"] .reg-back-btn:hover,
html[data-reg-theme="dark"] .reg-back-btn:focus-visible { background: var(--brand-primary, #1c6f94); color: #fff; }
html[data-reg-theme="dark"] .reg-reset-btn { background: var(--rd-panel); color: var(--rd-text); border-color: #475569; }
html[data-reg-theme="dark"] .reg-reset-btn:hover,
html[data-reg-theme="dark"] .reg-reset-btn:focus-visible { border-color: var(--rd-soft); }
html[data-reg-theme="dark"] .reg-reset-btn--yes { background: #b91c1c; border-color: #b91c1c; color: #fff; }
html[data-reg-theme="dark"] .reg-note { background: rgba(234, 88, 12, .14); border-color: rgba(251, 146, 60, .45); color: #fdba74; }
html[data-reg-theme="dark"] .reg-err,
html[data-reg-theme="dark"] .rf-err { color: #fca5a5; }
html[data-reg-theme="dark"] .reg-ok,
html[data-reg-theme="dark"] .rf-note--ok { color: #86efac; }
html[data-reg-theme="dark"] .reg-kiosk-next { background: rgba(16, 185, 129, .14); border-color: rgba(52, 211, 153, .45); color: #d1fae5; }
html[data-reg-theme="dark"] .reg-testbar,
html[data-reg-theme="dark"] .reg-open { background: rgba(217, 119, 6, .14); color: #fcd34d; }
html[data-reg-theme="dark"] .reg-testok { background: rgba(21, 128, 61, .18); color: #86efac; }
html[data-reg-theme="dark"] .reg-done,
html[data-reg-theme="dark"] .reg-benefit,
html[data-reg-theme="dark"] .reg-windows__day { border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-updoc,
html[data-reg-theme="dark"] .reg-proof,
html[data-reg-theme="dark"] .reg-proof__card { border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-updoc--approved { background: rgba(21, 128, 61, .14); }
html[data-reg-theme="dark"] .reg-updoc--rejected { background: rgba(220, 38, 38, .14); }
/* Documentpopup: de pagina's zelf blijven wit (het zijn documenten), de rand eromheen donker. */
html[data-reg-theme="dark"] .reg-modal__box { background: var(--rd-card); color: var(--rd-text); }
html[data-reg-theme="dark"] .reg-modal__head,
html[data-reg-theme="dark"] .reg-modal__foot { border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-modal__x:hover { background: var(--rd-panel); }
html[data-reg-theme="dark"] .reg-modal__body { background: #0b1220; }
html[data-reg-theme="dark"] .reg-modal__body > .reg-muted { background: var(--rd-card); }
/* Eventlogo's zijn meestal voor een lichte achtergrond gemaakt (bv. zwarte tekst): op een wit plaatje. */
html[data-reg-theme="dark"] .reg-logo { background: #fff; border-radius: 8px; padding: .35rem .5rem; }

/* Declareren (docs/40 §7) */
.dc-note { background: #f8fafc; border-left: 3px solid var(--brand-accent, #2f93b0); padding: .5rem .8rem; border-radius: 6px; }
.dc-h2 { font-size: 1.1rem; margin: 1.2rem 0 .3rem; }
.dc-amount { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc-remove { padding: .2rem .6rem; font-size: .8rem; }
.dc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem .9rem; margin-top: .5rem; }
.dc-grid > label { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; }
.dc-grid .reg-input { width: 100%; box-sizing: border-box; }
.dc-wide { grid-column: 1 / -1; }
.dc-check { flex-direction: row !important; align-items: center; gap: .4rem !important; padding-top: 1.3rem; }
.dc-photo { margin-top: .5rem; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.dc-add, .dc-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.dc-total { margin: .8rem 0 .2rem; }
.dc-lines { margin: .3rem 0 .4rem; padding-left: 1.1rem; font-size: .9rem; }
.dc-sent--approved, .dc-sent--paid { border-left-color: #15803d; }
.dc-sent--partly { border-left-color: #d97706; }
.dc-sent--rejected, .dc-sent--withdrawn { border-left-color: #9ca3af; opacity: .85; }
/* Klasseweergave in de donkere modus */
html[data-reg-theme="dark"] .reg-ccard { background: var(--rd-panel); border-color: var(--rd-line); }
html[data-reg-theme="dark"] .reg-ccard.is-on { background: color-mix(in srgb, var(--brand-accent, #2f93b0) 22%, var(--rd-panel)); border-color: var(--brand-accent, #2f93b0); }
html[data-reg-theme="dark"] .reg-ccard__pick { color: var(--rd-text); }
html[data-reg-theme="dark"] .reg-ccard__name,
html[data-reg-theme="dark"] .reg-ccard__price,
html[data-reg-theme="dark"] .reg-info__price { color: color-mix(in srgb, var(--brand-primary, #1c6f94) 45%, #fff); }
html[data-reg-theme="dark"] .reg-ccard__sum,
html[data-reg-theme="dark"] .reg-ccard__body,
html[data-reg-theme="dark"] .reg-ccard__benefits,
html[data-reg-theme="dark"] .reg-ccard__benefitline { color: var(--rd-soft); }
html[data-reg-theme="dark"] .reg-ccard__note { color: #fcd34d; }
html[data-reg-theme="dark"] .reg-info { background: var(--rd-card); color: var(--rd-text); }
html[data-reg-theme="dark"] .reg-resetbar:not(.reg-resetbar--kiosk) .reg-reset-btn:not(.reg-reset-btn--yes) { background: transparent; border-color: transparent; color: var(--rd-muted); }

/* ── Sponsordeck (docs/41): bladerbare webfolder; huisstijl van de organisatie (--sd-brand / --sd-accent), thema per deck ── */
.sd-page {
    --sd-brand: #1f2937; --sd-on-brand: #fff; --sd-accent: #2f93b0;
    --sd-bg: #fff; --sd-fg: #1c2430; --sd-muted: #5b6573; --sd-line: #e3e7ec; --sd-soft: #f5f7f9;
    background: var(--sd-bg); color: var(--sd-fg); min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.55;
}
.sd-page[data-theme="dark"] {
    --sd-bg: #0f141a; --sd-fg: #e9edf2; --sd-muted: #a3adba; --sd-line: #2a333d; --sd-soft: #171e26;
}
.sd-page :where(a) { color: var(--sd-accent); }
.sd-page[data-theme="dark"] :where(a) { color: color-mix(in srgb, var(--sd-accent) 60%, #fff); }
.sd-muted { color: var(--sd-muted); }
.sd-small { font-size: .85rem; }
.sd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sd-ico { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }
.sd-empty { max-width: 40rem; margin: 0 auto; padding: 4rem 1rem; text-align: center; }
.sd-preview { position: sticky; top: 0; z-index: 5; background: #b45309; color: #fff; text-align: center; padding: .35rem 1rem; font-size: .9rem; }
.sd-tools { position: fixed; right: 1rem; bottom: 1rem; z-index: 4; display: flex; gap: .3rem; align-items: center; background: var(--sd-bg);
    border: 1px solid var(--sd-line); border-radius: 999px; padding: .25rem .4rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.sd-lang { text-decoration: none; font-size: .8rem; font-weight: 600; padding: .2rem .45rem; border-radius: 999px; color: var(--sd-muted) !important; }
.sd-lang.is-on { background: var(--sd-brand); color: var(--sd-on-brand) !important; }
.sd-toolbtn { border: 0; background: none; color: var(--sd-fg); font: inherit; font-size: .85rem; cursor: pointer; padding: .2rem .5rem;
    display: inline-flex; gap: .35rem; align-items: center; }

/* Blokken ("pagina's"): op een groot scherm minstens schermhoog met scroll-snap; op de telefoon gewoon scrollen. */
.sd-slide { padding: 4rem 1rem; box-sizing: border-box; border-bottom: 1px solid var(--sd-line); scroll-margin-top: 0; }
@media (min-width: 900px) and (min-height: 600px) {
    html:has(.sd-page) { scroll-snap-type: y proximity; }
    .sd-slide { min-height: 100vh; display: flex; align-items: center; scroll-snap-align: start; }
}
.sd-wrap { width: 100%; max-width: 72rem; margin: 0 auto; }
.sd-narrow { max-width: 46rem; }
.sd-slide h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); line-height: 1.15; margin: 0 0 1.2rem; }
.sd-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--sd-accent); margin: 0 0 .5rem; }
.sd-lead { font-size: 1.2rem; color: var(--sd-muted); margin: 0 0 1rem; }
.sd-rich { font-size: 1.05rem; }
.sd-rich img { max-width: 100%; height: auto; }
.sd-btn { display: inline-flex; gap: .5rem; align-items: center; background: var(--sd-brand); color: var(--sd-on-brand) !important; text-decoration: none;
    font-weight: 600; padding: .75rem 1.2rem; border-radius: 10px; margin-top: .5rem; }
.sd-btn:hover { filter: brightness(1.08); }
.sd-btn--ghost { background: transparent; color: var(--sd-fg) !important; border: 1px solid var(--sd-line); }

/* Cover: foto over de volle breedte met een donkere waas, anders de huiskleur. */
.sd-cover { position: relative; color: #fff; background: var(--sd-brand) var(--sd-cover, none) center / cover no-repeat; border-bottom: 0; min-height: 80vh;
    display: flex; align-items: flex-end; }
.sd-cover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .65) 100%); }
.sd-cover__inner { position: relative; width: 100%; max-width: 72rem; margin: 0 auto; }
.sd-cover h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1.05; margin: 0 0 .8rem; }
.sd-cover .sd-kicker { color: #fff; opacity: .85; }
.sd-cover__dates { font-size: 1.2rem; margin: 0 0 .3rem; display: flex; gap: .5rem; align-items: center; }
.sd-cover__org { margin: 0 0 1.2rem; opacity: .85; }
.sd-cover .sd-btn { background: #fff; color: #111 !important; }
.sd-logo { max-height: 72px; max-width: 220px; margin-bottom: 1.5rem; display: block; }
.sd-logo--chip { background: #fff; padding: .5rem .7rem; border-radius: 10px; }

/* Band in de huiskleur (cijfers, afsluiting). */
.sd-band { background: var(--sd-brand); color: var(--sd-on-brand); border-bottom: 0; }
.sd-band :where(a) { color: var(--sd-on-brand) !important; }
.sd-band .sd-muted { color: inherit; opacity: .8; }
.sd-band .sd-btn { background: var(--sd-on-brand); color: var(--sd-brand) !important; }
.sd-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; }
.sd-figure { display: grid; gap: .2rem; }
.sd-figure__ico .sd-ico { width: 2rem; height: 2rem; opacity: .85; }
.sd-figure strong { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; }

/* Doelgroep + fotostrip */
.sd-audience { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .sd-audience { grid-template-columns: 2fr 3fr; } .sd-audience--text { grid-template-columns: 1fr; max-width: 46rem; } }
.sd-photos { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.sd-photos--1 { grid-template-columns: 1fr; }
.sd-photos--3, .sd-photos--5, .sd-photos--6 { grid-template-columns: repeat(3, 1fr); }
.sd-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.sd-photo { position: relative; margin: 0; }
.sd-credit { position: absolute; right: .4rem; bottom: .4rem; max-width: calc(100% - .8rem); padding: .1rem .4rem; border-radius: 4px;
    background: rgba(0, 0, 0, .6); color: #fff; font-size: .68rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-credit--cover { z-index: 1; right: 1rem; bottom: 1rem; }

/* Pakketten: vergelijkingstabel of kaarten */
.sd-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--sd-line); border-radius: 12px; }
.sd-compare { border-collapse: collapse; width: 100%; min-width: 32rem; }
.sd-compare th, .sd-compare td { padding: .65rem .8rem; border-bottom: 1px solid var(--sd-line); text-align: center; }
.sd-compare tbody th, .sd-compare tfoot th { text-align: left; font-weight: 500; }
.sd-compare thead th { background: var(--sd-soft); font-size: 1rem; }
.sd-compare thead th a { color: var(--sd-fg) !important; text-decoration: none; }
.sd-compare tfoot td { font-weight: 700; font-size: 1.05rem; }
.sd-compare tr:last-child td, .sd-compare tr:last-child th { border-bottom: 0; }
.sd-yes { color: var(--sd-accent); }
.sd-dash { color: var(--sd-muted); }
.sd-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.sd-card { display: grid; gap: .35rem; padding: 1.2rem; border: 1px solid var(--sd-line); border-radius: 12px; text-decoration: none; color: var(--sd-fg) !important; }
.sd-card:hover { border-color: var(--sd-accent); }
.sd-card strong { font-size: 1.15rem; }
.sd-card__price { font-weight: 700; color: var(--sd-accent); }

/* Eén pakket */
.sd-package__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sd-package__grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.sd-package__side { background: var(--sd-soft); border-radius: 14px; padding: 1.4rem; }
.sd-package__side h3 { margin: 0 0 .6rem; font-size: 1rem; }
.sd-benefits { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .45rem; }
.sd-benefits li { display: flex; gap: .5rem; align-items: flex-start; }
.sd-benefits .sd-ico { color: var(--sd-accent); margin-top: .2em; }
.sd-price { font-size: 2rem; font-weight: 700; margin: .4rem 0 .2rem; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.sd-price small { font-size: .9rem; font-weight: 500; color: var(--sd-muted); }
.sd-closed { color: var(--sd-muted); font-weight: 600; }

/* Sponsors */
.sd-tier { font-size: 1rem; color: var(--sd-muted); margin: 1.5rem 0 .6rem; }
.sd-logos { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.sd-logo-tile { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--sd-line); border-radius: 10px;
    padding: .8rem; min-height: 5rem; color: #1c2430; font-weight: 600; text-align: center; }
.sd-logo-tile img { max-width: 100%; max-height: 3.5rem; object-fit: contain; }
.sd-bdetail { display: block; font-size: .78rem; font-weight: 400; opacity: .75; line-height: 1.3; }
a.sd-logo-tile { text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.sd-logo-tile:hover, a.sd-logo-tile:focus-visible { border-color: var(--sd-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }

/* Contact */
.sd-contact { display: flex; gap: 1rem; align-items: center; margin: 1.2rem 0; }
.sd-contact img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sd-on-brand); }
.sd-contact > div { display: grid; gap: .15rem; }
.sd-contact a { display: inline-flex; gap: .4rem; align-items: center; }

@media (max-width: 600px) {
    .sd-slide { padding: 2.5rem 1rem; }
    .sd-cover { min-height: 70vh; }
    .sd-tools { right: .5rem; bottom: .5rem; }
}

/* Afdrukken / PDF: liggend A4, één blok per pagina, kleuren behouden, geen knoppenbalk. */
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    html:has(.sd-page) { scroll-snap-type: none; }
    .sd-page { -webkit-print-color-adjust: exact; print-color-adjust: exact; min-height: 0; }
    .sd-tools, .sd-preview, .sd-noprint { display: none !important; }
    .sd-slide { min-height: 0; display: block; break-after: page; page-break-after: always; break-inside: avoid; padding: 8mm 6mm; border: 0; }
    .sd-slide:last-of-type { break-after: auto; page-break-after: auto; }
    .sd-cover { min-height: 180mm; display: flex; }
    .sd-tablewrap { overflow: visible; }
    .sd-compare { min-width: 0; }
    .sd-audience { grid-template-columns: 2fr 3fr; } .sd-package__grid { grid-template-columns: 3fr 2fr; }
    .sd-btn { border: 1px solid currentColor; }
}
a.sd-toolbtn { text-decoration: none; color: var(--sd-fg) !important; }
.reg-deck { margin: 0 0 .6rem; font-size: .95rem; }   /* sponsordeck-link boven de pakketten (docs/41) */