/* Jocus ledenapp · basisstijl */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("../fonts/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Catseye W05 Bold voor de slogan */
@font-face {
  font-family: "Catseye";
  src: url("../fonts/Catseye.woff2") format("woff2"),
       url("../fonts/Catseye.woff") format("woff");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --rood: #e30613;
  --rood-licht: #f2252d;
  --rood-donker: #b0000d;
  --donker: #212832;
  --achtergrond: #f2f6fc;
  --wit: #ffffff;
  --font: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kop: "Montserrat", var(--font);
  --font-slogan: "Catseye", cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--donker);
  background: var(--achtergrond);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Splash ---------- */

.splash-body { background: var(--rood-donker); overflow: hidden; }

.splash {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 9vh) 24px calc(env(safe-area-inset-bottom) + 28px);
  color: var(--wit);
  background:
    radial-gradient(120% 70% at 50% 28%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--rood-licht) 0%, var(--rood) 45%, var(--rood-donker) 100%);
  overflow: hidden;
}

/* Diagonale lichtbanen zoals in het ontwerp */
.splash__glans {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.05) 46%, transparent 46%),
    linear-gradient(115deg, transparent 52%, rgba(255,255,255,.035) 52%, rgba(255,255,255,.035) 57%, transparent 57%),
    linear-gradient(115deg, transparent 66%, rgba(0,0,0,.06) 66%, rgba(0,0,0,.06) 80%, transparent 80%);
  pointer-events: none;
}

.splash__merk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: auto 0;
  animation: opkomen .9s cubic-bezier(.2,.8,.2,1) both;
}

.splash__haan {
  width: min(52vw, 230px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.18));
}

.splash__naam {
  margin: 4vh 0 0;
  font-family: var(--font-kop);
  font-weight: 800;
  font-size: clamp(44px, 15vw, 72px);
  letter-spacing: .14em;
  line-height: 1;
  padding-left: .14em; /* letterspatiëring optisch centreren */
}

.splash__slogan {
  margin: 1.2vh 0 0;
  font-family: var(--font-slogan);
  font-size: clamp(34px, 11.5vw, 54px);
  line-height: 1.1;
  transform: rotate(-4deg);
  animation: opkomen .9s .25s cubic-bezier(.2,.8,.2,1) both;
}

.splash__onder {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: opkomen .9s .45s cubic-bezier(.2,.8,.2,1) both;
}

.splash__stippen { display: flex; gap: 10px; }
.splash__stippen span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.splash__stippen span.actief { background: var(--wit); }

.knop-wit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  background: var(--wit);
  color: var(--rood);
  font: 700 18px/1 var(--font);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.knop-wit:active { transform: scale(.98); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.knop-wit:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 3px; }

@keyframes opkomen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.splash__slogan { animation-name: opkomen-slogan; }
@keyframes opkomen-slogan {
  from { opacity: 0; transform: translateY(14px) rotate(-4deg); }
  to   { opacity: 1; transform: rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .splash__merk, .splash__slogan, .splash__onder { animation: none; }
}

/* Breed scherm zonder redirect (bv. tablet of touch-laptop): splash gecentreerd als kader */
@media (min-width: 700px) {
  .splash-body {
    display: grid;
    place-items: center;
    background: var(--achtergrond);
    overflow: auto;
  }
  .splash {
    width: 390px;
    min-height: 0;
    height: min(844px, 94vh);
    border-radius: 36px;
    padding-top: 80px;
    box-shadow: 0 30px 60px rgba(33,40,50,.25);
  }
}

/* ---------- Inloggen / SaaS-schil ---------- */

.auth-body { background: var(--achtergrond); }

.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

/* Merkpaneel (alleen op brede schermen) */
.auth__merk {
  display: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--wit);
  padding: 48px;
  background:
    radial-gradient(120% 70% at 50% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg, var(--rood-licht) 0%, var(--rood) 45%, var(--rood-donker) 100%);
}
.auth__merk-glans {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.05) 46%, transparent 46%),
    linear-gradient(115deg, transparent 52%, rgba(255,255,255,.035) 52%, rgba(255,255,255,.035) 57%, transparent 57%),
    linear-gradient(115deg, transparent 66%, rgba(0,0,0,.06) 66%, rgba(0,0,0,.06) 80%, transparent 80%);
}
.auth__merk-inhoud {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.auth__haan { width: min(26vw, 260px); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.18)); }
.auth__naam {
  margin: 34px 0 0;
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(44px, 4.6vw, 64px); letter-spacing: .14em; line-height: 1; padding-left: .14em;
}
.auth__slogan {
  margin: 10px 0 0;
  font-family: var(--font-slogan);
  font-size: clamp(34px, 3.6vw, 50px); line-height: 1.1;
  transform: rotate(-4deg);
}
.auth__voet { margin: 0; font-size: 14px; opacity: .8; text-align: center; }

