/* ═══════════════════════════════════════════════
   VOLUNZO — Koffiebrand esthetiek
   Crème · Mokka · Warm zwart · Veel lucht
═══════════════════════════════════════════════ */
:root{
  /* ── Koffie × Gemeente palet ─────────────────────
     Warme koffietinten als basis,
     diep civic-blauw als primaire actie,
     goud-mokka als warm accent.
  ──────────────────────────────────────────────── */

  /* Achtergronden — koffievlek crème */
  --cream:#F7FAFD;
  --cream-dark:#DCEBF7;
  --cream-mid:#E3EFF9;

  /* Mokka — warm koffiebruin accent */
  --mokka:#7A5C38;
  --mokka-dark:#614829;
  --mokka-light:#F3EAD8;
  --mokka-mid:#E2CEB0;

  /* Civic blauw — gemeente / OBA uitstraling */
  --civic:#1A3A5C;        /* diep nachtblauw — hoofdaccent */
  --civic-mid:#2A5080;    /* hover / active */
  --civic-light:#E6EEF6;  /* lichte bg */
  --civic-border:#B8CEDF; /* border */

  /* Tekst */
  --warm-black:#18140F;
  --warm-900:#2A2218;
  --warm-600:#50443A;
  --warm-400:#8A7E74;
  --warm-200:#D8D0C6;
  --warm-100:#EBE5DC;

  /* Legacy aliases — behoud JS compatibiliteit */
  --a:var(--civic);--a-dark:var(--civic-mid);
  --a-light:var(--civic-light);--a-mid:var(--civic-border);
  --navy:var(--warm-black);--navy-mid:#352A20;--navy-light:var(--cream-mid);
  --indigo:var(--civic);--indigo-light:var(--civic-light);
  --mint:#3A6B58;--mint-light:#E4F0EB;
  --ink:var(--warm-black);--ink-mid:var(--warm-900);
  --muted:var(--warm-600);--hint:var(--warm-400);
  --bg:var(--cream);--bg-card:#FFFFFF;--bg-off:var(--cream);
  --line:var(--warm-200);--line-dark:#C4BAB0;
  --sh-xs:0 1px 4px rgba(24,20,15,.06);
  --sh-sm:0 2px 12px rgba(24,20,15,.08);
  --sh-md:0 6px 24px rgba(24,20,15,.10);
  --sh-lg:0 12px 40px rgba(24,20,15,.14);
  --r-xs:3px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:24px;
  --r:var(--r-xs);--r-lg:14px;--r-xl:18px;

  /* Typografie */
  --serif:'DM Serif Display',serif;
  --sans:'Inter',sans-serif;

  /* ── Accentkleur ────────────────────
     Vervangt de vorige oranje/koraalrode accentkleur (#D9564F). Ook de
     lichte "blauwe" achtergronden (bijv. onder de zoekfilters) zijn
     hierop afgestemd, zodat alles bij elkaar past.
  ──────────────────────────────────────────────── */
  --accent:#617C91;
  --accent-dark:#4C6377;
  --accent-light:#E9EEF2;
  --accent-border:#C7D3DB;
  --accent-rgb:97,124,145;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);background:var(--cream);color:var(--warm-900);letter-spacing:-.01em;
  min-height:100vh;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.6;
  font-weight:400}
#blauwlicht-overlay{position:fixed;inset:0;pointer-events:none;z-index:99999;opacity:0;background:#FF7A1A;mix-blend-mode:multiply;transition:opacity .25s}
#blauwlicht-overlay.aan{opacity:.14}
.screen{display:none}.screen.active{display:block}
#s1.screen.active,#s2.screen.active,#s3.screen.active{background:#FFFFFF;min-height:100vh}
#s1.active{display:flex;flex-direction:column}
/* Organisatiedashboard + subpagina's krijgen een neutrale, minder 'warme' achtergrond
   dan de publieke pagina's — voelt meer als een werkomgeving, minder als de brochure-site. */
#s5.screen.active,#s9.screen.active,#s10.screen.active{background:#F8F8F6;min-height:100vh}
h1,h2,h3{font-family:var(--serif);color:var(--warm-black);font-weight:400}

/* ── HEADER ───────────────────────────────────── */
.hdr{
  background:#FFFFFF;
  height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  position:sticky;top:0;z-index:500;
  box-shadow:0 2px 8px rgba(24,20,15,.06);
}
.logo{font-family:var(--serif);font-size:22px;color:var(--warm-black);
  cursor:pointer;letter-spacing:-0.03em;font-weight:400}
