/* ChattersNet registratie — vormgeving in de lijn van BoxyChat (donker, Figtree, indigo/violet) met het gouden ChattersNet-logo.
   Mobile first: één kolom; vanaf 1024px een breed tweekolomsscherm. Geen CDN: lettertype en logo staan in /fonts en /img.
   Thema: donker standaard, licht via de knop rechtsboven (data-theme op <html>, gezet door thema.js vóór het tekenen). */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-400.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-ext-400.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-ext-600.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/figtree-latin-800.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/figtree-latin-ext-800.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg: #0b0d17;
  --bg-2: #111426;
  --oppervlak: rgba(19, 22, 40, 0.86);
  --oppervlak-2: rgba(255, 255, 255, 0.04);
  --rand: rgba(255, 255, 255, 0.09);
  --rand-sterk: rgba(255, 255, 255, 0.16);
  --tekst: #e8eaf1;
  --tekst-zacht: #9ba3b4;
  --tekst-zwak: #6b7385;
  --primair: #6366f1;
  --primair-2: #8b5cf6;
  --primair-zacht: rgba(99, 102, 241, 0.16);
  --goud: #d9b44a;
  --link: #a5b4fc;
  --goud-zacht: rgba(217, 180, 74, 0.14);
  --ok: #34d399;
  --ok-zacht: rgba(52, 211, 153, 0.12);
  --fout: #f87171;
  --fout-zacht: rgba(248, 113, 113, 0.12);
  --schaduw: 0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --gloed-1: rgba(124, 58, 237, 0.32);
  --gloed-2: rgba(217, 180, 74, 0.12);
  --radius: 16px;
  --radius-klein: 12px;
  --letter: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f5fa;
  --bg-2: #eceef6;
  --oppervlak: rgba(255, 255, 255, 0.92);
  --oppervlak-2: #f6f7fb;
  --rand: #e2e5ee;
  --rand-sterk: #cfd4e2;
  --tekst: #1d2132;
  --tekst-zacht: #545c70;
  --tekst-zwak: #7c8497;
  --primair-zacht: rgba(99, 102, 241, 0.1);
  --goud: #a8841f;
  --link: #4f46e5;
  --goud-zacht: rgba(168, 132, 31, 0.12);
  --ok: #059669;
  --ok-zacht: rgba(5, 150, 105, 0.1);
  --fout: #dc2626;
  --fout-zacht: rgba(220, 38, 38, 0.08);
  --schaduw: 0 24px 60px -28px rgba(30, 35, 60, 0.28);
  --gloed-1: rgba(124, 58, 237, 0.12);
  --gloed-2: rgba(217, 180, 74, 0.14);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  font: 16px/1.6 var(--letter); color: var(--tekst); background: var(--bg);
  display: flex; flex-direction: column; overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 12% -8%, var(--gloed-1), transparent 60%),
    radial-gradient(700px 520px at 100% 108%, var(--gloed-2), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
/* linkkleur als variabele: een themaregel als ':root[data-theme] a' zou door zijn gewicht elke knop- en tabkleur overschrijven */
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--tekst); }
:focus-visible { outline: 3px solid var(--primair); outline-offset: 2px; border-radius: 6px; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88em; background: var(--primair-zacht);
  color: var(--tekst); padding: .12em .42em; border-radius: 6px; word-break: break-word; }
strong { font-weight: 600; color: var(--tekst); }