/* Formulierpaneel */
.auth__paneel {
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 20px);
  background: var(--wit);
}
.auth__kop {
  display: flex; align-items: center; gap: 10px;
  color: var(--rood);
}
.auth__kop-haan { width: 34px; height: auto; }
.auth__kop-naam { font-family: var(--font-kop); font-weight: 800; letter-spacing: .14em; font-size: 20px; }

.auth__formulier { width: 100%; max-width: 400px; margin: auto; padding: 32px 0; }
.auth__formulier h1 { margin: 0; font-size: 28px; font-weight: 700; }
.auth__intro { margin: 6px 0 28px; color: #5b6472; }
.auth__hulp { margin: 28px 0 0; font-size: 14px; color: #5b6472; line-height: 1.5; }
.auth__hulp a { color: var(--rood); font-weight: 700; text-decoration: none; }
.auth__hulp a:hover { text-decoration: underline; }
.auth__onder { font-size: 13px; color: #8a93a0; text-align: center; }

@media (min-width: 1024px) {
  .auth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth__merk { display: flex; flex-direction: column; }
  .auth__paneel { padding: 40px 64px; }
  .auth__kop { display: none; }
}
@media (min-width: 1400px) {
  .auth { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- Formulierelementen ---------- */

.formulier { display: flex; flex-direction: column; gap: 18px; }

.veld { display: flex; flex-direction: column; gap: 8px; }
.veld__label { font-size: 14px; font-weight: 700; color: var(--donker); }
.veld__label--rij { display: flex; justify-content: space-between; align-items: baseline; }
.veld__link { font-size: 13px; font-weight: 700; color: var(--rood); text-decoration: none; }
.veld__link:hover { text-decoration: underline; }

.veld__input {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid #dde3ec;
  border-radius: 14px;
  background: #f8fafd;
  font: 500 16px/1.2 var(--font);
  color: var(--donker);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.veld__input::placeholder { color: #a0a8b4; }
.veld__input:focus {
  outline: none;
  border-color: var(--rood);
  background: var(--wit);
  box-shadow: 0 0 0 4px rgba(227,6,19,.12);
}

.veld__wachtwoord { position: relative; display: block; }
.veld__wachtwoord .veld__input { padding-right: 52px; }
.veld__oog {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: #7a8391; cursor: pointer;
  display: grid; place-items: center;
}
.veld__oog:hover, .veld__oog.is-actief { color: var(--rood); background: rgba(227,6,19,.06); }

.vinkje { display: flex; align-items: center; gap: 10px; font-size: 15px; cursor: pointer; }
.vinkje input { width: 20px; height: 20px; accent-color: var(--rood); margin: 0; }

.formulier__fout {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdecee;
  color: #a4000c;
  font-size: 14px;
  font-weight: 500;
}

.knop-rood {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px;
  border: 0; border-radius: 999px;
  background: var(--rood); color: var(--wit);
  font: 700 17px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(227,6,19,.28);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.knop-rood:hover { background: var(--rood-donker); }
.knop-rood:active { transform: scale(.985); box-shadow: 0 4px 12px rgba(227,6,19,.28); }
.knop-rood:focus-visible { outline: 3px solid rgba(227,6,19,.4); outline-offset: 3px; }

/* ---------- Tijdelijke pagina ---------- */

.binnenkort {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}
.binnenkort img { width: 90px; }
.binnenkort h1 { font-weight: 700; margin: 18px 0 6px; }
.binnenkort a { color: var(--rood); font-weight: 700; }

/* ---------- App-schil ---------- */

.app-body { background: var(--achtergrond); }
body:not(.is-beheerder) .alleen-beheer { display: none !important; }

.app { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.app-hoofd { min-width: 0; display: flex; flex-direction: column; padding-bottom: calc(env(safe-area-inset-bottom) + 76px); }
.app-inhoud { padding: 0 20px 24px; max-width: 1100px; width: 100%; margin: 0 auto; }

.zijbalk { display: none; }
.zijbalk__merk { display: flex; align-items: center; gap: 10px; color: var(--rood); text-decoration: none; font-family: var(--font-kop); font-weight: 800; letter-spacing: .14em; font-size: 20px; padding: 8px 10px 22px; }
.zijbalk__merk img { width: 36px; height: auto; }
.zijbalk__nav { display: flex; flex-direction: column; gap: 4px; }
.zijbalk__nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; color: #4b5563; text-decoration: none; font-weight: 700; font-size: 15px; }
.zijbalk__nav a:hover { background: rgba(227,6,19,.06); color: var(--rood); }
.zijbalk__nav a.is-actief { background: var(--rood); color: var(--wit); box-shadow: 0 8px 18px rgba(227,6,19,.25); }
.zijbalk__lid { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 10px 4px; border-top: 1px solid #e7ebf2; }
.zijbalk__lid-tekst { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zijbalk__lid-tekst strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zijbalk__lid-tekst small { font-size: 12px; color: #6b7280; }

.app-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top) + 18px) 20px 18px; max-width: 1100px; width: 100%; margin: 0 auto; }
.app-kop__lid { display: flex; align-items: center; gap: 14px; }
.app-kop__groet { margin: 0; font-size: 13px; color: #5b6472; }
.app-kop__naam { margin: 0; font-size: 20px; font-weight: 700; }
.app-kop__rol { margin: 0; font-size: 13px; color: #5b6472; }

.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--rood); color: var(--wit); font-weight: 700; font-size: 15px; flex-shrink: 0; }
.avatar--groot { width: 56px; height: 56px; font-size: 20px; border: 3px solid var(--wit); box-shadow: 0 4px 14px rgba(33,40,50,.12); }

.onderbalk { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--wit); border-top: 1px solid #e7ebf2; padding: 6px 0 calc(env(safe-area-inset-bottom) + 6px); z-index: 20; }
.onderbalk a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; color: #6b7280; text-decoration: none; font-size: 11px; font-weight: 700; }
.onderbalk a.is-actief { color: var(--rood); }

@media (min-width: 1024px) {
  .app { grid-template-columns: 250px minmax(0, 1fr); }
  .zijbalk { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; padding: 22px 14px 16px; background: var(--wit); border-right: 1px solid #e7ebf2; }
  .onderbalk { display: none; }
  .app-hoofd { padding-bottom: 24px; }
  .app-kop { padding: 28px 32px 20px; }
  .app-kop__uitlogge { display: none; }
  .app-inhoud { padding: 0 32px 32px; }
}

.knop-tekst { border: 0; background: transparent; color: var(--rood); font: 700 15px var(--font); cursor: pointer; padding: 8px 10px; border-radius: 10px; }
.knop-tekst:hover { background: rgba(227,6,19,.08); }
.knop-icoon { width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: #6b7280; cursor: pointer; display: grid; place-items: center; font-size: 16px; }
.knop-icoon:hover { background: rgba(33,40,50,.06); color: var(--donker); }
.knop-rood--klein { width: auto; min-height: 42px; padding: 0 18px; font-size: 15px; box-shadow: 0 6px 14px rgba(227,6,19,.22); }
.knop-grijs { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: #eef1f6; color: var(--donker); font: 700 15px var(--font); cursor: pointer; }
.knop-grijs:hover { background: #e2e7ef; }
.knop-gevaar { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #b4000c; font: 700 15px var(--font); cursor: pointer; }
.knop-gevaar:hover { background: #fdecee; }

/* Pagina-opbouw */
.pagina-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pagina-kop h2 { margin: 0; font-size: 26px; font-weight: 700; }
.pagina-kop__acties { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pagina-intro { margin: -6px 0 16px; color: #5b6472; font-size: 14px; }
.zoekveld { display: flex; align-items: center; gap: 8px; background: var(--wit); border: 1.5px solid #dde3ec; border-radius: 999px; padding: 0 14px; min-height: 42px; color: #7a8391; }
.zoekveld input { border: 0; outline: none; background: transparent; font: 500 15px var(--font); color: var(--donker); width: 160px; }
.zoekveld:focus-within { border-color: var(--rood); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { border: 0; border-radius: 999px; padding: 8px 14px; background: var(--wit); color: #4b5563; font: 700 13px var(--font); cursor: pointer; box-shadow: 0 1px 3px rgba(33,40,50,.08); }
.chip.is-actief { background: var(--rood); color: var(--wit); }
.chip--sub { background: #eef1f6; display: inline-flex; align-items: center; gap: 6px; }
.chip--sub b { background: var(--wit); border-radius: 999px; padding: 1px 7px; font-size: 12px; }
.chip--sub:disabled { cursor: default; }
.chip--nieuw { background: transparent; border: 1.5px dashed #c4ccd8; color: var(--rood); }

.lijst { display: flex; flex-direction: column; gap: 10px; }
.lijst__leeg { color: #6b7280; text-align: center; padding: 30px 0; }

.lid-kaart, .kemissie-kaart { display: flex; align-items: center; gap: 14px; background: var(--wit); border-radius: 16px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(33,40,50,.05); text-align: left; }
.lid-kaart[role=button], .kemissie-kaart[role=button] { cursor: pointer; }
.lid-kaart[role=button]:hover, .kemissie-kaart[role=button]:hover { box-shadow: 0 8px 22px rgba(33,40,50,.1); }
.lid-kaart.is-inactief { opacity: .55; }
.lid-kaart__tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.lid-kaart__tekst strong { font-size: 16px; }
.lid-kaart__sub { font-size: 13px; color: #5b6472; }
.lid-kaart__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.lid-kaart__rechts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.lid-kaart__pijl { color: #a0a8b4; font-size: 22px; line-height: 1; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: color-mix(in srgb, var(--badge-kleur, var(--rood)) 14%, white); color: color-mix(in srgb, var(--badge-kleur, var(--rood)) 85%, black); }
.badge--sub { background: #eef1f6; color: #4b5563; }
.badge--rol { background: #e8f7ee; color: #157a3a; }
.badge--bestuur { background: #fff4e0; color: #9a5b00; }
.badge--beheerder { background: #fdecee; color: #a4000c; }
.badge--uit { background: #eef1f6; color: #6b7280; }

.kemissie-kaart__kleur { width: 14px; height: 44px; border-radius: 7px; background: var(--badge-kleur); flex-shrink: 0; }
.kemissie-kaart__aantal { display: flex; flex-direction: column; align-items: center; line-height: 1.1; color: var(--badge-kleur); }
.kemissie-kaart__aantal b { font-size: 22px; }
.kemissie-kaart__aantal small { font-size: 11px; color: #6b7280; }

.evenement-kaart { background: var(--wit); border-radius: 16px; padding: 14px; box-shadow: 0 4px 14px rgba(33,40,50,.05); }
.evenement-kaart__kop { display: flex; align-items: center; gap: 14px; }
.datumblok { width: 54px; height: 54px; border-radius: 12px; background: #fdecee; color: var(--rood); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.datumblok span { font-size: 22px; font-weight: 800; }
.datumblok small { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.subcomites { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f6; }

.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.tegel { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 18px 8px; border-radius: 16px; background: var(--wit); text-decoration: none; color: var(--donker); box-shadow: 0 4px 14px rgba(33,40,50,.05); }
.tegel__getal { font-size: 26px; font-weight: 800; color: var(--rood); }
.tegel__label { font-size: 13px; font-weight: 700; color: #5b6472; }

.kaart { background: var(--wit); border-radius: 20px; padding: 22px; box-shadow: 0 6px 20px rgba(33,40,50,.06); }
.kaart--rood { background: linear-gradient(135deg, var(--rood) 0%, var(--rood-donker) 100%); color: var(--wit); }
.kaart__label { margin: 0 0 6px; font-size: 13px; opacity: .85; }
.kaart__titel { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.kaart p:last-child { margin: 0; }

/* Dialoog */
.dialoog { border: 0; border-radius: 20px; padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 30px 70px rgba(33,40,50,.3); color: var(--donker); font-family: var(--font); }
.dialoog--smal { width: min(440px, calc(100vw - 32px)); }
.dialoog::backdrop { background: rgba(33,40,50,.45); backdrop-filter: blur(2px); }
.dialoog__form { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.dialoog__kop { display: flex; align-items: center; justify-content: space-between; }
.dialoog__kop h3 { margin: 0; font-size: 20px; font-weight: 700; }
.dialoog__velden { display: flex; flex-direction: column; gap: 14px; }
.dialoog__voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialoog__voet-rechts { display: flex; gap: 10px; }
.veld-rij { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .veld-rij { grid-template-columns: 1fr 1fr; } .veld-rij--3 { grid-template-columns: 1.2fr .8fr 1.2fr; } }
.veld__hulp { font-size: 12px; color: #6b7280; }
.veld__input--kleur { padding: 4px; height: 52px; }
select.veld__input, textarea.veld__input { padding: 12px 16px; min-height: 52px; }
textarea.veld__input { resize: vertical; line-height: 1.4; }
.dialoog .veld__input { min-height: 46px; }
.vinkgroep { border: 1px solid #e7ebf2; border-radius: 12px; padding: 10px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.vinkgroep legend { font-size: 13px; font-weight: 700; padding: 0 6px; color: #4b5563; }
.vinkgroep legend small { font-weight: 500; color: #6b7280; }
.vinkgroep .vinkje { font-size: 14px; }
.wachtwoord-toon { display: flex; align-items: center; gap: 10px; }
.wachtwoord-toon code { flex: 1; font-size: 18px; letter-spacing: .06em; background: #f8fafd; border: 1.5px dashed #dde3ec; border-radius: 12px; padding: 10px 14px; }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 86px); transform: translateX(-50%); background: var(--donker); color: var(--wit); padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(33,40,50,.3); z-index: 50; }
.toast--fout { background: #a4000c; }
@media (min-width: 1024px) { .toast { bottom: 28px; } }