.logo-accent{color:var(--mokka)}
.hdr-nav{display:flex;gap:8px;align-items:center}
.btn-nav{
  background:#FFFFFF;border:1.5px solid var(--line-dark);
  color:var(--warm-600);border-radius:20px;
  padding:7px 14px;font-size:12.5px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:all .18s;
  letter-spacing:-.01em
}
.btn-icon-round{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
#btn-blauwlicht.actief{background:#2A2418;border-color:#2A2418;color:#FFD9A0}
.btn-nav:hover{border-color:var(--warm-400);color:var(--warm-black);background:var(--cream-mid)}
/* ── 3 onderdelen: elk met eigen accentkleur, ook als visuele legenda ── */
.btn-nav[data-sect="aanbod"].active{background:var(--mokka-light);border-color:var(--mokka);color:var(--mokka-dark);font-weight:700}
.btn-nav[data-sect="vrijwilliger"].active{background:var(--mint-light);border-color:var(--mint);color:var(--mint);font-weight:700}
.btn-nav[data-sect="org"]{background:var(--civic);border-color:var(--civic);color:#fff;font-weight:600}
.btn-nav[data-sect="org"]:hover{background:var(--civic-mid);border-color:var(--civic-mid);color:#fff}
.btn-nav[data-sect="org"].active{background:var(--civic);border-color:var(--civic);color:#fff}
.btn-nav-primary{
  background:#FFFFFF;border:1.5px solid var(--accent);
  color:var(--accent);font-weight:600
}
.btn-nav-primary:hover{background:var(--accent-light);border-color:var(--accent-dark);color:var(--accent-dark)}

/* ── HERO ─────────────────────────────────────── */
.hero{
  background:var(--accent-light);
  padding:48px 24px 40px;
  border-bottom:1px solid var(--accent-border);
}
.hero-met-decor{position:relative;overflow:hidden}
.hero-decor-iconen{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-decor-ic{position:absolute;opacity:.22;line-height:1}
.hero-met-decor h1,.hero-met-decor p{position:relative;z-index:1}
.login-banner{
  position:relative;overflow:hidden;background:var(--accent-light);
  border-top:1px solid var(--accent-border);
  padding:22px 24px;text-align:center
}
.login-banner-iconen{position:absolute;inset:0;pointer-events:none;z-index:0}
.taal-kiezer-wrap{position:relative}
.taal-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:500;
  background:#fff;border:1px solid var(--warm-200);border-radius:12px;
  box-shadow:var(--sh-md);padding:6px;min-width:160px
}
.taal-menu.open{display:block}
.taal-menu-opt{
  display:block;width:100%;text-align:left;padding:9px 12px;
  font-size:13px;font-weight:500;color:var(--warm-900);
  border-radius:8px;cursor:pointer;font-family:inherit;background:none;border:none
}
.taal-menu-opt:hover{background:var(--accent-light)}
.taal-menu-opt.actief{background:var(--accent-light);font-weight:700}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--mokka);font-size:12px;font-weight:500;
  letter-spacing:.6px;margin-bottom:18px;
  font-family:var(--sans)
}
.hero h1{
  font-family:var(--serif);font-size:34px;color:var(--warm-black);
  line-height:1.12;margin-bottom:14px;max-width:340px;
  letter-spacing:-.02em;font-weight:400
}
.hero h1 em{color:var(--mokka);font-style:italic}
.hero p{
  font-size:15px;color:var(--warm-900);line-height:1.7;
  max-width:300px;font-weight:400
}

/* ── STAP BAR ─────────────────────────────────── */
.step-bar{background:var(--accent);border-bottom:1px solid var(--accent-dark);padding:0 24px}
.step-inner{display:flex;align-items:center;gap:10px;height:46px;max-width:640px;margin:0 auto}
.step-num{
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.25);color:#FFFFFF;
  font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.step-txt{font-size:12px;font-weight:600;color:#FFFFFF;letter-spacing:-.01em}
.step-sep{flex:1;height:1px;background:rgba(255,255,255,.35);max-width:28px}
.step-num.done{background:rgba(255,255,255,.55);color:var(--accent)}
.step-num.inactive{background:rgba(255,255,255,.12);color:rgba(255,255,255,.55)}
.step-txt.inactive{color:rgba(255,255,255,.55);font-weight:400}

/* ── CONTENT ──────────────────────────────────── */
.content{max-width:640px;margin:0 auto;padding:32px 20px 120px}
.section-label{
  font-size:11px;font-weight:600;color:var(--warm-600);
  text-transform:uppercase;letter-spacing:2px;margin-bottom:20px
}

/* ── WIJKENKAARTEN ────────────────────────────── */
.wijken-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wijk-card{
  background:#FFFFFF;border:1px solid var(--warm-200);
  border-radius:16px;overflow:hidden;cursor:pointer;
  transition:all .24s ease;position:relative
}
.wijk-card:hover{
  border-color:var(--accent);
  box-shadow:0 8px 32px rgba(28,22,18,.10);
  transform:translateY(-2px)
}
.wijk-card.sel{
  border-color:var(--accent);border-width:2px;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15),0 8px 24px rgba(139,111,71,.12)
}
.wijk-card.breed{grid-column:1/-1}
.wijk-art{
  height:150px;overflow:hidden;background:#FFFFFF;
  display:flex;align-items:center;justify-content:center
}
.wijk-card.breed .wijk-art{height:170px}
.wijk-art svg{width:100%;height:100%;display:block}
.wijk-art img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.wijk-body{padding:16px 18px 18px;background:#FFFFFF;border-top:1px solid var(--warm-100)}
.wijk-name{
  font-family:var(--serif);font-size:17px;color:var(--warm-black);
  margin-bottom:4px;letter-spacing:-.02em;line-height:1.2;font-weight:400
}
.wijk-card.sel .wijk-name{color:var(--accent)}
.wijk-sub{font-size:12px;color:var(--warm-600);margin-bottom:10px;line-height:1.45}
.wijk-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;padding:4px 10px;
  border-radius:20px;letter-spacing:.3px
}
.wijk-badge.acts{background:var(--civic-light);color:#1A3A5C;border:1px solid var(--civic-border)}
.wijk-card.sel .wijk-badge.acts{background:var(--accent);color:#fff;border-color:var(--accent)}
.wijk-badge.none{background:var(--warm-100);color:var(--warm-400)}

/* ── BUURT CHIPS ──────────────────────────────── */
.buurt-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.buurt-chip{
  border:1.5px solid #18140F;border-radius:20px;
  padding:9px 20px;font-size:13px;font-weight:600;
  cursor:pointer;background:#FFFFFF;color:var(--warm-black);
  font-family:inherit;transition:all .16s;user-select:none;
  box-shadow:0 2px 6px rgba(24,20,15,.15)
}
.buurt-chip:active{transform:scale(.97);box-shadow:0 1px 2px rgba(24,20,15,.15)}
.buurt-chip:hover{background:#F5F5F3;box-shadow:0 3px 9px rgba(24,20,15,.2)}
.buurt-chip.sel{
  background:var(--civic);border-color:var(--civic);
  color:#FFFFFF;font-weight:500
}
.buurt-chip.alle{border-style:dashed;color:var(--warm-600)}
.buurt-chip.alle:hover{border-color:var(--warm-black);color:var(--warm-black);border-style:dashed}
.buurt-chip.alle.sel{border-style:solid}
.buurt-chip-telling{font-size:11px;font-weight:700;color:var(--civic);background:var(--civic-light);border-radius:10px;padding:1px 7px;margin-left:2px}
.buurt-chip.sel .buurt-chip-telling{background:rgba(255,255,255,.25);color:#fff}
.buurt-chip-leeg{background:#FFFFFF;border-color:var(--warm-200);color:var(--warm-400);cursor:default;pointer-events:none;box-shadow:none}

/* ── CTA BAR ──────────────────────────────────── */
.cta-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:#18140F;
  border-top:none;
  box-shadow:0 -6px 24px rgba(24,20,15,.4);
  padding:14px 20px 24px;display:none
}
.cta-bar.show{display:block}
.cta-inner{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}
.cta-info strong{display:block;font-size:15px;font-weight:500;color:#FFFFFF;font-family:var(--serif)}
.cta-info span{font-size:12px;color:#B8B0A6}
.btn-cta{
  background:var(--accent);color:#FFFFFF;border:2px solid #FFFFFF;
  border-radius:20px;padding:11px 26px;font-size:14px;
  font-weight:600;cursor:pointer;font-family:inherit;
  white-space:nowrap;transition:all .18s;letter-spacing:-.01em;
  box-shadow:0 3px 10px rgba(var(--accent-rgb),.4)
}
.btn-cta:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(var(--accent-rgb),.5)}

/* ── ACT TOPBAR ───────────────────────────────── */
.act-top{background:var(--accent);position:sticky;top:60px;z-index:400;border-bottom:1px solid var(--accent-dark)}
.act-top-inner{display:flex;align-items:center;gap:12px;padding:0 20px;height:50px;max-width:640px;margin:0 auto}
.btn-back{
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.4);
  border-radius:20px;padding:6px 14px;font-size:12px;font-weight:500;
  cursor:pointer;font-family:inherit;color:#FFFFFF;
  display:flex;align-items:center;gap:5px;transition:all .15s;flex-shrink:0
}
.btn-back:hover{border-color:rgba(255,255,255,.8);color:#FFFFFF;background:rgba(255,255,255,.2)}
.act-breadcrumb{
  font-size:13px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ── PAGE TOPBAR — voor losse pagina's zoals "Mijn activiteiten" /
   "Alle activiteiten", los van het dashboard (civic-blauw i.p.v. rood) ── */
.page-top{background:var(--civic);position:sticky;top:60px;z-index:400;border-bottom:1px solid var(--civic-mid)}
.page-top-inner{display:flex;align-items:center;gap:12px;padding:0 20px;height:50px;max-width:640px;margin:0 auto}
.page-breadcrumb{font-size:14.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── DAG FILTER ────────────────────────────────── */
.dag-filter-grid{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:14px}
.dag-filter-btn{
  border:1.5px solid #18140F;border-radius:20px;
  padding:9px 20px;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;color:var(--warm-black);
  background:#FFFFFF;transition:all .16s;white-space:nowrap;
  letter-spacing:-.01em;line-height:1;box-shadow:0 2px 6px rgba(24,20,15,.15)
}
.dag-filter-btn:active{transform:scale(.97);box-shadow:0 1px 2px rgba(24,20,15,.15)}
.dag-filter-btn:hover{background:#F5F5F3;transform:translateY(-1px)}
.dag-filter-btn.active{background:var(--civic);border-color:var(--civic);color:#FFFFFF;box-shadow:0 3px 12px rgba(26,58,92,.25)}
.dag-filter-btn.inactive{background:#FFFFFF;border-color:var(--warm-200);color:var(--warm-400);pointer-events:none;box-shadow:none}
.dag-filter-alle{
  border:1.5px solid var(--warm-400);border-radius:20px;
  padding:8px 18px;font-size:13px;font-weight:500;
  cursor:pointer;font-family:inherit;color:var(--warm-black);
  background:#FFFFFF;transition:all .16s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;letter-spacing:-.01em
}
.dag-filter-alle:hover{border-color:var(--warm-black);color:var(--warm-black);background:var(--cream)}
.dag-filter-alle.active{background:var(--warm-black);border-color:var(--warm-black);color:#FFFFFF}

/* ── CATEGORIE FILTER ─────────────────────────── */
.cat-filter{background:var(--accent-light);border-bottom:1px solid var(--accent-border);padding:0 20px}
.cat-filter-inner{max-width:640px;margin:0 auto;padding:14px 0 18px}
.cat-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--warm-400);margin-bottom:10px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-bottom:14px}
.cat-all{
  grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--warm-200);border-radius:10px;padding:9px;
  font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  color:var(--warm-600);background:#FFFFFF;transition:all .14s
}
.cat-all:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-light)}
.cat-all.active{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.cat-tile{
  border:1px solid var(--warm-200);border-radius:10px;
  padding:10px 4px 8px;text-align:center;cursor:pointer;
  transition:all .14s;background:#FFFFFF
}
.cat-tile:hover{border-color:var(--accent);background:var(--accent-light)}
.cat-tile.active{background:var(--accent);border-color:var(--accent)}
.cat-tile.inactive{opacity:.2;pointer-events:none}
.cat-icon{width:26px;height:26px;margin:0 auto 4px;display:block}
.cat-name{font-size:9px;font-weight:600;color:var(--warm-400);line-height:1.2;letter-spacing:.3px}
.cat-tile.active .cat-name{color:#FEFCF9}

/* ── ACT LIJST ────────────────────────────────── */
.act-content{max-width:640px;margin:0 auto;padding:34px 20px 120px}
.act-count{font-size:10px;font-weight:600;color:var(--warm-400);text-transform:uppercase;letter-spacing:2px;margin-bottom:20px}
.act-list{display:flex;flex-direction:column;gap:36px}
.no-results{background:#FFFFFF;border-radius:16px;padding:48px 24px;text-align:center;border:1px solid var(--warm-200)}
.no-results p{color:var(--warm-600);font-size:14px;margin-top:10px;line-height:1.7}

/* ── ACTIVITEITSKAART ─────────────────────────── */
.acard-mini{background:#fff;border:1px solid var(--warm-200);border-radius:10px;padding:10px 14px;margin-bottom:8px}
.acard-simpel{background:#fff;border:1.5px solid #D8D0C6;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 8px rgba(24,20,15,.06)}
.acard-simpel-band{padding:16px 18px;color:#fff;position:relative}
.acard-simpel-naam{font-family:var(--serif);font-size:17px;font-weight:700}
.acard-simpel-org{font-size:12.5px;opacity:.9;margin-top:2px}
.acard-simpel-iconen{position:absolute;top:14px;right:14px;display:flex;gap:6px}
.acard-simpel-icoonbtn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-light);border:1px solid var(--warm-200);color:#18140F;font-size:13px;cursor:pointer;text-decoration:none;box-sizing:border-box}
.acard-simpel-icoonbtn:hover{box-shadow:0 2px 8px rgba(24,20,15,.12)}
.acard-simpel-body{padding:14px 18px 18px}
.acard-simpel-meta-rij{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.acard-simpel-meta{font-size:12.5px;color:#5F5E5A;line-height:1.8;overflow-wrap:anywhere;word-break:break-word;min-width:0;flex:1}
.acard-simpel-meta .meta-ic{display:inline-flex;vertical-align:-2px;margin-right:5px;color:#18140F}
.acard-simpel-meta .meta-ic-pin{color:#C1443D}
.acard-simpel-meta .meta-ic-euro{color:var(--mint)}
.acard-simpel-meta strong{font-weight:600;color:#3A362F;letter-spacing:-.005em}
.acard-simpel-meta-iconen{display:flex;gap:6px;flex-shrink:0}
.acard-simpel-icoonbtn-wit{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;border:1.5px solid var(--acc,var(--warm-200));color:#18140F;font-size:13px;cursor:pointer;box-sizing:border-box;box-shadow:0 1px 3px rgba(24,20,15,.1);transition:all .15s;flex-shrink:0;padding:0;font-family:inherit}
.acard-simpel-icoonbtn-wit:hover{box-shadow:0 3px 10px rgba(24,20,15,.16);transform:translateY(-1px)}
.acard-simpel-icoonbtn-wit:active{box-shadow:0 1px 2px rgba(24,20,15,.12);transform:translateY(0)}
.acard-simpel-omschr{font-size:13px;color:#7A6F62;line-height:1.6;margin-bottom:8px;overflow-wrap:anywhere;word-break:break-word}
.acard-simpel-actie-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.acard-simpel-hoofdrij{display:flex;flex-direction:column;gap:8px;flex:0 1 58%;min-width:0;max-width:58%}
.acard-simpel-contact{width:100%;text-align:center;background:var(--acc,var(--accent));color:#fff;border:1.5px solid var(--acc,var(--accent));border-radius:14px;padding:12px 8px;font-size:13.5px;line-height:1.3;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box;white-space:normal;word-break:break-word}
.acard-simpel-contact.disabled{background:#eee;color:#999;border-color:#ddd;cursor:default}
.acard-simpel-vrijw{width:100%;text-align:center;background:#fff;border:1.5px solid var(--acc,var(--accent));color:var(--acc,var(--accent));border-radius:14px;padding:12px 8px;font-size:13.5px;line-height:1.3;font-weight:600;cursor:pointer;font-family:inherit;box-sizing:border-box;text-decoration:none;white-space:normal;word-break:break-word}
.acard-simpel-vrijw.disabled{border-color:#ddd;color:#999;cursor:default}
.acard-simpel-rij{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.acard-simpel-klein{width:32px;height:32px;display:flex;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--warm-200);color:#18140F;border-radius:50%;font-size:13px;cursor:pointer;font-family:inherit;text-decoration:none;box-sizing:border-box;padding:0;flex:0 0 auto;box-shadow:0 1px 3px rgba(24,20,15,.1);transition:all .15s}
.acard-simpel-klein:hover{box-shadow:0 3px 10px rgba(24,20,15,.16);transform:translateY(-1px)}
.acard-simpel-klein:active{box-shadow:0 1px 2px rgba(24,20,15,.12);transform:translateY(0)}
.s2-spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--civic-border,#B8CEDF);border-top-color:var(--civic);flex-shrink:0;animation:s2-spin .7s linear infinite}
@keyframes s2-spin{to{transform:rotate(360deg)}}
.acard{
  background:#FFFFFF;
  border:1.5px solid var(--warm-300,#D8D0C6);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  box-shadow:0 1px 4px rgba(24,20,15,.05);
  transition:box-shadow .2s,border-color .2s,transform .2s
}
.acard:hover{
  box-shadow:0 6px 24px rgba(28,22,18,.08);
  border-color:var(--warm-300,#C8C2BB);
  transform:translateY(-1px)
}
.acard::before{display:none}

.acard-inner{padding:22px 22px 0 22px}
.acard-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--warm-100)
}
/* Alle categorie icon achtergronden → één warme tint */
.cat-spel .acard-icon{background:#FFF0EA;color:#C0460A}
.cat-taal .acard-icon{background:var(--civic-light);color:var(--civic)}
.cat-eten .acard-icon{background:#FEF9EC;color:#7A5215}
.cat-muziek .acard-icon{background:#F5F0FF;color:#5B3FA0}
.cat-sport .acard-icon{background:var(--civic-light);color:#1A3A5C}
.cat-cultuur .acard-icon{background:#FFF0F5;color:#8C2252}
.cat-overig .acard-icon{background:var(--warm-100);color:var(--warm-600)}
.cat-vervoer .acard-icon{background:#F0F7FF;color:#1A4A80}
.cat-zorg .acard-icon{background:#FFF0F5;color:#8C2252}
.cat-uiterlijk .acard-icon{background:#FFF0EA;color:#C0460A}
.acard-info{flex:1;min-width:0}
.acard-fswipe-wrap{position:relative;overflow:hidden;border-radius:16px;min-height:340px}
.acard-fswipe-track{
  display:flex;width:200%;height:100%;transition:transform .32s cubic-bezier(.2,.8,.3,1);
  touch-action:pan-y;cursor:grab
}
.acard-fswipe-track:active{cursor:grabbing}
.acard-fswipe-slide{width:50%;height:100%;flex-shrink:0;box-sizing:border-box;overflow:hidden}
.acard-fswipe-slide-info{display:flex;flex-direction:column;justify-content:center}
.acard-fswipe-photo{display:flex;flex-direction:column;padding:0 0 12px;gap:0;height:100%}
.acard-photo-body{padding:14px 32px 0;display:flex;flex-direction:column;gap:14px}
.acard-banner-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;color:#fff}
.acard-banner-top-tekst{min-width:0}
.acard-banner-top .acard-banner-title{font-family:'DM Serif Display',serif;font-size:18px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-banner-top .acard-banner-loc{font-size:11.5px;font-weight:600;opacity:.9;margin-top:2px;text-transform:uppercase;letter-spacing:.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-banner-website-btn{
  flex-shrink:0;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.85
}
.acard-banner-website-btn svg{width:12px;height:12px}
.acard-banner-website-btn:hover{background:rgba(255,255,255,.22);opacity:1}
.acard-banner-website-btn.disabled{
  opacity:.35;cursor:default;pointer-events:none
}
.acard-photo-audio-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:999px;background:#FFFFFF;border:1.5px solid var(--warm-200);
  padding:9.5px 16px;font-size:13.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .15s
}
.acard-photo-audio-btn:hover{box-shadow:0 2px 8px rgba(24,20,15,.12)}
.acard-photo-audio-btn.playing{background:currentColor}
.acard-photo-audio-btn.playing svg,.acard-photo-audio-btn.playing span{color:#FFFFFF!important;stroke:#FFFFFF!important}
.acard-photo-audio-btn.disabled{
  color:var(--warm-300,#CFC7BC)!important;border-color:var(--warm-100)!important;
  opacity:.55;cursor:default;pointer-events:none
}
.acard-photo-img{width:100%;height:100%;overflow:hidden}
.acard-photo-img svg,.acard-photo-img img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.acard-photo-stage{position:relative;width:100%;min-height:clamp(200px,42vw,340px);flex:1 1 auto;overflow:hidden;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)}
.acard-photo-stage .acard-photo-img{position:absolute;inset:0}
.acard-photo-descpanel{
  position:absolute;inset:0;
  background:radial-gradient(circle at 50% 20%, var(--cream) 0%, var(--cream-mid) 75%);
  display:flex;align-items:center;justify-content:center;padding:22px 26px;
  opacity:0;pointer-events:none;transition:opacity .18s;overflow:auto
}
.acard-photo-stage.showdesc .acard-photo-img{opacity:0}
.acard-photo-stage.showdesc .acard-photo-descpanel{opacity:1;pointer-events:auto}
.acard-photo-descpanel-inner{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:340px;margin:0 auto}
.acard-photo-meta-bar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px 8px;
  padding-top:14px;border-top:1px solid rgba(28,22,18,.1);width:100%
}
.acard-photo-meta-item{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:#FFFFFF;border:1px solid rgba(28,22,18,.08);border-radius:20px;
  padding:5px 12px;font-size:11.5px;font-weight:600;color:var(--warm-700,var(--warm-600));
  box-shadow:0 1px 2px rgba(28,22,18,.04)
}
.acard-photo-desc{
  position:relative;font-size:14px;color:var(--warm-900);line-height:1.65;font-style:italic;
  text-align:center;max-width:100%;padding-top:6px;overflow-wrap:anywhere;word-break:break-word
}
.acard-photo-desc:before{
  content:"“";position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:38px;font-style:normal;font-weight:400;
  color:rgba(28,22,18,.16);line-height:1
}
.acard-photo-caption{font-size:11.5px;color:var(--warm-400);text-align:center}
.acard-photo-bottom-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
  margin-top:10px;padding:0 16px
}
.acard-photo-info-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:999px;background:#FFFFFF;border:1.5px solid var(--warm-200);
  padding:9.5px 16px;font-size:13.5px;font-weight:700;font-family:inherit;
  cursor:pointer;transition:all .15s
}
.acard-photo-info-btn:hover{box-shadow:0 2px 8px rgba(24,20,15,.12)}
.acard-photo-info-btn.open{background:currentColor}
.acard-photo-info-btn.open svg,.acard-photo-info-btn.open span{color:#FFFFFF!important;stroke:#FFFFFF!important}
.acard-photo-aanmeld-bar{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  border:none;cursor:pointer;font-family:inherit;
  padding:10px 24px;font-size:13.5px;font-weight:700;color:#FFFFFF;
  letter-spacing:.01em;transition:opacity .15s
}
.acard-photo-aanmeld-bar:hover{opacity:.9}
.acard-fswipe-dots{display:flex;align-items:center;justify-content:center;gap:5px;padding:7px 20px}
.acard-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)!important;opacity:.7;transition:opacity .15s,transform .15s}
.acard-fswipe-hint{
  display:inline-flex;align-items:center;
  color:rgba(255,255,255,.92);
  font-size:10.5px;font-weight:700;padding:2px 8px;
  margin-left:4px;animation:acard-hint-nudge 2.2s ease-in-out infinite
}
@keyframes acard-hint-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.acard-dot.on{opacity:1;transform:scale(1.4);background:#fff!important}
.acard-banner-top{padding:18px 20px 16px;color:#fff}
.acard-banner-title{
  font-family:var(--serif);font-size:22px;line-height:1.2;
  letter-spacing:-.02em;font-weight:400;margin-bottom:3px
}
.acard-banner-loc{font-size:12.5px;font-weight:600;opacity:.92;letter-spacing:.1px}
.acard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11px;font-weight:500;padding:4px 10px;
  border-radius:20px;white-space:nowrap
}
.tag-tijd{background:var(--civic-light);color:#1A3A5C;border:1px solid var(--civic-border)}
.tag-prijs{background:#FEF9EC;color:#7A5215;border:1px solid #E8D5A3}
.tag-freq{background:var(--civic-light);color:var(--civic);border:1px solid #C0CEDF}
.tag-eenmalig{background:var(--mokka-light);color:var(--mokka-dark);border:1px solid var(--mokka-mid);font-weight:700}
.tag-vers{background:var(--mint-light);color:var(--mint,#3A6B58);border:1px solid rgba(58,107,88,.25)}
.tag-vers-onbekend{background:var(--warm-100);color:var(--warm-400);border:1px solid var(--warm-200)}
.tag-vers-stale{background:#FFF3E0;color:#B45309;border:1px solid #F5CB8C;font-weight:700}
.tag-loc{background:#F2F7F3;color:#2D5C3E;border:1px solid #BCDAC6}
.tag-cat{background:#F5F0FA;color:#5B3B7A;border:1px solid #DCC9EC}
.tag-persoon{background:var(--warm-100);color:var(--warm-700,#4A4238);border:1px solid var(--warm-200)}
.acard-desc{
  font-size:13.5px;color:var(--warm-900);line-height:1.7;
  margin-bottom:18px;font-weight:400;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}

/* Audio balk — discreet */
.acard-audio{
  width:100%;display:flex;align-items:center;gap:12px;
  background:transparent;border:none;
  border-top:1px solid var(--warm-100);
  padding:12px 22px;cursor:pointer;font-family:inherit;
  text-align:left;transition:background .12s
}
.acard-audio:hover{background:var(--warm-100)}
.audio-play{
  width:28px;height:28px;background:var(--civic);
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.audio-txt strong{display:block;font-size:12px;font-weight:500;color:var(--warm-black)}
.audio-txt span{font-size:11px;color:var(--warm-400)}

/* Acties — compacte vierkante tegels (2x2), icoon boven tekst */
.acard-actions{padding:16px 20px 16px;display:flex;flex-direction:column;gap:8px}
.acard-actions-roomy{padding:6px 20px 14px;gap:12px}
.acard-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.actie-tegel{
  aspect-ratio:1/1;max-height:108px;border:1.5px solid var(--warm-400);border-radius:16px;
  padding:10px;cursor:pointer;font-family:inherit;
  background:#FFFFFF;transition:all .15s;text-align:center;text-decoration:none;color:inherit;
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.actie-tegel:hover{box-shadow:0 4px 12px rgba(24,20,15,.12)}
.actie-tegel.tegel-aanmeld{background:var(--civic);border-color:var(--civic)}
.actie-tegel-titel{font-size:13px;font-weight:700;line-height:1.2}
.actie-tegel.tegel-aanmeld .actie-tegel-titel{color:#FFFFFF}
/* Vrijwilliger-tegel bewust anders (mintgroen) dan de Aanmeld-tegel (orgkleur), zodat de twee acties visueel uit elkaar te houden zijn */
.actie-tegel.tegel-vrijw{background:var(--mint,#3A6B58);border-color:var(--mint,#3A6B58)}
.actie-tegel.tegel-vrijw .actie-tegel-titel{color:#FFFFFF}
/* Op de knoppen-slide krijgen alle tegels de kleur van de kaart (inline achtergrond), met witte tekst/icoon */
.actie-tegel.tegel-solid,.actie-tegel-link.tegel-solid{color:#FFFFFF!important}
.actie-tegel.tegel-solid .actie-tegel-titel,.actie-tegel-link.tegel-solid .actie-tegel-titel{color:#FFFFFF}
.actie-tegel.tegel-solid svg,.actie-tegel-link.tegel-solid svg{color:#FFFFFF}
.actie-tegel-link{
  aspect-ratio:1/1;max-height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--mint,#3A6B58);border-radius:16px;
  padding:10px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  background:#FFFFFF;transition:all .15s;text-decoration:none;
  width:100%;color:var(--warm-900)
}
.actie-tegel-link:hover{box-shadow:0 4px 12px rgba(24,20,15,.12)}
.actie-tegel-link-wide{
  aspect-ratio:auto;max-height:none;flex-direction:row;padding:11px 14px;gap:8px
}
.acard-cta-utils{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-top:0}
.actie-util-icon{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border-radius:14px;border:1px solid var(--warm-200);background:#fff;
  padding:7px 4px;font-size:10.5px;font-weight:600;color:var(--warm-600);
  cursor:pointer;font-family:inherit;transition:all .15s;white-space:normal;text-align:center;line-height:1.25
}
.actie-util-icon:hover{background:var(--cream-mid);border-color:var(--warm-400);color:var(--warm-black)}
.actie-util-icon.done{background:var(--mint-light);border-color:rgba(58,107,88,.3);color:var(--mint,#3A6B58);pointer-events:none}

/* Route + Geluid: kleine pill-knoppen naast elkaar */
.acard-sec-row{display:flex;gap:7px;grid-column:1/-1;padding-top:2px}
.btn-sec-small{
  display:inline-flex;align-items:center;gap:5px;
  background:#FFFFFF;border:1px solid var(--accent-border);border-radius:20px;
  padding:7px 14px;font-size:11px;font-weight:500;
  color:var(--accent);cursor:pointer;font-family:inherit;
  transition:all .15s;text-decoration:none;white-space:nowrap
}
.btn-sec-small:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent-dark)}

/* Verberg oude route/geluid classes */
.btn-route,.btn-geluid{display:none}

/* Footer acties — nog discreter */
.acard-footer{
  border-top:1px solid var(--warm-100);
  padding:10px 22px;display:flex;gap:6px;overflow-x:auto
}
.acard-footer::-webkit-scrollbar{display:none}
.btn-sec{
  background:#FFFFFF;border:1px solid var(--warm-200);border-radius:20px;
  padding:5px 12px;font-size:11px;font-weight:500;
  cursor:pointer;font-family:inherit;color:var(--warm-600);
  display:flex;align-items:center;gap:4px;
  white-space:nowrap;flex-shrink:0;transition:all .14s
}
.btn-sec:hover{background:var(--cream-mid);border-color:var(--warm-400);color:var(--warm-black)}
.btn-sec.done{background:var(--mint-light);border-color:rgba(58,107,88,.3);color:var(--mint,#3A6B58);pointer-events:none}
.btn-sec.danger{background:#fff;border-color:#EAD9C2;color:#8A5A1E}
.btn-sec.danger:hover{background:var(--mokka-light);border-color:var(--mokka-mid);color:var(--mokka-dark)}
.btn-sec.danger.done{background:var(--mokka-light);border-color:var(--mokka-mid);color:var(--mokka-dark)}

/* ── AANMELD MODAL ────────────────────────────── */
.aanmeld-overlay{
  position:fixed;inset:0;background:rgba(28,22,18,.45);
  backdrop-filter:blur(6px);z-index:600;
  display:none;align-items:flex-end;justify-content:center
}
.aanmeld-overlay.open{display:flex;animation:fade-in .22s}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.aanmeld-sheet{
  background:#FFFFFF;border-radius:24px 24px 0 0;
  width:100%;max-width:640px;max-height:88vh;overflow-y:auto;
  animation:slide-up .28s cubic-bezier(.32,1,.56,1)
}
@keyframes slide-up{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.sheet-drag{width:36px;height:3px;background:var(--warm-200);border-radius:2px;margin:14px auto 18px}
.sheet-pad{padding:0 24px 40px}
.sheet-title{font-family:var(--serif);font-size:26px;color:var(--warm-black);margin-bottom:6px;letter-spacing:-.03em;font-weight:400}
.sheet-sub{font-size:14px;color:var(--warm-600);margin-bottom:24px;line-height:1.65;font-weight:400}
.aanmeld-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.aanmeld-choice{
  border:1px solid var(--warm-200);border-radius:16px;
  padding:18px 14px;cursor:pointer;text-align:center;
  transition:all .18s;background:#FFFFFF
}
.aanmeld-choice:hover{border-color:var(--warm-black);transform:translateY(-1px);box-shadow:var(--sh-sm)}
.aanmeld-choice.sel{border-color:var(--accent);border-width:2px;background:var(--accent-light);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.choice-icon{width:44px;height:44px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--warm-100)}
.choice-title{font-size:13px;font-weight:500;color:var(--warm-black);margin-bottom:3px}
.choice-sub{font-size:11px;color:var(--warm-400);line-height:1.5}
.aanmeld-contact-row{display:flex;flex-direction:column;gap:32px;margin-top:14px}
.aanmeld-contact-btn{
  display:flex;align-items:center;gap:14px;
  background:var(--cream);border:1px solid var(--warm-200);
  border-radius:14px;padding:14px 16px;text-decoration:none;
  transition:all .16s;cursor:pointer;font-family:inherit
}
.aanmeld-contact-btn:hover{border-color:var(--warm-black);background:var(--cream-mid);transform:translateX(2px)}
.aanmeld-contact-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--warm-100)}
.aanmeld-contact-txt strong{display:block;font-size:14px;font-weight:500;color:var(--warm-black)}
.aanmeld-contact-txt span{font-size:12px;color:var(--warm-400)}

/* ── FORMULIEREN ──────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(28,22,18,.45);
  backdrop-filter:blur(6px);z-index:600;
  display:none;align-items:flex-end;justify-content:center
}
.overlay.open{display:flex;animation:fade-in .22s}
.sheet{
  background:#FFFFFF;border-radius:24px 24px 0 0;
  width:100%;max-width:640px;max-height:92vh;overflow-y:auto;overflow-x:hidden;
  padding:0 24px 48px;animation:slide-up .28s cubic-bezier(.32,1,.56,1)
}
.sh-handle{width:36px;height:3px;background:var(--warm-200);border-radius:2px;margin:14px auto 20px}
.sh-title{font-family:var(--serif);font-size:26px;color:var(--warm-black);margin-bottom:6px;letter-spacing:-.03em;font-weight:400}
.sh-sub{font-size:14px;color:var(--warm-600);margin-bottom:24px;line-height:1.65;font-weight:400}
.fr{margin-bottom:16px;min-width:0;max-width:100%}
.fr label{display:block;font-size:11px;font-weight:600;color:var(--warm-600);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.fr input,.fr select,.fr textarea{
  width:100%;padding:14px 16px;font-size:14px;
  border:1.5px solid var(--warm-400);border-radius:10px;
  background:#FFFFFF;color:#1C1612;font-family:inherit;
  transition:border-color .14s,box-shadow .14s;font-weight:400
}
.fr input[type="time"]{text-align:center;font-weight:500;letter-spacing:.02em}
.fr input:focus,.fr select:focus,.fr textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)
}
.fr textarea{min-height:84px;resize:vertical}
/* Iets 'rijkere' velden op pagina 1 en 2 — grotere ronding, zachte schaduw,
   een icoontje vooraan — de rest van de app (dashboard) blijft ongewijzigd. */
.input-icoon-wrap{position:relative}
.input-icoon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--warm-400);pointer-events:none;transition:color .14s;display:flex;z-index:1}
.input-icoon-wrap input:focus~.input-icoon,.input-icoon-wrap input:focus+.input-icoon{color:var(--accent)}
#s1 .fr input, #s2 .fr input{
  border-radius:16px;font-size:15px;padding:15px 16px 15px 44px;
  border:1.5px solid var(--warm-200);
  box-shadow:0 1px 3px rgba(24,20,15,.05);
  transition:border-color .14s,box-shadow .14s,transform .1s
}
#s1 .fr input:focus, #s2 .fr input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12),0 2px 8px rgba(24,20,15,.06)
}
#s2 .zoek-input-wrap input{padding-right:46px}
.fr select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A89E95' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center
}
.fr-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:16px}
@media (max-width:600px){
  .fr-2-tijd{grid-template-columns:1fr}
}
.fr-2 .fr{margin:0}
.fr-hint{font-size:11px;color:var(--warm-400);margin-top:5px;line-height:1.55}
.divider{
  font-size:10px;font-weight:600;color:var(--warm-400);
  text-transform:uppercase;letter-spacing:1.5px;
  margin:20px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--warm-200)
}
.btn-primary-full{
  width:100%;background:var(--accent);color:#FFFFFF;border:none;
  border-radius:20px;padding:15px;font-size:14px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:all .18s;margin-top:10px
}
.btn-primary-full:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-secondary-full{
  width:100%;background:#FFFFFF;color:var(--warm-black);
  border:1.5px solid var(--warm-400);border-radius:20px;
  padding:13px;font-size:14px;font-weight:500;
  cursor:pointer;font-family:inherit;margin-top:8px;transition:all .16s
}
.btn-secondary-full:hover{border-color:#524840;color:#1C1612;background:#F7F3EE}
.check-row{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;
  background:#FFFFFF;border:1.5px solid var(--warm-400);
  border-radius:12px;padding:14px 16px
}
.check-row input{
  width:20px;height:20px;min-width:20px;margin-top:1px;
  accent-color:var(--civic);cursor:pointer;border-radius:4px
}
.check-row label{
  font-size:13px;color:var(--warm-black);font-weight:500;cursor:pointer;
  line-height:1.6;text-transform:none;letter-spacing:0
}
.check-row:has(input:checked){
  background:var(--civic-light);border-color:var(--civic-border)
}

/* ── AANMELDPAGINA ────────────────────────────── */
.reg-hero{
  background:var(--accent-light);
  padding:40px 24px 36px;
  border-bottom:1px solid var(--accent-border)
}
.reg-hero h2{font-family:var(--serif);font-size:32px;color:var(--warm-black);margin-bottom:8px;letter-spacing:-.03em;font-weight:400}
.reg-hero p{font-size:14px;color:var(--warm-600);line-height:1.7;max-width:300px}
.reg-content{max-width:560px;margin:0 auto;padding:32px 20px 100px}
.rol-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px}
.rol-card{
  border:1px solid var(--warm-200);border-radius:16px;
  padding:24px 16px;cursor:pointer;text-align:center;
  transition:all .18s;background:#FFFFFF
}
.rol-card:hover{border-color:var(--warm-black);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.rol-card.sel{border-width:2px}
/* vrijwilliger kaart → rood */
#rol-vw.sel{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
#rol-vw.sel .rol-title{color:var(--accent-dark)}
/* activiteit opstarten kaart → mint groen */
#rol-sw.sel{border-color:var(--mint);background:var(--mint-light);box-shadow:0 0 0 3px rgba(58,107,88,.15)}
#rol-sw.sel .rol-title{color:var(--mint)}
.rol-icon{width:48px;height:48px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;background:var(--warm-100)}
.rol-title{font-size:15px;font-weight:400;color:var(--warm-black);margin-bottom:6px;font-family:var(--serif);letter-spacing:-.01em}
.rol-sub{font-size:12px;color:var(--warm-600);line-height:1.6}
.reg-form{display:none}.reg-form.show{display:block}
#form-sw.show{background:#F8F8F6;padding:20px;border-radius:16px}
.vw-opties{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.vw-optie{border:1px solid var(--warm-200);border-radius:14px;padding:16px 14px;cursor:pointer;text-align:center;transition:all .16s;background:#FFFFFF}
.vw-optie:hover{border-color:var(--warm-black)}
.vw-optie.sel{border-color:var(--accent);border-width:2px;background:var(--accent-light)}
.vw-optie-title{font-size:13px;font-weight:500;color:var(--warm-black);margin-bottom:3px}
.vw-optie.sel .vw-optie-title{color:var(--accent-dark)}
.vw-optie-sub{font-size:11px;color:var(--warm-400);line-height:1.5}

/* ── BESCHIKBAARHEID ──────────────────────────── */
.dag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.dag-btn{
  border:1px solid var(--warm-200);border-radius:10px;
  padding:9px 4px;font-size:12px;font-weight:500;
  cursor:pointer;font-family:inherit;color:var(--warm-600);
  background:#FFFFFF;transition:all .14s;text-align:center
}
.dag-btn:hover{border-color:var(--warm-black);color:var(--warm-black)}
.dag-btn.sel{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.avail-slot{
  background:var(--accent-light);border-radius:10px;
  padding:10px 14px;margin-bottom:7px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:500;color:#7A1620;border:1.5px solid var(--accent)
}
.avail-slot button{background:none;border:none;cursor:pointer;color:var(--accent);font-size:18px;line-height:1;padding:0 4px;transition:color .12s}
.avail-slot button:hover{color:#7A1620}
.btn-add-slot{
  width:100%;border:1.5px solid var(--accent);border-radius:20px;
  padding:12px;background:#FFFFFF;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:700;color:var(--accent);
  transition:all .14s;margin-bottom:16px;box-shadow:0 1px 3px rgba(24,20,15,.08)
}
.btn-add-slot:hover{background:var(--accent);color:#FFFFFF;box-shadow:0 2px 8px rgba(var(--accent-rgb),.25)}
.org-kaart{
  border:1.5px solid var(--warm-400);border-radius:14px;
  padding:14px;margin-bottom:10px;cursor:pointer;position:relative;
  transition:all .16s;background:#FFFFFF
}
.org-kaart:hover{border-color:var(--warm-black);box-shadow:var(--sh-sm)}
.org-kaart.sel{border-color:var(--mint);border-width:2px;background:var(--mint-light);box-shadow:0 0 0 3px rgba(58,107,88,.15)}
.org-kaart[id^="vworg-"].sel{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.org-kaart-inner{display:flex;align-items:flex-start;gap:12px}
.org-website-link{
  position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--warm-400);
  border:1.5px solid var(--warm-200);background:#FFFFFF;transition:all .14s
}
.org-website-link:hover{color:var(--warm-black);border-color:var(--warm-black)}
.org-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--warm-400);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .14s}
.org-kaart.sel .org-check{background:var(--mint);border-color:var(--mint)}
.org-kaart[id^="vworg-"].sel .org-check{background:var(--accent);border-color:var(--accent)}
.org-naam{font-size:14px;font-weight:500;color:var(--warm-black);margin-bottom:2px}
.org-adres{font-size:12px;color:var(--warm-600)}
.org-email{font-size:12px;color:var(--mokka);margin-top:4px;font-weight:500}
.org-bevestig{
  background:var(--mint-light);border:1px solid var(--mint);
  border-radius:10px;padding:12px 14px;margin-bottom:14px;
  font-size:13px;color:#1F4436;font-weight:500
}
.reg-success{display:none;text-align:center;padding:48px 16px}
.reg-success.show{display:block}
.success-circle{
  width:64px;height:64px;background:var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;box-shadow:0 6px 20px rgba(var(--accent-rgb),.3)
}

/* ── S5 BEHEER ────────────────────────────────── */
.s5-hero{background:#F8F8F6;padding:40px 24px 36px;position:relative;overflow:hidden}
.s5-hero h2{font-family:var(--serif);font-size:30px;color:var(--warm-black);margin-bottom:6px;letter-spacing:-.03em;font-weight:400}
.s5-hero p{font-size:14px;color:var(--warm-600);line-height:1.65}
.s5-stat{background:#FFFFFF;border:1px solid var(--warm-200);border-radius:14px;padding:10px 16px;text-align:center;min-width:78px;box-shadow:var(--sh-xs);transition:transform .18s}
.s5-stat:hover{transform:translateY(-2px)}
.s5-stat .val{font-size:22px;font-weight:600;font-family:var(--serif);line-height:1}
.s5-stat .lbl{font-size:10px;color:var(--warm-600);margin-top:3px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.s5-content{max-width:560px;margin:0 auto;padding:28px 20px 100px}
.s5-dash-zone{background:#EDEDEA;padding:32px 0 100px}
.added-item{
  position:relative;
  background:#FFFFFF;border:1px solid var(--warm-200);
  border-radius:16px;padding:16px 18px;margin-bottom:12px;
  cursor:pointer;transition:box-shadow .15s,transform .15s,border-color .15s
}
.added-item:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px);border-color:var(--warm-400)}
.added-item.item-verborgen{background:#F0F6FB;border-style:dashed}
.added-item.item-verborgen .dash-act-title{color:var(--warm-600)}
.added-item-compact{padding:12px 14px;margin-bottom:8px}
.added-item-compact .dash-act-head{margin-bottom:6px}
.added-item-compact .acard-tags{margin-bottom:6px}
.added-item-compact .dash-act-meta{margin-top:4px}
.added-item-compact:hover{transform:none;box-shadow:0 3px 12px rgba(0,0,0,.07)}
/* ── Compacte rij voor "Alle activiteiten" (browsen/zoeken, geen beheer-tools) ── */
.act-rij{
  display:flex;align-items:center;gap:12px;
  background:#FFFFFF;border:1px solid var(--warm-200);border-radius:12px;
  padding:10px 14px;margin-bottom:8px;cursor:pointer;transition:all .14s
}
.act-rij:hover{border-color:var(--warm-400);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.act-rij-icon{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:var(--cream-mid)
}
.act-rij-body{flex:1;min-width:0}
.act-rij-top{display:flex;align-items:center;gap:6px}
.act-rij-naam{font-size:13.5px;font-weight:700;color:var(--warm-black);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.act-rij-sub{font-size:11.5px;color:var(--warm-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.act-rij-chevron{flex-shrink:0;font-size:13px;opacity:.6}
.added-item-titleblock{flex:1;min-width:0}
.added-item-live-badge{position:absolute;top:14px;right:16px;z-index:2}
.dash-act-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.dash-act-icon{width:32px;height:32px;flex-shrink:0}
.dash-act-title{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--warm-black);letter-spacing:-.01em;line-height:1.3}
.dash-act-tags{margin-bottom:10px}
.dash-act-quick{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:0}

/* ── Compacte knoppenrij — klein, gelijk verdeeld, geen rommelige losse pillen
   meer. Zit in het inklapbare deel, samen met de rest van de details. ── */
.dash-act-btns-row{display:flex;gap:6px;margin:10px 0}
.dash-act-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:8px 4px;border-radius:12px;border:1px solid var(--warm-200);background:#fff;
  font-family:inherit;font-size:10px;font-weight:600;color:var(--warm-600);cursor:pointer;transition:all .14s
}
.dash-act-btn .ic{font-size:15px;line-height:1}
.dash-act-btn:hover{background:var(--warm-100);border-color:var(--warm-400)}
.dash-act-btn.verwijder{color:var(--accent);border-color:var(--accent-border)}
.dash-act-btn.verwijder:hover{background:var(--accent-light);border-color:var(--accent)}

/* ── UITERLIJK VAN DE KAART (activiteit toevoegen) ── */
.kaart-uiterlijk-row{display:flex;gap:12px;align-items:flex-start}
.kaart-uiterlijk-preview{width:96px;height:96px;border-radius:16px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 12px rgba(24,20,15,.2);background:var(--warm-100)}
.kaart-uiterlijk-preview svg,.kaart-uiterlijk-preview img{display:block;width:100%;height:100%;object-fit:cover}
.kaart-uiterlijk-acties{flex:1;display:flex;flex-direction:column;gap:8px}
.kaart-uiterlijk-acties .btn-secondary-full{margin:0;padding:9px 10px;font-size:12.5px}
.btn-tekstlink{background:none;border:none;color:var(--civic);font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:2px 0;text-align:left}

/* compacte variant: foto + audio onder elkaar, minder ruimte */
.kaart-uiterlijk-row-compact{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.kaart-uiterlijk-preview-sm{width:52px;height:52px;border-radius:12px;overflow:hidden;flex-shrink:0;box-shadow:0 2px 8px rgba(24,20,15,.18);background:var(--warm-100)}
.kaart-uiterlijk-preview-sm svg,.kaart-uiterlijk-preview-sm img{display:block;width:100%;height:100%;object-fit:cover}
.kaart-uiterlijk-acties-compact{flex:1;display:flex;gap:8px}
.btn-compact-actie{
  flex:1;background:#fff;border:1.5px solid var(--warm-200);border-radius:10px;
  padding:9px 8px;font-size:11.5px;font-weight:600;color:var(--warm-600);
  cursor:pointer;font-family:inherit;text-align:center;transition:all .14s
}
.btn-compact-actie:hover{border-color:var(--warm-400);background:var(--cream-mid)}
/* "Foto toevoegen" — één knop die een klein keuzemenu opent (Foto maken /
   Foto uploaden), i.p.v. losse knoppen naast elkaar. */
.foto-kiesknop-wrap{position:relative}
.foto-kiesmenu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
  background:#fff;border:1px solid var(--warm-200);border-radius:12px;
  box-shadow:var(--sh-md);padding:6px;min-width:180px
}
.foto-kiesmenu.open{display:block;animation:fade-in .14s}
.foto-kiesmenu-opt{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  font-size:13px;font-weight:500;color:var(--warm-900);
  border-radius:8px;cursor:pointer;white-space:nowrap
}
.foto-kiesmenu-opt:hover{background:var(--accent-light)}
.foto-kiesmenu-ic{font-size:15px;flex-shrink:0}
.form-section{margin:26px 0 14px;padding-top:18px;border-top:1px solid var(--warm-200)}
.form-section:first-of-type{margin-top:4px;padding-top:0;border-top:none}
.form-section-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--civic);color:#fff;
  font-size:11px;font-weight:700;flex-shrink:0
}
.form-section-titel{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:700;color:var(--warm-black);margin-bottom:3px}
.form-section-sub{font-size:12px;color:var(--warm-400);margin-bottom:14px;margin-left:28px}
/* ── Stap-wizard voor "Activiteit toevoegen" ─────────── */
.act-stap-indicator{margin:14px 0 4px}
.act-stap-track{width:100%;height:5px;background:var(--warm-100);border-radius:10px;overflow:hidden}
.act-stap-fill{height:100%;background:var(--civic);border-radius:10px;transition:width .25s ease;width:20%}
.act-stap-label{font-size:11.5px;font-weight:700;color:var(--civic);margin-top:7px;letter-spacing:.2px}
.act-stap-card{transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.act-stap-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(20,20,20,.08)}
.act-stap-card:active{transform:translateY(0);box-shadow:0 2px 6px rgba(20,20,20,.06)}
.act-step:first-of-type .form-section{margin-top:4px;padding-top:0;border-top:none}
.act-step-nav{display:flex;gap:10px;margin-top:8px}
.act-step-nav .btn-secondary-full,.act-step-nav .btn-primary-full{margin-top:0}

/* ── SPRAAKMEMO-RECORDER (whatsapp-stijl) ─────────── */
.voice-rec-idle{
  width:100%;display:flex;align-items:center;gap:10px;
  background:var(--mint-light);border:1.5px solid rgba(58,107,88,.3);border-radius:14px;
  padding:12px 16px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--mint,#3A6B58);
  transition:all .16s
}
.voice-rec-idle:hover{background:rgba(58,107,88,.14)}
.voice-rec-mic-circle{font-size:18px}
.voice-rec-recording{
  display:flex;align-items:center;gap:12px;
  background:#FCEEEC;border:1.5px solid var(--accent-border);border-radius:14px;padding:12px 16px
}
.voice-rec-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:voice-rec-pulse 1.1s infinite}
@keyframes voice-rec-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.voice-rec-timer{font-size:14px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;flex:1}
.voice-rec-stop-btn{
  background:var(--accent);color:#fff;border:none;border-radius:20px;
  padding:7px 16px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit
}
.voice-rec-playback{
  display:flex;align-items:center;gap:10px;
  background:var(--cream);border:1.5px solid var(--warm-200);border-radius:14px;padding:10px 14px
}
.voice-rec-play-btn{
  width:34px;height:34px;border-radius:50%;background:var(--civic);color:#fff;border:none;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:13px
}
.voice-rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.voice-rec-wave span{width:3px;border-radius:2px;background:var(--civic-border);flex-shrink:0}
.voice-rec-duur{font-size:11.5px;color:var(--warm-400);font-variant-numeric:tabular-nums;flex-shrink:0}
.voice-rec-del-btn{background:none;border:none;color:var(--warm-400);cursor:pointer;font-size:15px;flex-shrink:0;padding:2px 4px}
.voice-rec-del-btn:hover{color:var(--accent)}
.added-item-title{font-size:14.5px;font-weight:700;color:var(--warm-black);letter-spacing:-.01em;line-height:1.3}
.added-item-tags{margin-bottom:10px}
.tag-cp{background:var(--mint-light);color:var(--mint,#3A6B58);border:1px solid rgba(58,107,88,.25)}
.tag-doorwie{background:var(--warm-100);color:var(--warm-600);border:1px solid var(--warm-200)}
.added-item-viewonly{margin-top:6px;font-size:11px;color:var(--warm-400)}
.act-new-badge{
  position:absolute;top:-8px;left:-8px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:800;
  min-width:24px;height:24px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:0 6px;
  box-shadow:0 3px 8px rgba(var(--accent-rgb),.4);border:2px solid #fff;
  animation:act-badge-pop .3s cubic-bezier(.34,1.56,.64,1)
}
@keyframes act-badge-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ── ACTIVITEIT DOORSTUREN (hulpvraag via e-mail) ─── */
.afw-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.afw-type-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--warm-200);border-radius:14px;padding:11px 12px;font-size:12.5px;font-weight:600;color:var(--warm-600);cursor:pointer;font-family:inherit;transition:all .16s;text-align:left}
.afw-type-btn:hover{border-color:var(--mokka);transform:translateY(-1px);box-shadow:var(--sh-xs)}
.afw-type-btn .afw-type-emoji{font-size:17px;flex-shrink:0}
.afw-type-btn.sel{background:var(--mokka-light);border-color:var(--mokka);color:var(--mokka-dark)}
.afw-type-btn.overdracht.sel{background:var(--civic-light);border-color:var(--civic);color:var(--civic)}
.afw-ai-btn{background:linear-gradient(135deg,var(--civic-light),var(--mint-light));border:1px solid var(--civic-border);color:var(--civic);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .16s;text-transform:none;letter-spacing:0}
.afw-ai-btn:hover{box-shadow:var(--sh-xs);transform:translateY(-1px)}
.afw-ai-btn:disabled{opacity:.6;cursor:wait}
.afw-recipient-toggle{display:flex;gap:8px;margin-bottom:12px}
.afw-rtoggle-btn{flex:1;background:#fff;border:1.5px solid var(--warm-200);border-radius:12px;padding:10px;font-size:12.5px;font-weight:600;color:var(--warm-600);cursor:pointer;font-family:inherit;transition:all .14s}
.afw-rtoggle-btn.sel{background:var(--civic-light);border-color:var(--civic);color:var(--civic)}
.afw-org-select{width:100%;border:1.5px solid var(--warm-200);border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;background:#fff}
.act-hulpvraag-strip{margin-top:10px;padding:8px 12px;background:var(--mokka-light);border:1px solid var(--mokka-mid);border-radius:10px;font-size:12px;color:var(--mokka-dark);display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.act-hulpvraag-strip button{flex-shrink:0;background:#fff;border:1px solid var(--mokka-mid);color:var(--mokka-dark);border-radius:8px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.tag-hulpvraag{background:var(--mokka-light);color:var(--mokka-dark);border:1px solid var(--mokka-mid)}

/* ── NETWERK TAB ──────────────────────────────────── */
.netwerk-zoek{width:100%;border:1.5px solid var(--warm-400);border-radius:20px;padding:10px 16px;font-size:13px;font-family:inherit;margin-bottom:10px;background:#fff;color:var(--warm-black)}
.netwerk-zoek:focus{outline:none;border-color:var(--mokka);box-shadow:0 0 0 3px var(--mokka-light)}
.zoek-input-wrap{position:relative}
.zoek-input-wrap input{width:100%;padding-right:46px;box-sizing:border-box}
.zoek-mic-btn{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:none;
  background:var(--accent-light);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s
}
.zoek-mic-btn:hover{background:var(--accent-border)}
.zoek-mic-btn.luistert{background:#C1443D;color:#fff;animation:zoek-mic-pulse 1.1s ease-in-out infinite}
@keyframes zoek-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(193,68,61,.35)}50%{box-shadow:0 0 0 8px rgba(193,68,61,0)}}
.zoek-emoji-cycler-groot{
  position:absolute;top:20px;right:24px;width:72px;height:72px;
  background:#fff;border:2px solid var(--accent-border);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:38px;
  box-shadow:0 4px 14px rgba(24,20,15,.12);
  opacity:1;transition:opacity .35s ease,transform .35s ease;
  z-index:1
}
.zoek-emoji-cycler-groot.fading{opacity:0;transform:scale(.7) rotate(-8deg)}
.netwerk-cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.filter-row{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap}
.filter-row .netwerk-cat-chips{flex:1;margin-bottom:0}
.dag-filter-select{border:1.5px solid var(--warm-400);border-radius:20px;padding:5px 10px;font-size:11.5px;font-weight:600;color:var(--warm-black);font-family:inherit;background:#fff;margin-bottom:10px}

/* ── CATEGORIE-PICKER (activiteit toevoegen) ─────── */
.cat-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.cat-picker-btn{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1.5px solid var(--warm-400);border-radius:12px;padding:10px 6px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--warm-black);transition:all .14s}
.cat-picker-btn:hover{border-color:var(--warm-400)}
.cat-picker-btn.sel{border-color:var(--civic);background:var(--civic-light);color:var(--civic)}
.netwerk-cat-chip{background:#fff;border:1.5px solid var(--warm-400);border-radius:20px;padding:5px 12px;font-size:11.5px;font-weight:600;color:var(--warm-black);cursor:pointer;font-family:inherit;transition:all .14s}
.netwerk-cat-chip.sel{background:var(--warm-black);border-color:var(--warm-black);color:#fff}
/* Zoek-suggesties op "Waar ben je naar op zoek?" — bewust ándere, lossere stijl
   dan de echte categorie-filterchips hierboven: gestippelde rand, geen vulling,
   klein "✨"-icoontje. Oogt als losse inspiratie om te typen, niet als vaste
   knoppen/filters — zonder dat er ergens het woord "voorbeeld" hoeft te staan. */
.zoek-suggestie-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--warm-100);border:1.5px dashed var(--warm-200);border-radius:20px;
  padding:5px 12px 5px 10px;font-size:11.5px;font-weight:500;
  color:var(--warm-400);cursor:pointer;font-family:inherit;font-style:italic;
  transition:all .14s
}
.zoek-suggestie-chip .zsc-ic{font-style:normal;opacity:.65;font-size:10.5px}
.zoek-suggestie-chip:hover{border-style:solid;border-color:var(--accent);color:var(--accent-dark);background:var(--accent-light)}
.netwerk-count{font-size:11.5px;color:var(--warm-400);margin-bottom:10px}
.netwerk-card{position:relative;background:#fff;border:1.5px solid var(--warm-400);border-left-width:5px;border-radius:14px;margin-bottom:10px;transition:box-shadow .15s,border-color .15s}
.netwerk-card:hover{border-color:var(--warm-600);box-shadow:var(--sh-xs)}
.netwerk-card-compact{margin-bottom:7px}
.netwerk-card-compact .netwerk-card-head{padding:10px 14px}
.netwerk-card.is-verborgen{background:#F0F6FB;border-style:dashed}
.netwerk-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);border-color:var(--warm-600)}
.netwerk-card-head{padding:13px 16px;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.netwerk-card-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0}
.netwerk-card-head strong{display:block;font-size:13.5px;color:var(--warm-black);margin-bottom:2px}
.netwerk-card-head span{font-size:11.5px;color:var(--warm-600)}
.netwerk-chevron{transition:transform .2s;flex-shrink:0;color:var(--warm-400);margin-top:3px}
.netwerk-card-cp{background:var(--cream);border:1px solid var(--warm-400);border-radius:10px;padding:8px 12px;margin-top:10px;font-size:12px}
.netwerk-empty{text-align:center;padding:32px 16px;color:var(--warm-400);font-size:13px}

/* ── ACTIVITEITEN: kies collega / jezelf ──────────── */
.acts-person-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.acts-person-chip{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--warm-400);border-radius:20px;padding:7px 14px 7px 8px;font-size:12.5px;font-weight:600;color:var(--warm-black);cursor:pointer;font-family:inherit;transition:all .16s}
.acts-person-chip:hover{border-color:var(--warm-600)}
.acts-person-chip.sel{background:var(--civic);border-color:var(--civic);color:#fff}
.acts-person-avatar{width:20px;height:20px;border-radius:50%;background:var(--warm-100);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--warm-black);flex-shrink:0}
.acts-person-chip.sel .acts-person-avatar{background:rgba(255,255,255,.25);color:#fff}
.acts-person-chip .cnt{opacity:.75;font-weight:500}
.added-item-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.added-item strong{display:block;font-size:13px;font-weight:600;color:var(--warm-black)}
.added-item span{font-size:11px;color:var(--warm-400)}
.added-cp{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--warm-600);background:var(--cream);border:1px solid var(--warm-200);border-radius:20px;padding:2px 9px;margin-top:4px}
.badge-status{
  font-size:10px;font-weight:700;padding:3px 9px;border-radius:14px;flex-shrink:0;
  font-family:inherit;cursor:pointer;transition:all .14s;white-space:nowrap;line-height:1.6
}
.badge-status-live{background:var(--mint-light);color:var(--mint);border:1px solid rgba(58,107,88,.3)}
.badge-status-live:hover{background:var(--mint);color:#fff}
.badge-status-gepauzeerd{background:#E9F1F8;color:var(--warm-600);border:1px solid var(--warm-300,#C8C2BB)}
.badge-status-gepauzeerd:hover{background:var(--mint-light);color:var(--mint);border-color:rgba(58,107,88,.3)}
.badge-status-uit{background:#E9F1F8;color:var(--warm-600);border:1px solid var(--warm-300,#C8C2BB);cursor:default}
.dash-act-meta{font-size:11px;color:var(--warm-400);margin-top:6px;line-height:1.5}
.meta-dot{color:var(--warm-300,#C8C2BB);margin:0 1px}

/* ── LOADER ───────────────────────────────────── */
.loader{display:inline-block;width:14px;height:14px;border:2px solid rgba(254,252,249,.3);border-top-color:#FEFCF9;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── CHECKLIST ────────────────────────────────── */

/* ── Print: alleen het formulier zichtbaar, verder de hele app verborgen ── */
#print-area{display:none}
@media print{
  body>*{display:none!important}
  #print-area{display:block!important;padding:30px 36px;font-family:Georgia,'Times New Roman',serif;color:#111}
  .print-logo{display:inline-block;background:var(--accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.5px;padding:4px 8px;border-radius:4px;margin-bottom:10px;font-family:Arial,sans-serif}
  .print-koptekst{border-bottom:2px solid var(--accent);padding-bottom:12px;margin-bottom:18px}
  .print-koptekst h1{font-size:22px;margin-bottom:4px}
  .print-koptekst p{font-size:12px;color:#555;font-family:Arial,sans-serif}
  .print-sectie-kop{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--accent);font-family:Arial,sans-serif;border-bottom:1.5px solid var(--accent);padding-bottom:4px;margin:20px 0 12px}
  .print-item{page-break-inside:avoid;border:1px solid #ddd;border-radius:8px;padding:12px 16px;margin-bottom:12px}
  .print-item-kop{display:flex;align-items:center;gap:8px;margin-bottom:2px}
  .print-nr{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:10px;font-weight:700;font-family:Arial,sans-serif;flex-shrink:0}
  .print-item-kop strong{font-size:14.5px}
  .print-meta{font-size:11.5px;color:#777;font-family:Arial,sans-serif;margin-bottom:8px}
  .print-veldlabel{font-size:10px;font-weight:700;letter-spacing:.5px;color:#555;font-family:Arial,sans-serif;margin:8px 0 4px}
  .print-opties{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;font-family:Arial,sans-serif}
  .print-optie{white-space:nowrap}
  .print-lijn-los{border-bottom:1px solid #999;height:22px;margin-bottom:4px}
  .print-lijn-tekst{font-size:12.5px;color:#555;font-family:Arial,sans-serif}
  .print-antwoord{font-size:13px;font-weight:600;font-family:Arial,sans-serif}
  .print-wie-rij{display:flex;gap:24px;font-size:12.5px;font-family:Arial,sans-serif;margin-bottom:8px}
  .print-toestemming{margin-top:20px;padding-top:14px;border-top:1px solid #ccc;font-size:12px;font-family:Arial,sans-serif}
  .print-voettekst{margin-top:24px;font-size:10px;color:#999;font-family:Arial,sans-serif;text-align:center}
}
.cl-item{border:1.5px solid var(--warm-400);border-radius:12px;overflow:hidden;margin-bottom:8px}
.cl-item-done{border-color:var(--mint)}
.cl-item-bespreek{border-color:var(--mokka)}
.cl-head{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;background:#FFFFFF;transition:background .12s}
.cl-head:hover{background:var(--cream)}
.cl-item-done .cl-head{background:var(--mint-light)}
.cl-item-done .cl-head:hover{background:#D9EDE5}
.cl-item-bespreek .cl-head{background:var(--mokka-light)}
.cl-item-bespreek .cl-head:hover{background:#EDDFC4}
.cl-head.cl-head-expanded,.cl-head.cl-head-expanded:hover{background:var(--civic)}
.cl-head-expanded .cl-head-txt strong{color:#fff}
.cl-head-expanded .cl-head-txt span{color:var(--civic-border)}
.cl-head-expanded .cl-chevron{color:#fff}
.cl-head-expanded .cl-dot{background:#fff}
.cl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cl-dot.done{background:var(--mint)}
.cl-dot.bespreek{background:var(--mokka)}
.cl-dot.open{background:var(--warm-400)}
.cl-head-txt{flex:1}
.cl-head-txt strong{display:block;font-size:13px;color:var(--warm-black);font-weight:500}
.cl-head-txt span{display:block;font-size:11px;color:var(--warm-600)}
.cl-badge{font-size:10px;padding:3px 9px;border-radius:20px;font-weight:600;flex-shrink:0}
.cl-badge.done{background:var(--mint-light);color:var(--mint)}
.cl-badge.bespreek{background:var(--mokka-light);color:var(--mokka-dark)}
.cl-badge.open{background:var(--warm-100);color:var(--warm-600)}
.cl-chevron{color:var(--warm-400);font-size:12px;transition:transform .2s;flex-shrink:0}
.cl-body{display:none;padding:14px 16px;border-top:1.5px solid var(--warm-400);background:#FFFFFF}
.cl-item-done .cl-body{border-top-color:var(--mint)}
.cl-item-bespreek .cl-body{border-top-color:var(--mokka)}
.cl-head.cl-head-expanded + .cl-body{border-top-color:var(--civic)}
.cl-chip-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.cl-chip{
  border:1.5px solid var(--warm-400);border-radius:20px;
  padding:5px 13px;font-size:12px;cursor:pointer;
  background:#FFFFFF;font-family:inherit;transition:all .14s;color:var(--warm-black)
}
.cl-chip:hover{border-color:var(--civic);color:#1A3A5C;background:var(--civic-light)}
.cl-chip.sel{background:var(--civic);border-color:var(--civic);color:#FFFFFF}
.cl-input{
  width:100%;padding:10px 12px;font-size:13px;
  border:1.5px solid var(--warm-400);border-radius:10px;
  font-family:inherit;margin-top:8px;background:#FFFFFF
}
.cl-input:focus{outline:none;border-color:var(--warm-black)}
.cl-btn-row{display:flex;gap:8px;margin-top:10px}
.cl-tijd-row{display:flex;gap:8px;align-items:center;margin-top:4px}
@media (max-width:600px){
  .cl-body{padding:14px 10px}
  .cl-head{padding:13px 10px}
  .cl-btn-row{gap:6px}
  .cl-mark-btn{padding:9px 10px;font-size:12.5px}
}
.cl-mark-btn{
  background:var(--civic);color:#FFFFFF;border:none;
  border-radius:20px;padding:9px 20px;font-size:13px;
  cursor:pointer;font-weight:500;margin-top:12px;font-family:inherit
}
.cl-voortgang{background:var(--cream);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.cl-voortgang-bar{height:3px;background:var(--warm-200);border-radius:2px;overflow:hidden;margin-top:8px}
.cl-voortgang-fill{height:100%;background:var(--civic);border-radius:2px;transition:width .3s}

/* ── TOAST ────────────────────────────────────── */
.toast{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%) translateY(60px);opacity:0;
  background:var(--warm-black);color:#FEFCF9;
  padding:12px 22px;border-radius:20px;
  font-size:13px;font-weight:500;z-index:900;
  transition:all .28s cubic-bezier(.34,1.2,.64,1);
  white-space:nowrap;pointer-events:none;
  box-shadow:var(--sh-lg);max-width:calc(100vw - 40px);text-align:center
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── DAG SELECT ───────────────────────────────── */
.dag-select-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:8px}
.dag-sel-btn{
  border:1px solid var(--warm-200);border-radius:10px;
  padding:9px 4px;font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;color:var(--warm-400);
  background:#FFFFFF;transition:all .14s;text-align:center
}
.dag-sel-btn:hover{border-color:var(--warm-black);color:var(--warm-black)}
.dag-sel-btn.sel{background:var(--civic);border-color:var(--civic);color:#FFFFFF}

/* ── TOGGLE BLOKKEN ───────────────────────────── */
.toggle-blok{
  border:1px solid var(--warm-200);border-radius:16px;
  overflow:hidden;background:#FFFFFF;transition:box-shadow .18s
}
.toggle-blok.open{box-shadow:var(--sh-md);border-color:var(--civic)}
.toggle-btn{
  width:100%;background:none;border:none;padding:18px 20px;
  cursor:pointer;font-family:inherit;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;text-align:left;transition:background .14s
}
.toggle-btn:hover{background:var(--cream)}
.toggle-blok.open .toggle-btn{background:var(--civic-light)}
.toggle-btn-inner{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.toggle-btn-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--warm-100)}
.toggle-btn-tekst{flex:1;min-width:0}
.toggle-btn-titel{display:block;font-size:14px;font-weight:500;color:var(--warm-black);margin-bottom:2px}
.toggle-btn-sub{display:block;font-size:12px;color:var(--warm-400);line-height:1.5}
.toggle-blok.open .toggle-btn-titel{color:var(--warm-black)}
.toggle-chevron{flex-shrink:0;color:var(--warm-400);transition:transform .22s}
.toggle-blok.open .toggle-chevron{transform:rotate(180deg);color:var(--warm-black)}
.toggle-inhoud{padding:0 20px 24px;border-top:1px solid var(--warm-100)}

/* ── FORMULIER ACCENTEN ───────────────────────── */
#form-vw.show{border-left:2px solid var(--accent);padding-left:16px}
#form-sw.show{border-left:2px solid var(--mint);padding-left:16px}
#form-vw .fr input:focus,#form-vw .fr select:focus,#form-vw .fr textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10)}
#form-sw .fr input:focus,#form-sw .fr select:focus,#form-sw .fr textarea:focus{border-color:var(--mint);box-shadow:0 0 0 3px var(--mint-light)}
#form-sw .divider{border-color:rgba(92,122,98,.25);color:var(--mint)}
#form-sw .btn-add-slot:hover{border-color:var(--mint);color:var(--mint)}
#form-sw .cl-chip.sel{background:var(--mint);border-color:var(--mint)}

/* ── BACK BUTTON ──────────────────────────────── */
.back-wrap{padding:16px 20px 0;max-width:640px;margin:0 auto}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:400;color:var(--warm-400);
  cursor:pointer;transition:color .14s;
  background:none;border:none;font-family:inherit;padding:0
}
.back-link:hover{color:var(--warm-black)}

/* ── DASHBOARD SNELLE ACTIES ──────────────────────── */
.dash-tiles-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.dash-tile-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:20px 12px;border-radius:var(--r-lg,16px);cursor:pointer;
  font-family:inherit;transition:transform .18s,box-shadow .18s;
}
.dash-tile-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,20,15,.18)}
.dash-tile-card:active{transform:translateY(0)}
.dash-tile-card-icon{font-size:26px}
.dash-tile-card-lbl{font-size:13px;font-weight:700;text-align:center;line-height:1.25}
.dtc-act{background:var(--mint-light,#E4F0EB);border:2.5px solid var(--mint,#3A6B58);color:#1F4436}
.dtc-opstarten{background:#FDF0F3;border:2px solid #D46A85;color:#A8385A}
.dtc-vw{background:var(--mint,#3A6B58);color:#fff;border:none}
.dtc-mijn{background:var(--civic-light);border:2px solid var(--civic);color:var(--civic)}
.dtc-alle{background:#FFF9E0;border:2px solid #C9A227;color:#7A6110}
.dtc-netwerk{background:var(--warm-100);color:var(--warm-black);border:none}
.dtc-reflect{background:var(--refl-groen-soft,var(--mint-light));color:var(--refl-groen,var(--mint));border:none}
.dtc-wie{background:var(--accent-light);color:var(--warm-black);border:none}
.dash-quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.dash-quick-btn{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border:none;border-radius:18px;padding:20px 12px;cursor:pointer;font-family:inherit;
  transition:transform .18s,box-shadow .18s;box-shadow:0 4px 14px rgba(24,20,15,.12)
}
.dash-quick-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(24,20,15,.18)}
.dash-quick-btn.quick-activiteit{background:var(--civic);color:#fff}
.dash-quick-btn.quick-collega{background:var(--mint,#3A6B58);color:#fff}
.dash-quick-icon{font-size:26px}
.dash-quick-lbl{font-size:13px;font-weight:700;text-align:center;line-height:1.25}
.dash-team-link{
  display:block;background:none;border:none;color:var(--civic);font-size:12px;font-weight:600;
  cursor:pointer;font-family:inherit;margin:0 0 22px;padding:0;text-align:center;width:100%
}

/* ── "WAT GEBEURT ER" NIEUWSFEED ─────────────────── */
.nieuws-feed{margin-bottom:20px}
.nieuws-feed-titel{font-size:11px;font-weight:700;color:var(--warm-400);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.nieuws-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--warm-200);
  border-radius:12px;padding:10px 14px;margin-bottom:7px;transition:all .14s
}
.nieuws-item:hover{border-color:var(--warm-400);box-shadow:var(--sh-xs)}
.nieuws-item-icon{font-size:17px;flex-shrink:0}
.nieuws-item-tekst{flex:1 1 100%;min-width:0;font-size:12.5px;color:var(--warm-900);line-height:1.4;cursor:pointer}
.nieuws-item-acties{display:flex;align-items:center;gap:6px;margin-left:auto}
.nieuws-like-btn{
  display:flex;align-items:center;gap:4px;background:#FBEDEB;border:1.5px solid #E6B2AC;border-radius:20px;
  padding:4px 10px;font-size:11.5px;font-weight:700;color:var(--accent);cursor:pointer;font-family:inherit;transition:all .15s
}
.nieuws-like-btn.geliked{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.nieuws-share-btn{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:#25D366;border:none;font-size:13px;text-decoration:none;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.15)
}
.nieuws-share-btn:hover{background:#1FB955}
.nieuws-share-btn[title*="Mail"],.nieuws-share-btn[title*="mail"]{background:#2E5C8A}
.nieuws-share-btn[title*="Mail"]:hover,.nieuws-share-btn[title*="mail"]:hover{background:#254A70}
.nieuws-item-tekst b{color:var(--warm-black)}
.nieuws-leeg{text-align:center;padding:16px;color:var(--warm-400);font-size:12.5px;background:var(--cream-mid);border-radius:12px;margin-bottom:20px}

/* ── TEAM-OVERZICHT WIDGET ───────────────────────── */
.team-ov-rij{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--warm-200);
  border-radius:12px;padding:10px 14px;margin-bottom:7px;transition:all .14s
}
.team-ov-avatar{width:32px;height:32px;border-radius:50%;background:var(--warm-100);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--warm-600);flex-shrink:0}
.team-ov-naam{font-size:13px;font-weight:600;color:var(--warm-black)}
.team-ov-rol{font-size:10.5px;color:var(--warm-400)}
.team-ov-cnt{margin-left:auto;font-size:12px;font-weight:700;color:var(--civic);background:var(--civic-light);padding:3px 10px;border-radius:20px;flex-shrink:0}
.refl-form-card{background:#fff;border:1px solid var(--warm-200);border-radius:14px;padding:18px;margin-bottom:8px}
.refl-form-card .fr{margin-bottom:14px}
.refl-form-card .fr:last-of-type{margin-bottom:16px}
.refl-form-intro{font-size:12.5px;color:var(--warm-400);line-height:1.5;margin:-4px 0 14px}
.refl-opdracht-rij{
  display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--warm-200);
  border-radius:12px;padding:10px 14px;margin-bottom:7px;transition:all .14s
}
.refl-opdracht-rij[onclick]:hover{border-color:var(--warm-400);transform:translateY(-1px);box-shadow:var(--sh-xs)}

/* ── DASHBOARD TABS ───────────────────────────────── */
.dash-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-bottom:28px}
.dash-tab{
  position:relative;background:#fff;border:2px solid var(--warm-200);border-radius:20px;
  padding:20px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;
  cursor:pointer;font-family:inherit;transition:all .2s cubic-bezier(.2,.8,.3,1);box-shadow:var(--sh-sm)
}
.dash-tab:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--sh-md,0 8px 24px rgba(0,0,0,.1))}
.dash-tab:active{transform:translateY(-1px) scale(1)}
.dash-tile-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;background:var(--warm-100);transition:transform .2s}
.dash-tab:hover .dash-tile-icon{transform:scale(1.08) rotate(-3deg)}
.dash-tile-lbl{font-size:13px;font-weight:700;color:var(--warm-600);letter-spacing:-.01em}
.dash-badge{
  position:absolute;top:10px;right:12px;
  background:var(--warm-200);color:var(--warm-600);
  font-size:11px;font-weight:800;min-width:20px;height:20px;
  border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
  box-shadow:0 2px 6px rgba(0,0,0,.15)
}
/* kleur per onderdeel — ook actief als legenda */
.dash-tab[data-sect="acts"] .dash-tile-icon{background:var(--civic-light);color:var(--civic)}
.dash-tab[data-sect="acts"].active{border-color:var(--civic);background:var(--civic-light)}
.dash-tab[data-sect="acts"].active .dash-tile-lbl{color:var(--civic)}
.dash-tab[data-sect="acts"].active .dash-badge{background:var(--civic);color:#fff}
.dash-tab[data-sect="collega"] .dash-tile-icon{background:var(--warm-100);color:var(--warm-600)}
.dash-tab[data-sect="collega"].active{border-color:var(--warm-600);background:var(--warm-100)}
.dash-tab[data-sect="collega"].active .dash-tile-lbl{color:var(--warm-black)}
.dash-badge.groen{background:var(--mint);color:#fff}
.dash-badge.geel{background:var(--mokka);color:#fff}

/* ── INBOX ITEMS ─────────────────────────────────── */
.inbox-item{
  background:#FFFFFF;border:1px solid var(--warm-200);
  border-radius:14px;padding:16px 18px;margin-bottom:10px;
  display:flex;align-items:flex-start;gap:14px;position:relative;
  transition:border-color .16s,box-shadow .16s
}
.inbox-item:hover{border-color:var(--civic-border);box-shadow:var(--sh-sm)}
.inbox-item-icon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px
}
.inbox-item-body{flex:1;min-width:0}
.inbox-item-naam{font-size:14px;font-weight:600;color:var(--warm-black);margin-bottom:2px}
.inbox-item-meta{font-size:12px;color:var(--warm-400);margin-bottom:6px;line-height:1.5}
.inbox-item-skills{font-size:12px;color:var(--warm-600);font-style:italic}
.inbox-item-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.inbox-toewijs-blok{margin-top:10px;padding-top:10px;border-top:1px dashed var(--warm-200)}
.inbox-toewijs-lbl{font-size:10.5px;font-weight:700;color:var(--warm-400);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:6px}
.inbox-toewijs-chips{display:flex;flex-wrap:wrap;gap:6px}
.inbox-toewijs-chip{background:#fff;border:1.5px solid var(--warm-200);border-radius:20px;padding:3px 11px;font-size:11px;font-weight:500;color:var(--warm-600);cursor:pointer;font-family:inherit;transition:all .14s}
.inbox-toewijs-chip.on{background:var(--civic);border-color:var(--civic);color:#fff}
.btn-inbox-fw{
  background:var(--civic-light);border:1px solid var(--civic-border);
  color:var(--civic);border-radius:20px;padding:6px 12px;
  font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:4px;transition:all .16s
}
.btn-inbox-fw:hover{background:var(--civic);color:#fff}
.btn-inbox-reply{
  background:#fff;border:1.5px solid var(--warm-300);
  color:var(--warm-900);border-radius:20px;padding:6px 14px;
  font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;transition:all .16s
}
.btn-inbox-reply:hover{background:var(--warm-100);border-color:var(--warm-600)}
.btn-inbox-del{
  background:var(--warm-100);border:1px solid var(--warm-200);
  color:var(--warm-400);border-radius:20px;padding:6px 12px;
  font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:4px;transition:all .16s
}
.btn-inbox-del:hover{background:var(--accent-light);border-color:var(--accent-border);color:var(--accent)}
/* ── COLLEGA KAARTEN ──────────────────────────────── */
.collega-item{
  background:#fff;border:1px solid var(--warm-200);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;display:flex;align-items:flex-start;gap:14px;
  transition:box-shadow .18s,border-color .18s
}
.collega-item:hover{box-shadow:var(--sh-sm);border-color:var(--civic-border)}
.collega-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--civic-light);border:1.5px solid var(--civic-border);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:18px
}
.collega-naam{font-size:15px;font-weight:600;color:var(--warm-black)}
.collega-email{font-size:12px;color:var(--warm-400);margin:3px 0 10px}
.collega-status-actief{
  font-size:10px;font-weight:600;letter-spacing:.2px;
  background:#EDFAF3;color:#2D7A4F;border:1px solid #B3E8CD;
  border-radius:20px;padding:2px 9px;vertical-align:middle;margin-left:7px
}
.collega-status-uitgenodigd{
  font-size:10px;font-weight:500;
  background:var(--warm-100);color:var(--warm-500);border:1px solid var(--warm-200);
  border-radius:20px;padding:2px 9px;vertical-align:middle;margin-left:7px
}
.collega-acts-teller{
  font-size:12px;color:var(--civic);font-weight:500;
  background:var(--civic-light);border:1px solid var(--civic-border);
  border-radius:20px;padding:2px 10px;display:inline-block;margin-bottom:10px
}
.collega-acts-nul{
  font-size:12px;color:var(--warm-400);margin-bottom:10px;display:inline-block
}
.btn-collega-bekijk{
  background:var(--warm-black);color:#fff;border:none;border-radius:20px;
  padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  transition:opacity .15s
}
.btn-collega-bekijk:hover{opacity:.85}
.inbox-new-badge{
  position:absolute;top:12px;right:14px;
  background:var(--accent);color:#fff;font-size:9px;font-weight:700;
  padding:2px 8px;border-radius:20px;letter-spacing:.3px
}
.inbox-empty{
  text-align:center;padding:40px 20px;
  background:#FFFFFF;border:1px dashed var(--warm-200);border-radius:14px
}
.inbox-empty p{font-size:14px;color:var(--warm-400);margin-top:8px;line-height:1.6}

/* ── CONCEPT BANNER ──────────────────────────────── */
.concept-banner{
  background:var(--cream);border:1px solid var(--warm-200);
  border-radius:12px;padding:12px 14px;margin-bottom:16px;
  display:flex;align-items:flex-start;gap:10px
}
.concept-banner-icon{font-size:18px;flex-shrink:0;margin-top:1px;opacity:.7}
.concept-banner-txt{font-size:12px;color:var(--warm-600);line-height:1.5}
.concept-banner-txt strong{display:block;font-size:12px;font-weight:600;margin-bottom:2px;color:var(--warm-900)}

/* ── FORWARD MODAL ───────────────────────────────── */
.fw-org-grid{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto;margin:10px 0}
.fw-org-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border:1.5px solid var(--warm-200);border-radius:10px;
  cursor:pointer;transition:all .14s;background:#FFFFFF
}
.fw-org-item:hover{border-color:var(--civic);background:var(--civic-light)}
.fw-org-item.sel{border-color:var(--civic);background:var(--civic-light)}
.fw-org-name{font-size:13px;font-weight:600;color:var(--warm-black)}
.fw-org-type{font-size:11px;color:var(--warm-400)}
.fw-note{width:100%;padding:10px 12px;border:1px solid var(--warm-200);border-radius:10px;font-size:13px;font-family:inherit;resize:none;min-height:64px;margin-top:4px;background:#FFFFFF}
.fw-note:focus{outline:none;border-color:var(--civic);box-shadow:0 0 0 3px rgba(26,58,92,.1)}

/* ── VERWIJDER CONFIRM ───────────────────────────── */
.del-confirm-overlay{
  position:fixed;inset:0;background:rgba(24,20,15,.45);
  z-index:800;display:none;align-items:center;justify-content:center;padding:20px
}
.del-confirm-overlay.open{display:flex}
.del-confirm-box{
  background:#FFFFFF;border-radius:18px;padding:28px 24px;
  max-width:320px;width:100%;box-shadow:var(--sh-lg);text-align:center
}
.del-confirm-box h3{font-family:var(--serif);font-size:20px;margin-bottom:8px}
.del-confirm-box p{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.6}
.del-btn-row{display:flex;gap:10px}
.btn-del-cancel{flex:1;background:var(--warm-100);border:1px solid var(--warm-200);color:var(--warm-600);border-radius:20px;padding:11px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .14s}
.btn-del-cancel:hover{background:var(--warm-200)}
.btn-del-confirm{flex:1;background:var(--accent);border:none;color:#fff;border-radius:20px;padding:11px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .14s}
.btn-del-confirm:hover{background:var(--accent-dark)}

/* ── ACTIVITEIT AANPASSEN KNOP ───────────────────── */
.added-item-btns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
/* Cijfers (aanmeldingen/gedeeld/etc) staan niet meer los te "rommelen" tussen
   de tags en de knoppen — ze zitten in een eigen horizontaal swipe-baantje,
   zodat de kaart rustiger oogt maar de data één swipe/scroll verderop blijft. */
.act-stats-swipe-wrap{position:relative;margin-top:10px;border-top:1px solid var(--warm-100);padding-top:8px}
.act-stats-row{
  display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  scroll-snap-type:x proximity;padding-bottom:2px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none
}
.act-stats-row::-webkit-scrollbar{display:none}
.act-stat-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--warm-100);color:var(--warm-600);flex-shrink:0;scroll-snap-align:start}
.act-stats-hint{position:absolute;right:0;top:8px;bottom:2px;width:22px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);display:flex;align-items:center;justify-content:flex-end;font-size:10px;color:var(--warm-400)}
.item-verborgen .act-stats-hint{background:linear-gradient(90deg,rgba(250,248,245,0),#F0F6FB 78%)}
.act-stat-chip.st-goed{background:var(--mint-light);color:var(--mint)}
.act-stat-chip.st-info{background:var(--civic-light);color:var(--civic)}
.act-stat-chip.st-warn{background:var(--mokka-light);color:var(--mokka-dark)}
.act-stat-chip.st-fout{background:var(--accent-light);color:var(--accent)}
.btn-bewerk{background:var(--civic-light);border:1px solid var(--civic-border);color:var(--civic);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .14s}
.btn-bewerk:hover{background:var(--civic);color:#fff}
.btn-verwijder{background:var(--warm-100);border:1px solid var(--warm-200);color:var(--warm-400);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .14s}
.btn-verwijder:hover{background:var(--accent-light);border-color:var(--accent-border);color:var(--accent)}

.buurt-chip.maxed{opacity:.35;pointer-events:none}
.buurt-chip.sel.maxed{opacity:1;pointer-events:auto}

/* ── BUURT ZOEKBALK (filtert alleen op naam) ─── */
.buurt-zoek-wrap{
  position:relative;margin-bottom:16px
}
.buurt-zoek-wrap svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  pointer-events:none;color:var(--warm-400)
}
.buurt-zoek{
  width:100%;padding:11px 14px 11px 38px;
  font-size:14px;font-family:inherit;
  border:1.5px solid var(--warm-400);border-radius:20px;
  background:#FFFFFF;color:var(--warm-black);
  box-shadow:0 1px 3px rgba(24,20,15,.08);
  transition:border-color .14s,box-shadow .14s;
  -webkit-appearance:none;appearance:none;box-sizing:border-box
}
.buurt-zoek:focus{
  outline:none;border-color:var(--civic);
  box-shadow:0 0 0 3px rgba(26,58,92,.10)
}
.buurt-zoek::placeholder{color:var(--warm-400)}
.buurt-zoek-leeg{
  font-size:13px;color:var(--warm-400);padding:10px 2px;
  display:none
}

/* ── STRAAL BANNER (stadsdeel Zuid) ──────────── */
.radius-banner{
  background:linear-gradient(135deg,var(--civic-light) 0%,#EEF6F0 100%);
  border:1px solid var(--civic-border);
  border-radius:12px;
  padding:12px 16px;
  margin-bottom:20px;
  font-size:13px;
  color:var(--civic);
  line-height:1.55;
  display:flex;align-items:flex-start;gap:10px
}
.radius-banner-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--civic);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:16px
}
.radius-banner-txt strong{display:block;font-size:13px;font-weight:600;margin-bottom:2px;color:var(--civic)}
.tag-afstand{background:#EDF7ED;color:#2E7D32;border:1px solid #A5D6A7}


.auth-wrap{max-width:420px;margin:0 auto;padding:40px 20px 80px}
.auth-hero{background:var(--accent-light);padding:40px 24px 32px;border-bottom:1px solid var(--accent-border)}
.auth-hero h2{font-family:var(--serif);font-size:30px;color:var(--warm-black);margin-bottom:6px;letter-spacing:-.03em;font-weight:400}
.auth-hero p{font-size:14px;color:var(--warm-600);line-height:1.65}
.auth-tabs{display:flex;border-bottom:2px solid var(--warm-200);margin-bottom:28px}
.auth-tab{flex:1;background:none;border:none;padding:13px 8px;font-size:13px;font-weight:500;color:var(--warm-400);cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .16s}
.auth-tab.active{color:var(--civic);border-bottom-color:var(--civic)}
.auth-panel{display:none}.auth-panel.active{display:block}
.rol-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.3px;text-transform:uppercase}
.rol-badge.beheerder{background:var(--accent-light);color:var(--accent-dark);border:1px solid var(--accent-border)}
.rol-badge.coordinator{background:var(--civic-light);color:var(--civic);border:1px solid var(--civic-border)}
.rol-badge.collega{background:var(--warm-100);color:var(--warm-600);border:1px solid var(--warm-200)}

/* ── ROL KEUZE ────────────────────────────────────── */
.rol-keuze-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.rol-keuze-item{border:1.5px solid var(--warm-200);border-radius:14px;padding:16px 12px;cursor:pointer;text-align:center;transition:all .16s;background:#FFFFFF}
.rol-keuze-item:hover{border-color:var(--civic);background:var(--civic-light)}
.rol-keuze-item.sel{border-color:var(--civic);border-width:2px;background:var(--civic-light)}
.rol-keuze-icon{font-size:24px;margin-bottom:8px}
.rol-keuze-label{font-size:13px;font-weight:600;color:var(--warm-black);margin-bottom:3px}
.rol-keuze-sub{font-size:11px;color:var(--warm-400);line-height:1.5}
.rol-keuze-item.sel .rol-keuze-label{color:var(--civic)}

/* ── COLLEGA KAART UITGEBREID ─────────────────────── */
.collega-rol-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 9px;border-radius:20px;margin-left:6px;vertical-align:middle}
.collega-rol-badge.beheerder{background:var(--accent-light);color:var(--accent-dark);border:1px solid var(--accent-border)}
.collega-rol-badge.coordinator{background:var(--civic-light);color:var(--civic);border:1px solid var(--civic-border)}
.collega-rol-badge.collega{background:var(--warm-100);color:var(--warm-600);border:1px solid var(--warm-200)}
.btn-collega-verwijder{background:none;border:none;color:var(--warm-300,#C8C2BB);cursor:pointer;font-size:18px;line-height:1;padding:4px;transition:color .14s;flex-shrink:0}
.btn-collega-verwijder:hover{color:var(--accent)}

/* ── DASH COLLEGA SECTIE ──────────────────────────── */
.dash-sectie-label{font-size:10px;font-weight:700;color:var(--warm-400);text-transform:uppercase;letter-spacing:2px;margin:24px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--warm-200)}
.collega-acts-blok{background:var(--cream);border:1px solid var(--warm-200);border-radius:12px;padding:12px 14px;margin-top:8px}
.collega-act-rij{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--warm-100)}
.collega-act-rij:last-child{border-bottom:none}
.collega-act-naam{font-size:13px;font-weight:500;color:var(--warm-black);flex:1}
.collega-act-meta{font-size:11px;color:var(--warm-400)}

/* ── HDR LOGIN STATE ──────────────────────────────── */
.hdr-user{display:flex;align-items:center;gap:8px}
.hdr-avatar{width:32px;height:32px;border-radius:50%;background:var(--civic);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.hdr-user-naam{font-size:12px;font-weight:500;color:var(--warm-black);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-uitloggen{background:none;border:1px solid var(--warm-200);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:500;color:var(--warm-600);cursor:pointer;font-family:inherit;transition:all .14s}
.btn-uitloggen:hover{border-color:var(--accent);color:var(--accent)}

/* ═══════════════════════════════════════════════════════
   REFLECTEREN — bouwstenen-model
   ═══════════════════════════════════════════════════════ */
:root{
  --refl-groen:#3A6B58; --refl-groen-soft:#E4F0EB;
  --refl-oranje:#C9821F; --refl-oranje-soft:#FBEEDA;
  --refl-rood:#C1443C; --refl-rood-soft:#FBEDEC;
  --refl-leeg:#9AA1AA; --refl-leeg-soft:#F1F1F0;
}
.refl-intro{background:var(--civic-light);border:1px solid var(--civic-border);border-radius:12px;padding:14px 16px;margin-bottom:18px;font-size:12.5px;color:var(--civic);line-height:1.65}
.refl-picks{display:grid;grid-template-columns:1fr;gap:10px}
.refl-pick-card{display:flex;background:#fff;border:1px solid var(--warm-200);border-radius:12px;overflow:hidden;cursor:pointer;transition:box-shadow .16s,transform .16s}
.refl-pick-card:hover{box-shadow:var(--sh-sm);transform:translateY(-1px)}
.refl-pick-spine{width:6px;flex-shrink:0}
.refl-pick-body{flex:1;min-width:0;padding:12px 14px}
.refl-pick-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.refl-pick-naam{font-size:14px;font-weight:600;color:var(--warm-black)}
.refl-status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.refl-status-pill.st-GROEN{background:var(--refl-groen-soft);color:var(--refl-groen)}
.refl-status-pill.st-ORANJE{background:var(--refl-oranje-soft);color:var(--refl-oranje)}
.refl-status-pill.st-ROOD{background:var(--refl-rood-soft);color:var(--refl-rood)}
.refl-status-pill.st-LEEG{background:var(--refl-leeg-soft);color:var(--refl-leeg)}
.refl-progress-track{background:var(--warm-100);border-radius:20px;height:6px;overflow:hidden;margin-bottom:6px}
.refl-progress-fill{height:100%;border-radius:20px;transition:width .3s}
.refl-progress-label{font-size:11px;color:var(--warm-400)}
.refl-who{font-size:11px;color:var(--warm-600);margin-top:6px}
.refl-new-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--mint-light);border:1.5px dashed rgba(58,107,88,.4);border-radius:12px;padding:20px;cursor:pointer;font-size:13px;font-weight:600;color:var(--mint);transition:background .16s}
.refl-new-card:hover{background:rgba(58,107,88,.14)}
.refl-new-card span{font-size:22px}

/* wizard */
.refl-wizard-top{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.refl-wiz-exit{background:none;border:none;color:var(--warm-400);font-size:12px;cursor:pointer;font-family:inherit;align-self:flex-start;padding:0}
.refl-wiz-exit:hover{color:var(--warm-black)}
.refl-who-chips{display:flex;flex-wrap:wrap;gap:6px}
.refl-who-chip{background:#fff;border:1.5px solid var(--warm-200);border-radius:20px;padding:4px 12px;font-size:11.5px;font-weight:500;color:var(--warm-600);cursor:pointer;font-family:inherit;transition:all .14s}
.refl-who-chip.on{background:var(--civic);border-color:var(--civic);color:#fff}
.refl-steps-strip{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.refl-step-dot{width:16px;height:16px;border-radius:50%;border:none;background:var(--warm-200);cursor:pointer;padding:0;flex-shrink:0}
.refl-step-dot.current{outline:2px solid var(--civic);outline-offset:2px}
.refl-step-dot.done-GROEN{background:var(--refl-groen)}
.refl-step-dot.done-ORANJE{background:var(--refl-oranje)}
.refl-step-dot.done-ROOD{background:var(--refl-rood)}
.refl-chapter-card,.refl-wizard-card{background:#fff;border:1px solid var(--warm-200);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--sh-xs)}
.refl-chapter-emoji{font-size:34px;margin-bottom:8px}
.refl-chapter-tag{font-size:10px;font-weight:700;color:var(--warm-400);text-transform:uppercase;letter-spacing:1.2px}
.refl-chapter-card h2{font-size:22px;margin:8px 0 8px}
.refl-chapter-card p{font-size:13.5px;color:var(--warm-600);line-height:1.65;margin-bottom:18px}
.refl-step-count{font-size:10.5px;font-weight:700;color:var(--warm-400);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.refl-eyebrow{font-size:11.5px;font-weight:600;color:var(--warm-600);margin-bottom:4px;display:block}
.refl-eyebrow.mens{color:var(--civic)}
.refl-eyebrow.orga{color:var(--mokka)}
.refl-wizard-card h2{font-size:19px;color:var(--warm-black);margin-bottom:14px;font-weight:400}
.refl-recap{background:var(--warm-100);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--warm-600);margin-bottom:10px;display:flex;gap:8px}
.refl-recap-tag{font-weight:700;color:var(--warm-400);flex-shrink:0}
.refl-follow-strip{background:var(--mokka-light);border:1px solid var(--mokka-mid);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--mokka-dark);margin-bottom:10px;display:flex;gap:8px}
.refl-status-row{display:flex;gap:8px;margin-bottom:12px}
.refl-status-row button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:1.5px solid var(--warm-200);border-radius:10px;padding:10px 6px;font-size:12px;font-weight:600;color:var(--warm-600);cursor:pointer;font-family:inherit;transition:all .14s}
.refl-status-row button .emoji{font-size:18px}
.refl-status-row button .micro{font-size:10px;font-weight:400;color:var(--warm-400)}
.refl-status-row button.sel-GROEN{background:var(--refl-groen-soft);border-color:var(--refl-groen);color:var(--refl-groen)}
.refl-status-row button.sel-ORANJE{background:var(--refl-oranje-soft);border-color:var(--refl-oranje);color:var(--refl-oranje)}
.refl-status-row button.sel-ROOD{background:var(--refl-rood-soft);border-color:var(--refl-rood);color:var(--refl-rood)}
.refl-wizard-card textarea{width:100%;min-height:70px;border:1.5px solid var(--warm-200);border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;resize:vertical;margin-bottom:10px}
.refl-follow-toggle{background:none;border:none;color:var(--civic);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:0;margin-bottom:10px}
.refl-follow-fields{display:none;flex-direction:column;gap:8px;background:var(--cream);border:1px solid var(--warm-200);border-radius:10px;padding:12px;margin-bottom:10px}
.refl-follow-fields.show{display:flex}
.refl-follow-fields input{border:1px solid var(--warm-200);border-radius:8px;padding:7px 10px;font-size:12.5px;font-family:inherit;width:100%}
.refl-follow-fields label{font-size:10.5px;font-weight:600;color:var(--warm-400);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:3px}
.refl-nav{display:flex;align-items:center;gap:10px;margin-top:6px}
.refl-nav .btn-ghost{background:none;border:none;color:var(--warm-600);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;padding:8px 4px}
.refl-nav .btn-primary{background:var(--civic);color:#fff;border:none;border-radius:20px;padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;margin-left:auto}
.refl-summary-row{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--warm-100);font-size:12.5px}
.refl-summary-row .dot{width:9px;height:9px;border-radius:50%;margin-top:4px;flex-shrink:0}
.refl-summary-row .dot.st-GROEN{background:var(--refl-groen)}
.refl-summary-row .dot.st-ORANJE{background:var(--refl-oranje)}
.refl-summary-row .dot.st-ROOD{background:var(--refl-rood)}
.refl-summary-row .dot.st-LEEG{background:var(--refl-leeg)}
.refl-summary-row .lbl{font-weight:600;color:var(--warm-black);min-width:130px;flex-shrink:0}
.refl-summary-row .txt{color:var(--warm-600);line-height:1.5}