/* ---- bovenbalk ---- */
.balk { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 14px 16px; }
.merk { display: inline-flex; align-items: center; gap: 10px; color: var(--tekst); text-decoration: none; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.merk img { width: 44px; height: auto; filter: drop-shadow(0 4px 10px rgba(217, 180, 74, .25)); }
.merk span b { color: var(--goud); font-weight: 800; }
.balk-acties { display: flex; align-items: center; gap: 8px; }
.talen { display: inline-flex; padding: 3px; gap: 2px; background: var(--oppervlak-2); border: 1px solid var(--rand); border-radius: 999px; }
.talen a { color: var(--tekst-zacht); text-decoration: none; font-size: .8rem; font-weight: 600; padding: 5px 10px; border-radius: 999px; line-height: 1; }
.talen a[aria-current] { color: #fff; background: linear-gradient(135deg, var(--primair), var(--primair-2)); }
.talen a:hover { color: var(--tekst); }
.thema-knop { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  background: var(--oppervlak-2); border: 1px solid var(--rand); color: var(--tekst-zacht); }
.thema-knop:hover { color: var(--tekst); border-color: var(--rand-sterk); }
.thema-knop svg { width: 18px; height: 18px; }
.thema-knop .zon { display: none; }
:root[data-theme="light"] .thema-knop .zon { display: block; }
:root[data-theme="light"] .thema-knop .maan { display: none; }

.testbanner { background: #fbbf24; color: #3b2a00; text-align: center; font-weight: 600; font-size: .85rem; padding: 6px 12px; }

/* ---- indeling: mobiel één kolom; desktop twee ---- */
.indeling { width: 100%; max-width: 1280px; margin: 0 auto; padding: 8px 12px 24px;
  display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "kaart" "voordelen"; }
.intro { grid-area: intro; padding: 4px 4px 0; }
.voordelen { grid-area: voordelen; }
.kaart { grid-area: kaart; }

.label-pil { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--tekst-zacht);
  background: var(--oppervlak-2); border: 1px solid var(--rand); border-radius: 999px; padding: 6px 12px 6px 8px; }
.label-pil i { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-zacht); }
.intro h1 { font-size: clamp(1.75rem, 6.5vw, 3.6rem); line-height: 1.08; font-weight: 800; letter-spacing: -.025em; margin: 14px 0 10px; }
.intro h1 .verloop { background: linear-gradient(120deg, #c4b5fd 0%, #a5b4fc 45%, var(--goud) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .intro h1 .verloop { background: linear-gradient(120deg, #6d28d9 0%, #4f46e5 50%, #a8841f 100%); -webkit-background-clip: text; background-clip: text; }
.intro .lead { color: var(--tekst-zacht); font-size: 1.02rem; margin: 0; max-width: 46ch; }
.intro .groot-logo { display: none; }
@media (max-width: 639px) {
  /* gsm: snel naar het formulier; de kaart legt zelf uit wat je doet */
  .intro .label-pil, .intro .lead { display: none; }
  .intro h1 { margin: 6px 0 2px; font-size: 1.9rem; }
}

.voordelen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.voordelen li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-klein);
  background: var(--oppervlak); border: 1px solid var(--rand); }
.voordelen h2 { font-size: .95rem; margin: 0 0 2px; font-weight: 600; }
.voordelen p { margin: 0; font-size: .88rem; color: var(--tekst-zacht); }
.ikoon { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; }
.ikoon svg { width: 20px; height: 20px; }
.ikoon.paars { background: rgba(139, 92, 246, .16); color: #c4b5fd; }
.ikoon.blauw { background: rgba(99, 102, 241, .16); color: #a5b4fc; }
.ikoon.goud { background: var(--goud-zacht); color: var(--goud); }
.ikoon.groen { background: var(--ok-zacht); color: var(--ok); }
:root[data-theme="light"] .ikoon.paars { color: #6d28d9; }
:root[data-theme="light"] .ikoon.blauw { color: #4f46e5; }
.tip { margin-top: 10px; padding: 14px; border-radius: var(--radius-klein); border: 1px dashed var(--rand-sterk); color: var(--tekst-zacht); font-size: .9rem; }
.tip strong { display: block; margin-bottom: 4px; }

/* ---- kaart met formulier ---- */
.kaart { background: var(--oppervlak); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); min-width: 0; }
/* 2×2 op elke breedte: vier knoppen passen nooit betrouwbaar naast elkaar in de kaart (desktop knipte "Mail opnieuw sturen" af) */
.tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 12px;
  background: var(--oppervlak-2); border: 1px solid var(--rand); }
.tabs a { text-align: center; text-decoration: none; color: var(--tekst-zacht); font-size: .85rem; font-weight: 600; line-height: 1.25;
  padding: 9px 8px; border-radius: 9px; }
.tabs a[aria-current] { color: var(--tekst); background: var(--oppervlak); box-shadow: 0 1px 0 var(--rand-sterk), 0 6px 16px -10px rgba(0, 0, 0, .6); }
.tabs a:hover { color: var(--tekst); }

.kaart h1 { font-size: 1.45rem; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; margin: 2px 0 6px; }
.kaart .uitleg { color: var(--tekst-zacht); margin: 0 0 18px; font-size: .95rem; }

.veld { margin-bottom: 14px; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--tekst); background: var(--oppervlak-2);
  border: 1px solid var(--rand-sterk); border-radius: var(--radius-klein); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: var(--tekst-zwak); }
input:focus { outline: none; border-color: var(--primair); box-shadow: 0 0 0 4px var(--primair-zacht); }
.heeft-fout input { border-color: var(--fout); }
.ww-rij { position: relative; }
.ww-rij input { padding-right: 84px; }
.toon-ww { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--tekst-zacht); background: transparent; border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.toon-ww:hover { color: var(--tekst); background: var(--primair-zacht); }
.hint { font-size: .82rem; color: var(--tekst-zwak); margin: 6px 0 0; }
.fout { font-size: .86rem; color: var(--fout); margin: 6px 0 0; }
/* live hulp (app.js): nickstatus met hulp in context, geldige velden, sterkte, Caps Lock */
.nick-status { font-size: .85rem; margin: -6px 0 14px; }
.nick-status:empty { display: none; }
.nick-status .label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--tekst-zacht); }
.nick-status .label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--tekst-zwak); }
.nick-status.vrij .label { color: var(--ok); } .nick-status.vrij .label::before { background: var(--ok); }
.nick-status.bezet .label { color: var(--fout); } .nick-status.bezet .label::before { background: var(--fout); }
.nick-status.info .label { color: var(--goud); } .nick-status.info .label::before { background: var(--goud); }
.nick-status.bezig .label::before { animation: cnreg-puls 1s ease-in-out infinite; }
.nick-hulp { margin: 6px 0 0 15px; color: var(--tekst-zacht); line-height: 1.45; }
/* knoppen naar de volgende stap (nickstatus en uitkomstpagina's) */
.acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.actie { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .85rem; line-height: 1.2; color: var(--tekst);
  text-decoration: none; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--rand-sterk); background: var(--oppervlak-2);
  transition: border-color .15s, background .15s, transform .1s; }
.actie::after { content: "→"; opacity: .7; transition: transform .15s; }
.actie:hover { border-color: var(--primair); background: var(--primair-zacht); }
.actie:hover::after { transform: translateX(2px); }
.actie:active { transform: translateY(1px); }
.actie.hoofd { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--primair), var(--primair-2)); }
.actie.hoofd:hover { filter: brightness(1.08); }
.actie:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primair-zacht); }
.uitkomst .acties { justify-content: center; margin: 4px 0 8px; }
.uitkomst .actie { font-size: .92rem; padding: 10px 16px; }
.veld.is-ok input { border-color: var(--ok); border-color: color-mix(in srgb, var(--ok) 60%, var(--rand-sterk)); }
.veld.js-fout input { border-color: var(--fout); }
.hint.info { color: var(--ok); }
.capslock { font-size: .82rem; font-weight: 600; color: var(--goud); margin: 6px 0 0; }
.sterkte { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; font-size: .8rem; color: var(--tekst-zacht); }
.sterkte[hidden] { display: none; }
.sterkte i { flex: 0 1 44px; height: 4px; border-radius: 999px; background: var(--rand-sterk); transition: background .2s; }
.sterkte span { margin-left: 8px; white-space: nowrap; }
.sterkte[data-niveau="1"] i:nth-child(1) { background: var(--fout); }
.sterkte[data-niveau="2"] i:nth-child(-n+2) { background: var(--goud); }
.sterkte[data-niveau="3"] i:nth-child(-n+3) { background: var(--ok); }
.sterkte[data-niveau="4"] i:nth-child(-n+4) { background: var(--ok); }
@keyframes cnreg-puls { 50% { opacity: .25; } }
.voorstel { margin: -4px 0 8px; }
.knop-klein { font: inherit; font-size: .85rem; font-weight: 600; color: var(--tekst); background: var(--primair-zacht); border: 1px solid var(--rand);
  border-radius: 10px; padding: 8px 12px; cursor: pointer; }
.vink { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: .9rem; margin-bottom: 14px; }
.vink input { margin-top: 4px; accent-color: var(--primair); }
.captcha-vak { margin: 6px 0 14px; min-height: 74px; }
/* Google's kader (lichte rand + schaduw) zit IN de iframe en is niet te stylen: we knippen 2px rondom weg
   en zetten er een eigen rand in de themakleur omheen. De achtergrond is die van Google's thema, tegen een flits vooraf. */
#captcha { width: 300px; max-width: 100%; height: 74px; overflow: hidden; border: 1px solid var(--rand-sterk);
  border-radius: var(--radius-klein); background: #222; }
:root[data-theme="light"] #captcha { background: #f9f9f9; }
#captcha iframe { display: block; margin: -2px 0 0 -2px; }

.knop { display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 100%; font: inherit; font-weight: 600; font-size: 1rem;
  color: #fff; border: 0; border-radius: var(--radius-klein); padding: 13px 22px; cursor: pointer;
  background: linear-gradient(135deg, var(--primair), var(--primair-2)); box-shadow: 0 12px 24px -10px rgba(99, 102, 241, .6); transition: transform .1s, filter .15s; }
.knop:hover { filter: brightness(1.08); }
.knop:active { transform: translateY(1px); }
/* nog niet klaar om te versturen: zichtbaar geblokkeerd (aria-disabled, zodat een klik nog kan uitleggen waarom) */
.knop[aria-disabled="true"] { cursor: not-allowed; opacity: .5; filter: grayscale(.5); box-shadow: none; }
.knop[aria-disabled="true"]:hover { filter: grayscale(.5); }
.knop[aria-disabled="true"]:active { transform: none; }
.knop.bezig, .knop.bezig:hover { cursor: progress; opacity: .85; filter: none; }
.draaier { width: 16px; height: 16px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: cnreg-draai .7s linear infinite; }
@keyframes cnreg-draai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .draaier, .nick-status.bezig .label::before { animation: none; } }
.knop svg { width: 18px; height: 18px; }

.melding { border-radius: var(--radius-klein); padding: 12px 14px; margin-bottom: 16px; font-size: .92rem; }
.melding.fout { background: var(--fout-zacht); color: var(--fout); border: 1px solid rgba(248, 113, 113, .3); }
.naschrift { font-size: .88rem; margin: 16px 0 0; text-align: center; color: var(--tekst-zacht); }

.uitkomst { text-align: center; padding: 8px 4px 4px; }
.uitkomst .status { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; margin: 6px auto 12px; }
.uitkomst .status svg { width: 30px; height: 30px; }
.uitkomst.ok .status { background: var(--ok-zacht); color: var(--ok); box-shadow: 0 0 0 8px rgba(52, 211, 153, .06); }
.uitkomst.fout .status { background: var(--fout-zacht); color: var(--fout); }
.uitkomst h1 { margin-bottom: 10px; }
.uitkomst p { color: var(--tekst-zacht); margin: 0 auto 12px; max-width: 46ch; }

/* ---- voet ---- */
.voet { width: 100%; max-width: 1280px; margin: auto auto 0; padding: 18px 16px 26px; text-align: center; color: var(--tekst-zwak); font-size: .8rem; }
.voet p { margin: 4px 0; }
.voet a { color: var(--tekst-zacht); }

/* ---- grotere schermen ---- */
@media (min-width: 640px) {
  .indeling { padding: 12px 20px 32px; gap: 22px; }
  .tabs a { padding: 9px 12px; }
  .kaart { padding: 26px; }
  .voordelen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knop { width: auto; min-width: 220px; }
}
@media (min-width: 1024px) {
  .balk { padding: 22px 32px; }
  .indeling { padding: 24px 32px 48px; gap: 28px 56px; align-items: start;
    grid-template-columns: minmax(0, 1.1fr) minmax(400px, 0.9fr); grid-template-rows: auto 1fr;
    grid-template-areas: "intro kaart" "voordelen kaart"; }
  .voordelen { align-self: start; }
  .intro { padding: 36px 0 0; }
  .intro .groot-logo { display: block; width: 168px; height: auto; margin: 0 0 22px; filter: drop-shadow(0 18px 40px rgba(217, 180, 74, .28)); }
  .intro .lead { font-size: 1.15rem; }
  .kaart { padding: 32px; position: sticky; top: 24px; }
  .voordelen ul { gap: 14px; }
  .knop { width: 100%; }
}
@media (min-width: 1440px) {
  .indeling { max-width: 1360px; } .balk { max-width: 1360px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }