/* ============================================================
   JaHandig - gedeelde stijl voor alle pagina's
   ============================================================ */

/* Cookiebanner (gecentreerde modal) */
.jh-cookie-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 20, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.jh-cookie-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.jh-cookiebar {
  max-width: 460px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-hover);
  padding: 22px 24px;
  transform: translateY(12px);
  transition: transform .25s ease;
}
.jh-cookie-overlay.open .jh-cookiebar {
  transform: translateY(0);
}
.jh-cookiebar h3 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--text);
}
.jh-cookiebar p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.jh-cookiebar p a {
  color: var(--accent);
}
.jh-cb-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Zwevend privacy-schildje linksonder */
.jh-cookie-fab {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 900;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  transition: color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.jh-cookie-fab svg {
  width: 22px;
  height: 22px;
}
.jh-cookie-fab:hover {
  color: var(--accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Inter - zelf gehost (geen verbinding met Google Fonts nodig) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2');
}

:root {
  --accent: #5b5bf5;
  --accent-dark: #4a45e0;
  --accent-soft: #edecff;

  --bg: #f7f8fc;
  --bg-hero-1: #eef0fd;
  --bg-hero-2: #f7f8fc;
  --surface: #ffffff;
  --border: #eceef4;
  --shadow: 0 4px 20px rgba(30, 35, 80, 0.06);
  --shadow-hover: 0 10px 30px rgba(60, 50, 200, 0.12);

  --text: #1b2236;
  --text-muted: #6b7280;
  --text-soft: #9aa1b0;

  --c-purple-bg: #efe9fd;  --c-purple: #8b5cf6;  /* Text & Writing */
  --c-blue-bg:   #e8f0fe;  --c-blue:   #3b82f6;  /* Date & Time */
  --c-indigo-bg: #e9e8ff;  --c-indigo: #5b5bf5;  /* Coding */
  --c-green-bg:  #e7f7ef;  --c-green:  #10b981;  /* Money & Finance */
  --c-orange-bg: #fdeede;  --c-orange: #f59e0b;  /* Conversions */
  --c-teal-bg:   #e0f5f1;  --c-teal:   #14b8a6;  /* Math */
  --c-red-bg:    #fde8e8;  --c-red:    #ef4444;  /* Health */
  --c-coral-bg:  #fdeee8;  --c-coral:  #f97316;  /* Statistics */
  --c-pink-bg:   #fde8ef;  --c-pink:   #ec4899;  /* Online & Marketing */
  --c-lime-bg:   #ecfce7;  --c-lime:   #84cc16;  /* Random Generators */
  --c-gray-bg:   #f0f0f0;  --c-gray:   #6b7280;  /* Other */

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --maxw: 1200px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html.dark {
  --accent: #7c7cff;
  --accent-dark: #6a6aff;
  --accent-soft: #23234a;

  --bg: #0f1320;
  --bg-hero-1: #171a2e;
  --bg-hero-2: #0f1320;
  --surface: #181c2c;
  --border: #262b3d;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.5);

  --text: #eef0f6;
  --text-muted: #9aa1b4;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===================== HEADER ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 68px;
}
.site-header .container .header-actions {
  justify-self: end;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.brand .logo {
  width: 34px; height: 34px;
  object-fit: cover;
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 15px;
  transition: color .15s;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.theme-toggle, .menu-toggle {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
}
.theme-toggle:hover, .menu-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle svg, .menu-toggle svg { width: 18px; height: 18px; }
.menu-toggle { display: none; }

html:not(.dark) .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: none; }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  background:
    radial-gradient(circle at 12% 20%, rgba(91,91,245,0.08) 0, transparent 40%),
    radial-gradient(circle at 88% 30%, rgba(139,124,255,0.08) 0, transparent 40%),
    linear-gradient(180deg, var(--bg-hero-1), var(--bg-hero-2));
  padding: 80px 0 64px;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 1; text-align: center; }
.hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--text);
}
.hero p.lead {
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-muted);
  margin: 0 auto 36px;
  max-width: 620px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px 10px 10px 20px;
  max-width: 800px;
  margin: 0 auto;
}
.search-box svg.search-icon { width: 22px; height: 22px; color: var(--text-soft); flex: none; }
.search-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 17px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}
.search-box input::placeholder { color: var(--text-soft); }

.btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 12px;
  padding: 12px 26px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--accent-soft); color: var(--accent); }
.btn.ghost:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--accent) 12%); }

.popular-row {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.popular-row .label { color: var(--text-muted); font-size: 14px; font-weight: 600; margin-right: 4px; }
.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  color: var(--text-muted);
  transition: all .15s;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chip:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; justify-content: center; }

/* ===================== SECTIONS ===================== */
section.block { padding: 56px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 26px;
}
.section-head h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.section-head a.more { color: var(--accent); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.section-head a.more:hover { gap: 9px; }

/* ===================== CATEGORY CARDS ===================== */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.cat-card--soon { opacity: 0.55; cursor: default; pointer-events: none; }
.cat-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.cat-card p { font-size: 13.5px; color: var(--text-muted); margin: 0 0 16px; }
.cat-card .count { font-size: 14px; font-weight: 700; margin-top: auto; }

/* ===================== TOOL CARDS ===================== */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.tool-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.tool-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  flex: none;
}
.tool-ic svg { width: 22px; height: 22px; }
.tool-card .tc-body { flex: 1; min-width: 0; }
.tool-card h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 2px; }
.tool-card p { font-size: 13px; color: var(--text-muted); margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.tool-card .arrow { color: var(--text-soft); flex: none; transition: transform .15s, color .15s; }
.tool-card:hover .arrow { color: var(--accent); transform: translateX(3px); }
.tool-card .arrow svg { width: 18px; height: 18px; }

/* icon color helpers */
.ic-green  { background: var(--c-green-bg);  color: var(--c-green); }
.ic-blue   { background: var(--c-blue-bg);   color: var(--c-blue); }
.ic-orange { background: var(--c-orange-bg); color: var(--c-orange); }
.ic-purple { background: var(--c-purple-bg); color: var(--c-purple); }
.ic-pink   { background: var(--c-pink-bg);   color: var(--c-pink); }
.ic-indigo { background: var(--c-indigo-bg); color: var(--c-indigo); }
.ic-a { background: var(--c-purple-bg); color: var(--c-purple); }  /* Tekst */
.ic-b { background: var(--c-blue-bg); color: var(--c-blue); }  /* Datum & Tijd */
.ic-c { background: var(--c-indigo-bg);   color: var(--c-indigo); }    /* Ontwikkelaars */
.ic-d { background: var(--c-green-bg);  color: var(--c-green); }   /* Geld & Financiën */
.ic-e { background: var(--c-orange-bg); color: var(--c-orange); }  /* Conversies */
.ic-f { background: var(--c-teal-bg);   color: var(--c-teal); }    /* Rekenen */
.ic-g { background: var(--c-red-bg);  color: var(--c-red); }   /* Gezondheid */
.ic-h { background: var(--c-coral-bg); color: var(--c-coral); }  /* Statistieken */
.ic-i { background: var(--c-pink-bg);   color: var(--c-pink); }    /* Online & Marketing */
.ic-j { background: var(--c-lime-bg);   color: var(--c-lime); }    /* Willekeurige Generators */
.ic-k { background: var(--c-gray-bg); color: var(--c-gray); }  /* Overig */
.tx-green{color:var(--c-green)}.tx-blue{color:var(--c-blue)}.tx-orange{color:var(--c-orange)}.tx-purple{color:var(--c-purple)}.tx-pink{color:var(--c-pink)}.tx-indigo{color:var(--c-indigo)}.tx-teal{color:var(--c-teal)}.tx-red{color:var(--c-red)}.tx-coral{color:var(--c-coral)}.tx-lime{color:var(--c-lime)}.tx-gray{color:var(--c-gray)}

/* ===================== TOOL PAGE LAYOUT ===================== */
.tool-hero {
  background: linear-gradient(180deg, var(--bg-hero-1), var(--bg-hero-2));
  padding: 48px 0 40px;
  border-bottom: 1px solid var(--border);
}
.breadcrumb { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: .5; }
/* Een heel lang woord in de titel (zoals "Betrouwbaarheidsinterval") duwde de
   pagina op een telefoon breder dan het scherm. Zulke titels krijgen daarom in
   de front matter zachte afbreekstreepjes mee via `titel_kop`; die zorgen voor
   nette afbreekpunten én maken het woord smal genoeg om in de flexbox mee te
   krimpen, zodat het icoon gewoon naast de titel blijft staan. Bewust geen
   overflow-wrap: die zou overal mogen breken en dan kiest de browser liever
   een punt midden in een lettergreep dan het afbreekstreepje. */
.tool-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.025em; margin: 0 0 10px; display: flex; align-items: center; gap: 14px; min-width: 0; hyphens: auto; }
.tool-hero h1 .tool-ic { width: 52px; height: 52px; flex: none; }
.tool-hero p { font-size: 18px; color: var(--text-muted); margin: 0; max-width: 680px; }

.disclaimer-bar { background: var(--bg); }
.disclaimer-inner { max-width: 820px; margin: 0 auto; }
.disclaimer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: color .15s;
}
.disclaimer-toggle:hover { color: var(--c-orange); }
.disclaimer-toggle svg { width: 14px; height: 14px; }
.disclaimer-toggle .chev { transition: transform .2s; }
.disclaimer-toggle.open .chev { transform: rotate(180deg); }
.disclaimer-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.disclaimer-body.open { max-height: 120px; padding-bottom: 14px; }

.tool-wrap { padding: 40px 0 10px; }
.tool-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px;
  max-width: 820px;
  margin: 0 auto;
}

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.field input[type="text"], .field input[type="number"], .field input[type="date"], .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 200px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  user-select: none;
}
.field-tip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-tip .tip-text {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  max-width: 80vw;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  padding: 9px 11px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s;
  z-index: 20;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  pointer-events: none;
}
.field-tip .tip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text);
}
.field-tip:hover .tip-text,
.field-tip:focus .tip-text,
.field-tip:focus-within .tip-text { opacity: 1; visibility: visible; }

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.btn-row.equal { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.btn-row.equal .btn { padding-left: 12px; padding-right: 12px; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  text-align: center;
}
.stat .num { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.stat .num.num-lang { font-size: 19px; line-height: 1.5; }
.stat .lbl { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.stat .rest { font-size: 12px; color: var(--text-muted); margin-top: 4px; opacity: 0.8; }
.stat .rest:empty { display: none; }

.result-box {
  margin-top: 22px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: var(--radius-md);
  padding: 22px;
  text-align: center;
}
.result-box .big { font-size: 34px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.result-box .big.num-lang { font-size: 27px; }
.result-box .sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; overflow-wrap: anywhere; }
.result-box.hidden { display: none; }
.stats.hidden { display: none; }
.field.hidden { display: none; }

/* Pythagoras-tekening */
.pyth-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pyth-visual.hidden { display: none; }
.pyth-visual svg { width: 100%; max-width: 440px; height: auto; }
.pyth-note { font-size: 12.5px; font-style: italic; color: var(--text-muted); }

/* Gemiddelde: lijst met losse invulvakjes */
.num-lijst { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.num-item {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 2px 2px 4px;
  transition: border-color .15s, box-shadow .15s, opacity .15s;
}
.num-item:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.num-item.ongeldig {
  border-color: #d92d20;
  box-shadow: 0 0 0 3px color-mix(in srgb, #d92d20 15%, transparent);
}
.num-item.sleept { opacity: .45; }
.field .num-item input {
  width: 88px;
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 9px 2px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  text-align: center;
  outline: none;
}
.field .num-item input:focus { box-shadow: none; border-color: transparent; }
.num-grip {
  display: grid;
  place-items: center;
  padding: 8px 3px;
  color: var(--text-muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.num-grip:active { cursor: grabbing; }
.num-grip svg { width: 12px; height: 16px; display: block; }
.num-del {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 7px 8px;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.num-del:hover { color: #d92d20; background: color-mix(in srgb, #d92d20 10%, transparent); }
.num-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.num-add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.num-add svg { width: 14px; height: 14px; }
.num-hint { font-size: 12.5px; color: var(--text-muted); margin: 9px 0 0; }

/* Gewogen gemiddelde: rijen met een cijfer en een weging onder kolomkoppen */
.wgt-lijst { flex-direction: column; align-items: flex-start; }
.wgt-kop {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wgt-kop-spacer { width: 23px; }
.wgt-kop-cijfer, .wgt-kop-weging { width: 88px; text-align: center; }
.wgt-kop-maal { width: 22px; }
.wgt-maal {
  width: 22px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
}
.pyth-sq {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round;
}
.pyth-sq-c { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.pyth-tri {
  fill: color-mix(in srgb, var(--accent) 26%, transparent);
  stroke: var(--accent); stroke-width: 2; stroke-linejoin: round;
}
.pyth-hyp { stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.pyth-right { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.pyth-label { fill: var(--text); font-size: 16px; font-weight: 700; font-style: italic; }

/* Kwadratische formule: grafiek van de parabool */
.kwad-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kwad-visual.hidden { display: none; }
.kwad-visual svg { width: 100%; max-width: 440px; height: auto; }
.kwad-as { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.6; }
.kwad-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.kwad-punt { fill: var(--accent); }
.kwad-top { fill: var(--text); }
.kwad-label { fill: var(--text); font-size: 15px; font-weight: 700; font-style: italic; }

/* Richtingscoëfficiënt: grafiek van de lijn met hellingstrapje */
.rc-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rc-visual.hidden { display: none; }
.rc-visual svg { width: 100%; max-width: 440px; height: auto; }
.rc-as { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.6; }
.rc-lijn { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.rc-delta { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.rc-punt { fill: var(--accent); }
.rc-label { fill: var(--text); font-size: 15px; font-weight: 700; font-style: italic; }

/* Regressiecoëfficiënt: rijen met (x, y)-punten en spreidingsdiagram.
   Het invoerblok krimpt tot de breedte van de rijen en staat gecentreerd
   in het paneel; de kolomkoppen blijven links uitgelijnd met de rijen. */
.reg-centreer { width: max-content; max-width: 100%; margin: 0 auto; }
.reg-hint { text-align: center; }
.reg-lijst { flex-direction: column; align-items: center; }
.reg-kop {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-muted);
}
.reg-kop-spacer { width: 49px; }
.reg-kop-x, .reg-kop-y { width: 88px; text-align: center; }
.reg-kop-komma { width: 16px; }
.reg-nr {
  width: 18px;
  text-align: right;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
}
.reg-haak {
  color: var(--text-muted);
  font-size: 19px;
  font-weight: 500;
  padding: 0 1px;
  user-select: none;
  -webkit-user-select: none;
}
.reg-komma {
  width: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
}
.reg-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reg-visual.hidden { display: none; }
.reg-visual svg { width: 100%; max-width: 460px; height: auto; }
.reg-kader { fill: var(--bg); stroke: var(--border); }
.reg-raster { stroke: var(--border); stroke-width: 1; }
.reg-as { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.55; }
.reg-lijn { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.reg-punt { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.reg-tick { fill: var(--text-muted); font-size: 11.5px; font-weight: 500; }
.reg-puntlabel {
  fill: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Oppervlakte cirkel: tekening van de cirkel met straal en diameter */
.cirkel-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cirkel-visual.hidden { display: none; }
.cirkel-visual svg { width: 100%; max-width: 300px; height: auto; }
.cirkel-vlak {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
  stroke: var(--accent); stroke-width: 2.5;
}
.cirkel-straal { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.cirkel-diameter { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cirkel-punt { fill: var(--accent); }
.cirkel-label { fill: var(--text); font-size: 16px; font-weight: 700; font-style: italic; }

/* ===================== BMI ===================== */
.bmi-result { margin-top: 26px; }
.bmi-result.hidden { display: none; }
.bmi-headline { font-size: 20px; font-weight: 700; text-align: center; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bmi-headline strong { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.bmi-cat { font-size: 13px; font-weight: 700; color: #fff; padding: 4px 12px; border-radius: 999px; }

.bmi-meter { position: relative; padding-top: 56px; margin: 14px 0 24px; }
.bmi-bar { display: flex; height: 34px; border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.bmi-bar .seg { display: flex; align-items: center; justify-content: center; min-width: 0; }
.bmi-bar .seg span {
  font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
}
.s-vtl  { background: #5b8def; }
.s-laag { background: #37c8c3; }
.s-goed { background: #22c55e; }
.s-hoog { background: #f5b301; }
.s-vth  { background: #ef4444; }

.bmi-marker {
  position: absolute; top: 6px; height: 84px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  transition: left .45s cubic-bezier(.34, 1.45, .6, 1);
  z-index: 2; pointer-events: none;
}
.bmi-pill {
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); border-radius: 10px;
  padding: 5px 13px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em;
  position: relative; white-space: nowrap;
}
.bmi-pill::after {
  content: ""; position: absolute; bottom: -5px; left: 50%;
  width: 10px; height: 10px; background: var(--surface);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.bmi-stem {
  flex: 1; width: 3px; margin-top: 4px;
  background: var(--text); border-radius: 2px;
  box-shadow: 0 0 0 1.5px var(--surface);
}
.bmi-advice {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
  font-size: 15px; color: var(--text-muted); text-align: center;
}

/* ===================== BOX SHADOW ===================== */
.bs-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 230px; padding: 30px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 20px; transition: background .2s;
}
.bs-box { width: 150px; height: 110px; border-radius: 12px; }

.bs-presets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.bs-presets-lbl { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.bs-presets .btn { padding: 8px 14px; font-size: 13.5px; }

.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
.bs-slider { margin-bottom: 16px; }
.bs-slider .bs-lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.bs-slider .bs-lab label { font-size: 14px; font-weight: 600; color: var(--text); }
.bs-slider .bs-val { font-size: 13.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.bs-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--border); outline: none; cursor: pointer;
}
.bs-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.bs-slider input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.bs-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.bs-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 4px 0 4px; }
.bs-color { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.bs-color input[type="color"] {
  width: 40px; height: 30px; padding: 2px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); cursor: pointer;
}
.bs-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.bs-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.bs-preview-opts {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.bs-preview-opts .bs-color { color: var(--text-muted); }
.bs-opts-lbl { font-size: 14px; font-weight: 600; color: var(--text-muted); }

.bs-code {
  margin: 20px 0 18px; padding: 16px 18px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.6; color: var(--text);
  overflow-x: auto; white-space: pre;
}

@media (max-width: 700px) {
  .bs-grid { grid-template-columns: 1fr; gap: 0; }
  .bs-options { gap: 14px; }
}

/* ===================== KLEURENKIEZER ===================== */
.kp-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; margin-bottom: 8px; }

.kp-sv {
  position: relative; height: 230px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: crosshair; touch-action: none; outline: none;
}
.kp-sv:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.kp-thumb {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff; background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .3);
  transform: translate(-50%, -50%); pointer-events: none;
}

.kp-slider { margin-top: 16px; }
.kp-slider .kp-lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.kp-slider .kp-lab label { font-size: 14px; font-weight: 600; color: var(--text); }
.kp-slider .kp-val { font-size: 13.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.kp-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 14px; border-radius: 999px;
  border: 1px solid var(--border); outline: none; cursor: pointer;
}
#kp-hue {
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.kp-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: transparent; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .3);
}
.kp-slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: transparent; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), 0 1px 4px rgba(0, 0, 0, .3);
}
.kp-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.kp-hexrow { display: flex; gap: 10px; margin-top: 16px; }
.kp-hexrow input {
  flex: 1; min-width: 0;
  border: 1px solid var(--border); background: var(--bg);
  border-radius: var(--radius-sm); padding: 10px 14px;
  font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.kp-hexrow input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.kp-hexrow input.kp-invalid { border-color: #e5484d; }
.kp-hexrow .btn { padding: 8px 14px; font-size: 13.5px; white-space: nowrap; }

.kp-swatch {
  height: 64px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: repeating-conic-gradient(#cfcfcf 0% 25%, #ffffff 0% 50%) 0 0 / 14px 14px;
  overflow: hidden; margin-bottom: 12px;
}
.kp-swatch > div { width: 100%; height: 100%; }

.kp-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 7px 7px 12px;
  margin-bottom: 10px;
}
.kp-fmt { flex: 0 0 44px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted); }
.kp-row input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px; color: var(--text); outline: none;
}
.kp-row .btn { padding: 6px 12px; font-size: 13px; }

.kp-sw-title { font-size: 14px; font-weight: 600; color: var(--text); margin: 18px 0 9px; }
.kp-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 8px; }
.kp-sw {
  aspect-ratio: 1; border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; padding: 0; transition: transform .12s;
}
.kp-sw:hover { transform: scale(1.12); }
.kp-sw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 700px) {
  .kp-grid { grid-template-columns: 1fr; gap: 20px; }
  .kp-sv { height: 200px; }
}

/* ===================== LOREM IPSUM ===================== */
.li-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 2px 0 18px; }
.li-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.li-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.li-count { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.li-count:empty { display: none; }
.li-citaat {
  background: var(--bg); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 14px 0;
  font-style: italic; color: var(--text-muted); font-size: 15px; line-height: 1.6;
}

/* ===================== IBAN CONTROLEREN ===================== */
.iban-veld { position: relative; }
.iban-veld input { padding-right: 48px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.iban-status { position: absolute; right: 14px; bottom: 12px; width: 24px; height: 24px; pointer-events: none; }
.iban-status svg { width: 100%; height: 100%; display: none; }
.iban-status.goed .ik-goed { display: block; color: var(--c-green); }
.iban-status.slecht .ik-slecht { display: block; color: var(--c-red); }
.iban-vbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 18px; }
.iban-vbs .vb-label { font-size: 13.5px; font-weight: 600; color: var(--text-muted); margin-right: 2px; }
.iban-vbs .chip { cursor: pointer; font-family: inherit; font-variant-numeric: tabular-nums; }
.result-box.iban-goed {
  background: color-mix(in srgb, var(--c-green) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--c-green) 35%, var(--border));
}
.result-box.iban-goed .big { color: var(--c-green); display: flex; align-items: center; justify-content: center; gap: 10px; }
.result-box.iban-goed .big svg { width: 30px; height: 30px; flex: none; }
.result-box.iban-slecht {
  background: color-mix(in srgb, var(--c-red) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--c-red) 30%, var(--border));
  color: var(--text);
}
.iban-delen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.iban-deel { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.iban-deel .code {
  font-weight: 800; font-size: 20px; letter-spacing: 0.08em;
  padding: 6px 12px; border-radius: 9px; overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.iban-deel .naam { font-size: 11.5px; color: var(--text-muted); }
.iban-deel.d-land .code  { background: color-mix(in srgb, var(--c-blue) 14%, transparent);   color: var(--c-blue); }
.iban-deel.d-check .code { background: color-mix(in srgb, var(--c-purple) 14%, transparent); color: var(--c-purple); }
.iban-deel.d-bank .code  { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--c-orange); }
.iban-deel.d-rek .code   { background: color-mix(in srgb, var(--c-green) 14%, transparent);  color: var(--c-green); }
.iban-kopieer { margin-top: 14px; padding: 9px 18px; font-size: 14px; }
@media (max-width: 560px) {
  .iban-deel .code { font-size: 16px; padding: 5px 9px; }
}

/* ===================== ENERGIE-INDEX ===================== */
.ei-result { margin-top: 26px; }
.ei-result.hidden { display: none; }
.ei-headline {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  font-size: 20px; font-weight: 700; text-align: center;
}
.ei-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 58px; padding: 4px 14px; border-radius: 8px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.01em;
}
.ei-sub {
  max-width: 540px; margin: 10px auto 0;
  font-size: 14.5px; color: var(--text-muted); text-align: center;
}

/* De labelschaal: per klasse een gekleurde pijl die langer wordt naarmate
   de woning onzuiniger is, net als op een echt energielabel. */
.ei-schaal { display: flex; flex-direction: column; gap: 7px; margin: 24px 0 4px; }
.ei-rij { display: flex; align-items: center; gap: 10px; transition: opacity .2s; }
.ei-schaal.gekozen .ei-rij { opacity: .42; }
.ei-schaal.gekozen .ei-rij.actief { opacity: 1; }
.ei-wijzer { flex: 0 0 9px; width: 9px; height: 12px; }
.ei-rij.actief .ei-wijzer {
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid var(--text);
}
.ei-pijl-wrap { flex: 1 1 auto; min-width: 0; }
.ei-pijl {
  position: relative; display: flex; align-items: center;
  height: 30px; min-width: 84px; max-width: calc(100% - 12px); padding: 0 10px;
  background: var(--ei-kleur); color: var(--ei-tekst);
  border-radius: 4px 0 0 4px;
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
}
.ei-pijl::after {
  content: ""; position: absolute; left: 100%; top: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 12px solid var(--ei-kleur);
}
.ei-bereik {
  flex: 0 0 auto; width: 104px; text-align: right;
  font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ei-rij.actief .ei-bereik { color: var(--text); font-weight: 700; }
.ei-noot {
  margin-top: 16px; padding: 12px 16px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13.5px; color: var(--text-muted);
}
.ei-noot.hidden { display: none; }
/* Klein gekleurd labelblokje in de uitlegtabellen */
.ei-mini {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; padding: 2px 8px; border-radius: 5px;
  background: var(--ei-kleur); color: var(--ei-tekst);
  font-size: 12.5px; font-weight: 800;
}
.tabel-scroll { overflow-x: auto; margin: 16px 0 18px; }
.tabel-scroll > table { margin: 0; }
@media (max-width: 560px) {
  .ei-headline { font-size: 18px; }
  .ei-pijl { min-width: 62px; padding: 0 7px; font-size: 12.5px; }
  .ei-bereik { width: 78px; font-size: 11px; }
}

/* ===================== SEO / FAQ ===================== */
.seo { padding: 10px 0 64px; }
/* overflow-wrap laat een heel lang woord (zoals "betrouwbaarheidsinterval" in
   een kop) afbreken in plaats van buiten het scherm te steken. Het treedt
   alleen op als het woord echt niet past, dus verder verandert er niets. */
.seo-inner { max-width: 820px; margin: 0 auto; overflow-wrap: break-word; }
.seo h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 36px 0 12px; }
.seo h3 { font-size: 18px; font-weight: 700; margin: 26px 0 8px; }
.seo p { color: var(--text-muted); margin: 0 0 14px; font-size: 15.5px; }
.seo ul { color: var(--text-muted); padding-left: 20px; margin: 0 0 14px; }
.seo li { margin-bottom: 6px; }

.seo ul.risk-list { list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-direction: column; gap: 8px; }

/* Tabellen in de SEO-tekst (AOW-leeftijd, Energie-Index) en in de tools */
.aow-tabel, .ei-tabel, .z-tabel, .pc-tabel, .kw-tabel, .iqr-tabel, .bi-tabel, .bin-tabel, .tt-tabel, .pw-tabel, .cov-tabel, .chi-tabel { width: 100%; border-collapse: collapse; margin: 16px 0 18px; font-size: 14.5px; }
.aow-tabel th, .ei-tabel th, .z-tabel th, .pc-tabel th, .kw-tabel th, .iqr-tabel th, .bi-tabel th, .bin-tabel th, .tt-tabel th, .pw-tabel th, .cov-tabel th, .chi-tabel th { background: var(--bg); font-weight: 700; padding: 9px 12px; text-align: left; border-bottom: 2px solid var(--border); color: var(--text); white-space: nowrap; }
.aow-tabel td, .ei-tabel td, .z-tabel td, .pc-tabel td, .kw-tabel td, .iqr-tabel td, .bi-tabel td, .bin-tabel td, .tt-tabel td, .pw-tabel td, .cov-tabel td, .chi-tabel td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.aow-tabel tr:last-child td, .ei-tabel tr:last-child td, .z-tabel tr:last-child td, .pc-tabel tr:last-child td, .kw-tabel tr:last-child td, .iqr-tabel tr:last-child td, .bi-tabel tr:last-child td, .bin-tabel tr:last-child td, .tt-tabel tr:last-child td, .pw-tabel tr:last-child td, .cov-tabel tr:last-child td, .chi-tabel tr:last-child td { border-bottom: none; }
.aow-tabel .prognose-rij td { font-style: italic; }
.risk-list li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.risk-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.risk-range { flex: 0 0 auto; min-width: 118px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.risk-label { color: var(--text-muted); font-size: 15px; }
.tdee-list .risk-range { min-width: 76px; color: var(--accent); }
.tdee-list .risk-label strong { color: var(--text); font-weight: 700; }
@media (max-width: 480px) {
  .risk-list li { flex-wrap: wrap; }
  .risk-range { min-width: 0; }
  .risk-label { flex-basis: 100%; padding-left: 23px; }
}

/* ===================== Formulekaarten (FAQ) ===================== */
.formule-set { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.formule-kaart { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; overflow-x: auto; }
.formule-kaart .naam { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--text); }
.formule-kaart .fx { white-space: nowrap; font-size: 14px; line-height: 2; font-variant-numeric: tabular-nums; }
.formule-kaart .fx strong { font-weight: 600; }
.formule-kaart .noot { white-space: normal; font-size: 13px; color: var(--text-muted); margin-top: 6px; }

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  padding: 18px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.plus {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  color: var(--text-soft);
  flex: none;
  transition: transform .2s;
}
.faq-item.open .plus { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-a p { padding: 0 20px 18px; margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* ===================== BLOG ===================== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.post-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.post-meta-header { display: flex; align-items: center; gap: 10px; }
.post-cat-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.post-date { font-size: 13px; color: var(--text-muted); }
.post-card h3 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.post-card p { font-size: 14.5px; color: var(--text-muted); margin: 0; line-height: 1.6; flex: 1; }

.pc-nieuws  { background: var(--c-blue-bg);   color: var(--c-blue); }
.pc-tips    { background: var(--c-green-bg);  color: var(--c-green); }
.pc-updates { background: var(--c-purple-bg); color: var(--c-purple); }

.post-body-wrap { padding: 48px 0 64px; }
.post-body { max-width: 720px; margin: 0 auto; }
.post-body h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 36px 0 12px; }
.post-body h3 { font-size: 18px; font-weight: 700; margin: 26px 0 8px; }
.post-body p { color: var(--text-muted); margin: 0 0 16px; font-size: 16px; line-height: 1.75; }
.post-body ul, .post-body ol { color: var(--text-muted); padding-left: 22px; margin: 0 0 16px; }
.post-body li { margin-bottom: 6px; font-size: 16px; line-height: 1.6; }
.post-body a { color: var(--accent); text-decoration: underline; }
.post-body strong { color: var(--text); font-weight: 700; }
.post-body img { max-width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow); display: block; margin: 8px 0 24px; }
.post-body figure { margin: 8px 0 28px; }
.post-body figure img { margin-bottom: 0; }
.post-body figcaption { font-size: 13px; color: var(--text-soft); text-align: center; margin-top: 8px; }
.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.post-body th { background: var(--bg); font-weight: 700; padding: 10px 14px; text-align: left; border-bottom: 2px solid var(--border); color: var(--text); }
.post-body td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.post-body tr:last-child td { border-bottom: none; }
.post-body blockquote { border-left: 3px solid var(--accent); margin: 0 0 20px; padding: 12px 18px; background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.post-body blockquote p { margin: 0; color: var(--text); }

/* ===================== FOOTER ===================== */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 52px 0 28px;
  margin-top: 48px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.footer-grid .about .brand { margin-bottom: 12px; }
.footer-grid .about p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  max-width: 270px;
  line-height: 1.75;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-soft);
  margin: 0 0 14px;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  transition: color .15s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ===================== ENCODEREN / DECODEREN ===================== */
.enc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }
#enc-in { min-height: 120px; }
#enc-uit { min-height: 120px; background: var(--bg); }

.enc-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 16px; }
.enc-options.hidden { display: none; }
.enc-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.enc-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.enc-count { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.enc-count:empty { display: none; }

.enc-warn {
  margin-top: 14px; padding: 12px 16px;
  background: color-mix(in srgb, #f5b301 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #f5b301 45%, var(--border));
  border-radius: var(--radius-md);
  font-size: 14px; color: var(--text);
}
.enc-warn.hidden { display: none; }

/* ===================== OMGEKEERDE TEKST ===================== */
#omk-in { min-height: 130px; }
#omk-uit { min-height: 130px; background: var(--bg); }

.omk-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 16px; }
.omk-options.hidden { display: none; }
.omk-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.omk-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.omk-count { font-size: 13.5px; color: var(--text-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
.omk-count:empty { display: none; }

.omk-note {
  margin-top: 14px; padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
}
.omk-note.hidden { display: none; }

/* ===================== TRANSITIEVERGOEDING ===================== */
.tv-options { margin: 2px 0 6px; }
.tv-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.tv-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ===================== FOTO COMPRIMEREN ===================== */
.fc-drop {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 24px; margin-bottom: 20px;
  border: 2px dashed var(--border); border-radius: var(--radius-md);
  background: var(--bg); cursor: pointer; text-align: center;
  transition: border-color .15s, background .15s;
}
.fc-drop:hover, .fc-drop:focus-visible { border-color: var(--accent); }
.fc-drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fc-drop.sleep { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.fc-drop svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 4px; }
.fc-drop strong { font-size: 16px; color: var(--text); }
.fc-drop span { font-size: 13.5px; color: var(--text-muted); max-width: 460px; line-height: 1.5; }

.fc-slider { margin-bottom: 4px; }
.fc-slider .fc-lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.fc-slider .fc-lab label { font-size: 14px; font-weight: 600; color: var(--text); }
.fc-slider .fc-val { font-size: 13.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.fc-slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--border); outline: none; cursor: pointer;
}
.fc-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.fc-slider input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.fc-slider input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fc-slider input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; }

.fc-noot { margin-top: 8px; font-size: 13.5px; color: var(--text-muted); }
.fc-noot.hidden { display: none; }

.fc-lijst { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.fc-lijst:empty { display: none; }
.fc-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
  cursor: pointer; transition: border-color .15s;
}
.fc-item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fc-item.actief { border-color: var(--accent); }
.fc-thumb {
  flex: none; width: 52px; height: 52px; object-fit: cover;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
}
.fc-meta { flex: 1; min-width: 0; }
.fc-naam { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-detail { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fc-badge {
  flex: none; font-size: 13px; font-weight: 700; color: #fff;
  padding: 3px 10px; border-radius: 999px;
}
.fc-badge:empty { display: none; }
.fc-badge.kleiner { background: #22c55e; }
.fc-badge.groter { background: #f5b301; }
.fc-badge.fout { background: #ef4444; }
.fc-download { padding: 8px 14px; font-size: 13.5px; flex: none; }

.fc-totaal { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--text); text-align: center; font-variant-numeric: tabular-nums; }
.fc-totaal:empty { display: none; }

.fc-preview {
  margin-top: 18px; padding: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.fc-preview.hidden { display: none; }
.fc-preview img {
  max-width: 100%; max-height: 420px;
  border-radius: 8px; user-select: none; -webkit-user-select: none;
  touch-action: none; cursor: zoom-in;
}
.fc-preview-onder { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.fc-preview-naam { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.fc-preview-hint { font-size: 13px; color: var(--text-muted); }

@media (max-width: 560px) {
  .fc-item { flex-wrap: wrap; }
  .fc-meta { flex-basis: calc(100% - 66px); }
  .fc-download { margin-left: auto; }
}

/* ===================== QR CODE ===================== */
#qr-tekst { min-height: 96px; }

.qr-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 2px 0 18px; }
.qr-color { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.qr-color input[type="color"] {
  width: 40px; height: 30px; padding: 2px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); cursor: pointer;
}
.qr-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.qr-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.qr-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 240px; padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.qr-preview canvas {
  width: 100%; max-width: 280px; height: auto;
  border-radius: 6px;
  image-rendering: pixelated;
}
.qr-preview canvas.hidden { display: none; }
.qr-leeg { text-align: center; color: var(--text-muted); font-size: 15px; font-weight: 600; max-width: 420px; }
.qr-leeg.hidden { display: none; }

.qr-info { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.qr-info:empty { display: none; }
.qr-warn {
  margin-top: 12px; padding: 12px 16px;
  background: color-mix(in srgb, #f5b301 12%, var(--surface));
  border: 1px solid color-mix(in srgb, #f5b301 45%, var(--border));
  border-radius: var(--radius-md);
  font-size: 14px; color: var(--text); text-align: center;
}
.qr-warn.hidden { display: none; }

.tool-panel .btn-row .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===================== METRONOOM ===================== */
.tool-panel.metronoom { max-width: 620px; }

.mn-display {
  text-align: center;
  padding: 26px 20px 22px;
  margin-bottom: 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background .05s linear;
}
.mn-display.pulse.gewoon { animation: mn-flash .14s ease-out; }
.mn-display.pulse.accent { animation: mn-flash-accent .2s ease-out; }
@keyframes mn-flash { from { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); } to { background: var(--bg); } }
@keyframes mn-flash-accent { from { background: color-mix(in srgb, var(--accent) 22%, var(--bg)); } to { background: var(--bg); } }

.mn-readout { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.mn-bpm { font-size: 58px; font-weight: 800; color: var(--accent); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.mn-bpm-unit { font-size: 18px; font-weight: 700; color: var(--text-muted); }
.mn-tempo-naam { margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--text-muted); min-height: 20px; }

.mn-beats { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 18px; min-height: 20px; flex-wrap: wrap; }
.mn-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--border);
  transition: transform .07s ease, background .07s ease, box-shadow .07s ease;
}
.mn-dot.accent { width: 16px; height: 16px; border: 2px solid var(--text-soft); background: transparent; box-sizing: border-box; }
.mn-dot.on { background: var(--accent); border-color: var(--accent); transform: scale(1.45); box-shadow: 0 0 0 5px var(--accent-soft); }
.mn-dot.accent.on { background: var(--accent-dark); border-color: var(--accent-dark); }

.mn-controls { justify-content: center; margin-bottom: 24px; }
.mn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 150px; padding: 13px 26px; font-size: 16px;
}
.mn-play svg { width: 18px; height: 18px; flex: none; }
.mn-play .ic-stop { display: none; }
.mn-play.aan .ic-start { display: none; }
.mn-play.aan .ic-stop { display: inline-block; }
.mn-play.aan { background: var(--c-red); }
.mn-play.aan:hover { background: color-mix(in srgb, var(--c-red) 82%, #000); }
.mn-tap { padding: 13px 22px; font-size: 15px; }
.mn-tap.flits { animation: mn-tap-flits .25s ease-out; }
@keyframes mn-tap-flits { 0% { transform: scale(0.95); } 100% { transform: scale(1); } }

.mn-field .mn-lab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mn-field .mn-lab label { margin-bottom: 0; }
.mn-hint { font-size: 13px; color: var(--text-soft); font-weight: 600; }
.mn-val { font-size: 13.5px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.mn-field-last { margin-bottom: 8px; }

.mn-tempo-row { display: flex; align-items: center; gap: 10px; }
.mn-step {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: border-color .15s, color .15s, background .15s;
}
.mn-step:hover { border-color: var(--accent); color: var(--accent); }
.mn-step:active { background: var(--accent-soft); }
.mn-tempo-row input[type="number"]#mn-num {
  flex: none; width: 78px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 12px 8px;
}

.metronoom input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: var(--border); outline: none; cursor: pointer;
}
.mn-tempo-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.metronoom input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.metronoom input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.metronoom input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.mn-maat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.mn-maat-btn {
  padding: 11px 0; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.mn-maat-btn:hover { border-color: var(--accent); color: var(--accent); }
.mn-maat-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.mn-tip { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--text-soft); }

.mn-tempo-tabel { overflow-x: auto; margin: 14px 0 18px; }
.mn-tempo-tabel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mn-tempo-tabel th, .mn-tempo-tabel td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mn-tempo-tabel th { font-weight: 700; color: var(--text); background: var(--bg); }
.mn-tempo-tabel td { color: var(--text-muted); }
.mn-tempo-tabel td:first-child { font-weight: 600; color: var(--text); }
.mn-tempo-tabel tbody tr:last-child td { border-bottom: none; }

@media (max-width: 480px) {
  .mn-bpm { font-size: 48px; }
  .mn-step { width: 40px; height: 40px; }
  .mn-tempo-row input[type="number"]#mn-num { width: 64px; }
  .mn-maat { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .mn-maat-btn { padding: 10px 0; font-size: 14px; }
}

/* ===================== HARTSLAG METEN ===================== */
.tool-panel.hartslag { max-width: 620px; }

.hs-display {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 20px 22px;
  text-align: center;
  margin-bottom: 22px;
}
.hs-heart { width: 48px; height: 48px; margin: 0 auto 12px; color: var(--c-red); }
.hs-heart svg { width: 100%; height: 100%; display: block; }
.hs-heart.klop { animation: hs-klop .34s ease-out; }
@keyframes hs-klop { 0% { transform: scale(1); } 28% { transform: scale(1.26); } 100% { transform: scale(1); } }

.hs-readout { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.hs-bpm { font-size: 58px; font-weight: 800; color: var(--c-red); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hs-bpm-unit { font-size: 18px; font-weight: 700; color: var(--text-muted); }
.hs-status { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--text-muted); min-height: 21px; }

.hs-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.hs-tap {
  width: 100%;
  max-width: 340px;
  padding: 22px 20px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--c-red);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .15s, transform .06s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.hs-tap svg { width: 22px; height: 22px; flex: none; }
.hs-tap:hover { background: color-mix(in srgb, var(--c-red) 86%, #000); }
.hs-tap:active { transform: scale(0.98); }
.hs-tap.klop { animation: hs-tap-flits .2s ease-out; }
@keyframes hs-tap-flits { 0% { transform: scale(0.96); } 100% { transform: scale(1); } }
.hs-tap:focus-visible { outline: 2px solid var(--c-red); outline-offset: 3px; }

.hs-meta { font-size: 13.5px; color: var(--text-soft); text-align: center; min-height: 19px; font-variant-numeric: tabular-nums; }
.hs-controls .hs-reset { font-size: 14px; padding: 9px 18px; }

.hs-result { margin-top: 22px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: var(--radius-md); padding: 20px 22px; }
.hs-result.hidden { display: none; }
.hs-cat-row { font-size: 16px; color: var(--text); }
.hs-cat-row strong { font-weight: 800; }
.hs-cat { display: inline-block; margin-left: 6px; padding: 3px 12px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 700; vertical-align: middle; }
.hs-advies { margin: 10px 0 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }

.hs-zone-field { margin-top: 22px; }
.hs-zone-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.hs-zone-field input[type="number"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}
.hs-zone-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: none; }

.hs-zones { margin-top: 18px; }
.hs-zones.hidden { display: none; }
.hs-maxhr { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.hs-maxhr strong { color: var(--text); font-weight: 800; }
.hs-zone-title { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.hs-zone-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hs-zone-list li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.hs-zone-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.hs-zone-bpm { flex: 0 0 auto; min-width: 132px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.hs-zone-naam { color: var(--text-muted); font-size: 15px; }
.hs-zone-hint { font-size: 14px; color: var(--text-soft); margin: 4px 0 0; }
.hs-zone-note { font-size: 12.5px; font-style: italic; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; }
.hs-zone-title.hidden, .hs-zone-list.hidden, .hs-zone-hint.hidden { display: none; }

@media (max-width: 560px) {
  .hs-zone-list li { flex-wrap: wrap; }
  .hs-zone-bpm { min-width: 0; }
  .hs-zone-naam { flex-basis: 100%; padding-left: 23px; }
}
@media (max-width: 480px) {
  .hs-bpm { font-size: 48px; }
}

/* ===================== REACTIESNELHEID METEN ===================== */
.tool-panel.reactie { max-width: 620px; }

.rs-arena {
  border-radius: var(--radius-md);
  min-height: 280px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px 22px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  color: #fff;
  transition: background .1s ease;
}
.rs-arena:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.rs-big { font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rs-sub { margin-top: 10px; font-size: 15px; font-weight: 600; opacity: .92; }

.rs-arena.idle   { background: var(--accent); }
.rs-arena.wait   { background: #e0483f; }
.rs-arena.go     { background: #16a34a; }
.rs-arena.go .rs-big { font-size: 48px; letter-spacing: .01em; }
.rs-arena.early  { background: #b4342b; }
.rs-arena.result {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.rs-arena.result .rs-big { font-size: 52px; color: var(--accent); }
.rs-arena.result .rs-sub { color: var(--text-muted); opacity: 1; }

.rs-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.rs-stat { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 8px; text-align: center; }
.rs-stat-val { display: block; font-size: 21px; font-weight: 800; color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rs-stat-lab { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 5px; font-weight: 600; }

.rs-result { margin-top: 20px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: var(--radius-md); padding: 20px 22px; }
.rs-result.hidden { display: none; }
.rs-res-row { font-size: 16px; color: var(--text); }
.rs-res-row strong { font-weight: 800; }
.rs-res-cat { display: inline-block; margin-left: 6px; padding: 3px 12px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 700; vertical-align: middle; }
.rs-advies { margin: 10px 0 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }

.rs-age-field { margin-top: 22px; }
.rs-age-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.rs-age-field input[type="number"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
}
.rs-age-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); outline: none; }

.rs-age { margin-top: 16px; }
.rs-age.hidden { display: none; }
.rs-age-norm { font-size: 14.5px; color: var(--text-muted); line-height: 1.55; }
.rs-age-norm strong { color: var(--text); font-weight: 800; }
.rs-age-compare { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.rs-age-compare.hidden { display: none; }
.rs-age-note { font-size: 12.5px; font-style: italic; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; }

.rs-controls { display: flex; justify-content: center; margin-top: 22px; }
.rs-reset { font-size: 14px; padding: 9px 18px; }
.rs-tip { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: var(--text-soft); }

.rs-age-tabel { overflow-x: auto; margin: 14px 0 18px; }
.rs-age-tabel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rs-age-tabel th, .rs-age-tabel td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rs-age-tabel th { font-weight: 700; color: var(--text); background: var(--bg); }
.rs-age-tabel td { color: var(--text-muted); }
.rs-age-tabel td:first-child { font-weight: 600; color: var(--text); }
.rs-age-tabel tbody tr:last-child td { border-bottom: none; }

@media (max-width: 480px) {
  .rs-arena { min-height: 240px; }
  .rs-big { font-size: 26px; }
  .rs-arena.go .rs-big { font-size: 42px; }
  .rs-arena.result .rs-big { font-size: 44px; }
  .rs-stats { grid-template-columns: repeat(2, 1fr); }
  .rs-stat-val { font-size: 20px; }
}

/* ===================== TEKSTPUZZEL OPLOSSEN ===================== */
.field-row.tp-rij-solo { grid-template-columns: 1fr; }
.tp-options { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 0 0 16px; }
.tp-options.hidden { display: none; }
.tp-check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.tp-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

.field textarea.tp-in { min-height: 130px; }
.field textarea.tp-uit { min-height: 110px; }

.tp-voorbeeld {
  margin-top: 9px; padding: 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent);
}
.tp-voorbeeld:hover { text-decoration: underline; }
.tp-voorbeeld:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.tp-melding {
  margin: -4px 0 16px; padding: 11px 14px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c-orange) 12%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--c-orange) 34%, transparent);
  font-size: 13.5px; color: var(--text); line-height: 1.5;
}
.tp-melding.hidden { display: none; }

.tp-tegels-wrap { margin: 0 0 18px; }
.tp-tegels-wrap.hidden { display: none; }
.tp-tegels-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; color: var(--text); }
.tp-tegels {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.tp-tegel {
  padding: 8px 13px; border-radius: 999px; cursor: grab;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.4;
  max-width: 100%; overflow-wrap: anywhere; text-align: left;
  touch-action: none; transition: border-color .15s, color .15s, box-shadow .15s;
}
.tp-tegel:hover { border-color: var(--accent); color: var(--accent); }
.tp-tegel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-tegel.sleept { opacity: .45; cursor: grabbing; box-shadow: var(--shadow-hover); }
.tp-tegel-hint { font-size: 12.5px; color: var(--text-muted); margin: 9px 0 0; }
.tp-tegel-hint:empty { display: none; }

.tp-zeker {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; line-height: 1.55; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted);
}
.tp-zeker.hidden { display: none; }
.tp-zeker.hoog { border-color: color-mix(in srgb, var(--c-green) 34%, transparent); background: color-mix(in srgb, var(--c-green) 10%, var(--bg)); }
.tp-zeker.midden { border-color: color-mix(in srgb, var(--c-orange) 34%, transparent); background: color-mix(in srgb, var(--c-orange) 10%, var(--bg)); }
.tp-zeker.laag { border-color: color-mix(in srgb, var(--c-red) 30%, transparent); background: color-mix(in srgb, var(--c-red) 8%, var(--bg)); }

.tp-antwoord-wrap { margin: 18px 0 0; }
.tp-antwoord-wrap.hidden { display: none; }
.tp-antwoord-copy { margin-top: 10px; padding: 8px 14px; font-size: 13.5px; }

.tp-uitleg-wrap { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); }
.tp-uitleg-wrap.hidden { display: none; }
.tp-uitleg-kop { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tp-uitleg { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 13.5px; }
.tp-uitleg li { margin-bottom: 5px; line-height: 1.55; }
.tp-uitleg li:last-child { margin-bottom: 0; }

.btn.hidden { display: none; }

/* ====== GEDEELD DOOR DE STATISTIEK-TOOLS ====== */
.field-row.hidden { display: none; }
.field input.z-ongeldig, .field input.z-ongeldig:focus,
.field input.pc-ongeldig, .field input.pc-ongeldig:focus,
.field input.bi-ongeldig, .field input.bi-ongeldig:focus,
.field input.bin-ongeldig, .field input.bin-ongeldig:focus,
.field input.tt-ongeldig, .field input.tt-ongeldig:focus,
.field input.chi-ongeldig, .field input.chi-ongeldig:focus,
.field input.pw-ongeldig, .field input.pw-ongeldig:focus { border-color: #e5484d; box-shadow: none; }

/* Bijschrift onder een grafiek */
.z-noot, .pc-noot, .kw-noot, .iqr-noot, .bi-noot, .bin-noot, .tt-noot, .pw-noot, .cov-noot, .chi-noot, .an-noot { font-size: 12.5px; font-style: italic; color: var(--text-muted); margin: 0; text-align: center; }
.z-noot.hidden, .pc-noot.hidden, .kw-noot.hidden, .iqr-noot.hidden, .bi-noot.hidden, .bin-noot.hidden, .tt-noot.hidden, .pw-noot.hidden, .cov-noot.hidden, .chi-noot.hidden, .an-noot.hidden { display: none; }

/* Uitleg van de uitkomst in gewone taal */
.z-duiding, .pc-duiding, .kw-duiding, .iqr-duiding, .bi-duiding, .bin-duiding, .tt-duiding, .pw-duiding, .cov-duiding, .chi-duiding, .an-duiding {
  margin-top: 18px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 16px 18px;
  font-size: 15px; color: var(--text-muted); text-align: center;
}
.z-duiding.hidden, .pc-duiding.hidden, .kw-duiding.hidden, .iqr-duiding.hidden, .bi-duiding.hidden, .bin-duiding.hidden, .tt-duiding.hidden, .pw-duiding.hidden, .cov-duiding.hidden, .chi-duiding.hidden, .an-duiding.hidden { display: none; }

.z-tabel-wrap, .pc-tabel-wrap, .kw-tabel-wrap, .iqr-tabel-wrap, .bi-tabel-wrap, .bin-tabel-wrap, .tt-tabel-wrap, .pw-tabel-wrap, .cov-tabel-wrap, .chi-tabel-wrap, .an-tabel-wrap { margin-top: 22px; }
.z-tabel-wrap.hidden, .pc-tabel-wrap.hidden, .kw-tabel-wrap.hidden, .iqr-tabel-wrap.hidden, .bi-tabel-wrap.hidden, .bin-tabel-wrap.hidden, .tt-tabel-wrap.hidden, .pw-tabel-wrap.hidden, .cov-tabel-wrap.hidden, .chi-tabel-wrap.hidden, .an-tabel-wrap.hidden { display: none; }
.z-tabel-kop, .pc-tabel-kop, .kw-tabel-kop, .iqr-tabel-kop, .bi-tabel-kop, .bin-tabel-kop, .tt-tabel-kop, .pw-tabel-kop, .cov-tabel-kop, .chi-tabel-kop, .an-tabel-kop { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.z-tabel, .pc-tabel, .kw-tabel, .iqr-tabel, .bi-tabel, .bin-tabel, .tt-tabel, .pw-tabel, .cov-tabel, .chi-tabel, .an-tabel { font-variant-numeric: tabular-nums; }
/* Koppen mogen afbreken, anders past de tabel op een telefoon niet in beeld */
.z-tabel th, .pc-tabel th, .kw-tabel th, .iqr-tabel th, .bi-tabel th, .bin-tabel th, .tt-tabel th, .pw-tabel th, .cov-tabel th, .chi-tabel th, .an-tabel th { white-space: normal; }
.z-tabel td:first-child, .pc-tabel td:first-child, .kw-tabel td:first-child, .iqr-tabel td:first-child, .bi-tabel td:first-child, .bin-tabel td:first-child, .tt-tabel td:first-child, .cov-tabel td:first-child, .chi-tabel td:first-child, .an-tabel td:first-child { color: var(--text); font-weight: 600; }
.z-tabel tr.z-rij-actief td,
.pc-tabel tr.pc-rij-actief td,
.kw-tabel tr.kw-rij-actief td,
.iqr-tabel tr.iqr-rij-actief td,
.bi-tabel tr.bi-rij-actief td,
.bin-tabel tr.bin-rij-actief td,
.tt-tabel tr.tt-rij-actief td,
.cov-tabel tr.cov-rij-actief td,
.chi-tabel tr.chi-rij-actief td,
.an-tabel tr.an-rij-actief td,
.pw-tabel tr.pw-rij-actief td { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* Omhulsel voor de tekeningen in de statistiek-tools */
.pc-visual, .kw-visual, .iqr-visual, .bi-visual, .bin-visual, .tt-visual, .pw-visual, .cov-visual, .chi-visual, .an-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pc-visual.hidden, .kw-visual.hidden, .iqr-visual.hidden, .bi-visual.hidden, .bin-visual.hidden, .tt-visual.hidden, .pw-visual.hidden, .cov-visual.hidden, .chi-visual.hidden, .an-visual.hidden { display: none; }
.pc-visual svg, .kw-visual svg, .iqr-visual svg, .bi-visual svg, .bin-visual svg, .tt-visual svg, .pw-visual svg, .cov-visual svg, .chi-visual svg, .an-visual svg { width: 100%; max-width: 460px; height: auto; }
.pc-as, .kw-as, .iqr-as, .bin-as, .tt-as, .pw-as, .chi-as, .an-as { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.55; }
.pc-box, .kw-box, .iqr-box { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); stroke-width: 2; }
.pc-snor, .kw-snor, .iqr-snor { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.pc-med, .kw-med, .iqr-med { stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.pc-stip, .kw-stip, .iqr-stip { fill: var(--text-muted); opacity: 0.5; }
.pc-tick, .kw-tick, .iqr-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.kw-stip-uit, .iqr-stip-extreem { fill: var(--c-red); }
.kw-grens, .iqr-grens { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.7; }

/* ===================== Z-SCORE ===================== */
/* Klokvorm van de normale verdeling met het gebied tot de z-score gekleurd */
.z-visual { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.z-visual.hidden { display: none; }
.z-visual svg { width: 100%; max-width: 460px; height: auto; }
.z-as { stroke: var(--text-muted); stroke-width: 1.5; opacity: 0.55; }
.z-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.z-vlak { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.z-lijn { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.z-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.z-nul { fill: var(--text-soft); font-size: 11px; }
.z-label { fill: var(--text); font-size: 15px; font-weight: 700; }

/* ===================== PERCENTIELEN ===================== */
/* Lijn met het getal erboven op de gevraagde plek in de boxplot */
.pc-lijn { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.pc-label { fill: var(--text); font-size: 15px; font-weight: 700; }

/* ===================== KWARTIELEN ===================== */
/* Q1, mediaan en Q3 naast elkaar in het resultaatvak */
/* Op smalle schermen komen de drie onder elkaar; dan is wat meer lucht nodig */
.kw-drie { display: flex; justify-content: center; gap: 16px 10px; flex-wrap: wrap; }
.kw-item { flex: 1 1 130px; min-width: 0; }
.kw-num { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.kw-num.num-lang { font-size: 21px; line-height: 1.5; }
.kw-lbl { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.result-box .kw-drie + .sub { margin-top: 12px; }

/* De gesorteerde reeks, met de twee helften in kleur */
.kw-verdeling { margin-top: 22px; }
.kw-verdeling.hidden { display: none; }
.kw-verdeling-kop { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.kw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.kw-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.kw-chip.onder { background: color-mix(in srgb, var(--c-blue) 14%, transparent); border-color: color-mix(in srgb, var(--c-blue) 40%, transparent); color: var(--c-blue); }
.kw-chip.boven { background: color-mix(in srgb, var(--c-orange) 16%, transparent); border-color: color-mix(in srgb, var(--c-orange) 45%, transparent); color: var(--c-orange); }
.kw-chip.mid { background: color-mix(in srgb, var(--c-green) 14%, transparent); border-color: color-mix(in srgb, var(--c-green) 40%, transparent); color: var(--c-green); }
/* Telt de mediaan in beide helften mee, dan krijgt hij ook beide kleuren */
.kw-chip.beide {
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--c-blue) 16%, transparent) 50%,
    color-mix(in srgb, var(--c-orange) 18%, transparent) 50%);
  border-color: var(--border); color: var(--text);
}
.kw-chip.gebruikt { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.kw-verdeling .kw-noot { text-align: left; }

/* ===================== INTERKWARTIELAFSTAND ===================== */
/* Maatstreep boven de box: die meet precies de interkwartielafstand uit */
.iqr-maat { stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.iqr-maat-label { fill: var(--text); font-size: 15px; font-weight: 700; }
/* Grens van de 3-regel: fijner gestippeld dan die van de 1,5-regel */
.iqr-grens-extreem { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.7; }
.iqr-stip-mild { fill: var(--c-orange); }

/* De gevonden uitschieters, met milde en extreme in een eigen kleur */
.iqr-uit { margin-top: 22px; }
.iqr-uit.hidden { display: none; }
.iqr-uit-kop { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.iqr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.iqr-chips:empty { display: none; }
.iqr-chip {
  padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border); font-variant-numeric: tabular-nums;
}
.iqr-chip.mild { background: color-mix(in srgb, var(--c-orange) 16%, transparent); border-color: color-mix(in srgb, var(--c-orange) 45%, transparent); color: var(--c-orange); }
.iqr-chip.extreem { background: color-mix(in srgb, var(--c-red) 14%, transparent); border-color: color-mix(in srgb, var(--c-red) 45%, transparent); color: var(--c-red); }
.iqr-uit .iqr-noot { text-align: left; }

/* ===================== BETROUWBAARHEIDSINTERVAL ===================== */
/* Het interval als balk, met de schatting als stip in het midden */
.bi-band { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.bi-lijn { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.bi-cap { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.bi-punt { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.bi-label { fill: var(--text); font-size: 16px; font-weight: 700; }
.bi-grenslabel { fill: var(--text-muted); font-size: 13px; font-weight: 600; }
.bi-noot-svg { fill: var(--text-soft); font-size: 12px; }

/* ===================== BINOMIALE KANS ===================== */
/* Staafdiagram van de kansverdeling: de staven die bij de gevraagde kans horen
   krijgen de accentkleur, de rest blijft rustig op de achtergrond. */
.field-row.bin-rij-solo { grid-template-columns: 1fr; }
.bin-staaf { fill: color-mix(in srgb, var(--text-muted) 32%, transparent); }
.bin-staaf.aan { fill: var(--accent); }
.bin-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.bin-astitel { fill: var(--text-soft); font-size: 11px; }
/* Stippellijn op het verwachte aantal successen */
.bin-gem { stroke: var(--text); stroke-width: 2; stroke-dasharray: 5 4; opacity: 0.75; }
.bin-gem-label { fill: var(--text); font-size: 13px; font-weight: 700; }

/* ===================== T-TOETS ===================== */
/* Drie invoervelden naast elkaar (gemiddelde, spreiding, aantal). Met auto-fit
   zakken ze vanzelf onder elkaar zodra er geen 170px meer per veld over is. */
.field-row.tt-drie { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tt-groep.hidden { display: none; }
.tt-groepkop { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 9px; }

/* De conclusie: significant of niet. Bewust geen groen of rood, want geen van
   beide uitkomsten is "goed" of "fout". */
.tt-oordeel {
  margin-top: 18px; border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 15.5px; font-weight: 600; text-align: center; border: 1px solid;
}
.tt-oordeel.hidden { display: none; }
.tt-oordeel.wel { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.tt-oordeel.niet { background: var(--bg); border-color: var(--border); color: var(--text-muted); }

/* De kentallen die de tool zelf uit je losse metingen heeft berekend */
.tt-kentallen {
  margin-top: 14px; font-size: 13.5px; color: var(--text-muted); text-align: center;
  font-variant-numeric: tabular-nums;
}
.tt-kentallen.hidden { display: none; }

/* De t-verdeling met het verwerpingsgebied gearceerd */
.tt-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tt-vlak { fill: color-mix(in srgb, var(--c-red) 22%, transparent); }
.tt-krit { stroke: var(--c-red); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.8; }
.tt-lijn { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.tt-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.tt-nul { fill: var(--text-soft); font-size: 11px; }
.tt-label { fill: var(--text); font-size: 15px; font-weight: 700; }

/* ===================== P-WAARDE ===================== */
/* Bij de z-verdeling is er geen tweede veld voor vrijheidsgraden; de rij loopt
   dan over de volle breedte in plaats van halverwege te stoppen. */
.field-row.pw-rij-solo { grid-template-columns: 1fr; }

/* Dezelfde neutrale conclusie als bij de t-toets: geen groen of rood, want
   geen van beide uitkomsten is "goed" of "fout". */
.pw-oordeel {
  margin-top: 18px; border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 15.5px; font-weight: 600; text-align: center; border: 1px solid;
}
.pw-oordeel.hidden { display: none; }
.pw-oordeel.wel { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.pw-oordeel.niet { background: var(--bg); border-color: var(--border); color: var(--text-muted); }

/* De verdeling met de p-waarde als ingekleurde oppervlakte. Die oppervlakte is
   hier het antwoord zelf, dus krijgt die de accentkleur in plaats van rood. */
.pw-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pw-vlak { fill: color-mix(in srgb, var(--accent) 26%, transparent); }
.pw-krit { stroke: var(--c-red); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.8; }
.pw-lijn { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.pw-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.pw-nul { fill: var(--text-soft); font-size: 11px; }
.pw-label { fill: var(--text); font-size: 15px; font-weight: 700; }

/* ===================== COVARIANTIE ===================== */
/* Spreidingsdiagram waarin de twee gemiddelden het vlak in vier kwadranten
   verdelen. De vlakken en de punten zijn gekleurd naar het teken van hun
   bijdrage: rechtsboven en linksonder tellen positief mee, de andere twee
   negatief. De vlakken zijn bewust heel licht, zodat het raster en de punten
   erbovenop leesbaar blijven. */
.cov-vlak-plus { fill: color-mix(in srgb, var(--accent) 9%, transparent); }
.cov-vlak-min { fill: color-mix(in srgb, var(--c-orange) 12%, transparent); }
.cov-gemlijn { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.8; }
.cov-gemlabel {
  fill: var(--text-muted); font-size: 11.5px; font-weight: 600;
  paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.cov-punt-plus { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.cov-punt-min { fill: var(--c-orange); stroke: var(--surface); stroke-width: 1.5; }
.cov-punt-nul { fill: var(--text-muted); stroke: var(--surface); stroke-width: 1.5; }
.cov-tabel-wrap .cov-noot { text-align: left; margin-top: -4px; }

/* ===================== CHI-KWADRAATTOETS ===================== */
/* De invoertabel: een rooster van vakjes dat op een smal scherm horizontaal
   schuift in plaats van de pagina breder te maken. */
.chi-wrap { overflow-x: auto; padding: 3px; margin: 0 -3px; }
.chi-rooster { display: grid; gap: 8px; width: max-content; align-items: center; justify-items: center; }
.chi-rooster .num-item { padding: 2px 2px 2px 4px; }
.chi-rooster .num-item.chi-leeg { border: none; background: none; }
.field .chi-rooster .num-item input { width: 84px; }
.field .chi-rooster .num-item.chi-naam input { width: 104px; text-align: left; font-weight: 600; padding-left: 8px; }
.chi-hoek { min-height: 1px; }
.chi-kop-cel {
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  text-align: center; padding: 0 4px;
}
.chi-knoprij { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.chi-knoprij .num-add { padding: 9px 14px; font-size: 14px; }
.chi-max { align-self: center; font-size: 12.5px; color: var(--text-muted); }

/* De conclusie: significant of niet. Bewust geen groen of rood, want geen van
   beide uitkomsten is "goed" of "fout". */
.chi-oordeel {
  margin-top: 18px; border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 15.5px; font-weight: 600; text-align: center; border: 1px solid;
}
.chi-oordeel.hidden { display: none; }
.chi-oordeel.wel { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.chi-oordeel.niet { background: var(--bg); border-color: var(--border); color: var(--text-muted); }

/* Waarschuwing als een voorwaarde van de toets niet is gehaald. Geen fout: de
   uitkomst klopt wel, maar je moet er voorzichtiger mee omgaan. */
.chi-waarschuwing {
  margin-top: 14px; border-radius: var(--radius-md); padding: 12px 16px;
  font-size: 13.5px; text-align: center;
  background: color-mix(in srgb, var(--c-orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-orange) 40%, transparent);
  color: var(--text-muted);
}
.chi-waarschuwing.hidden { display: none; }

/* De chi-kwadraatverdeling met het verwerpingsgebied gearceerd */
.chi-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chi-vlak { fill: color-mix(in srgb, var(--c-red) 22%, transparent); }
.chi-krit { stroke: var(--c-red); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.8; }
.chi-lijn { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.chi-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.chi-nul { fill: var(--text-soft); font-size: 11px; }
.chi-label { fill: var(--text); font-size: 15px; font-weight: 700; }
.chi-tabel-wrap .chi-noot { text-align: left; margin-top: -4px; }

/* ===================== ANOVA ===================== */
/* Het invoerrooster: bij losse metingen is elke kolom een groep, bij kentallen
   is elke regel een groep. Op een smal scherm schuift het rooster horizontaal
   in plaats van de hele pagina breder te maken. */
.an-wrap { overflow-x: auto; padding: 3px; margin: 0 -3px; }
.an-rooster { display: grid; gap: 8px; width: max-content; align-items: center; justify-items: center; }
.an-rooster .num-item { padding: 2px 2px 2px 4px; }
.field .an-rooster .num-item input { width: 88px; }
.field .an-rooster .num-item.an-naam input { width: 108px; text-align: left; font-weight: 600; padding-left: 8px; }
.an-hoek { min-height: 1px; }
.an-kop-cel {
  font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  text-align: center; padding: 0 4px;
}
/* Kruisje om een hele rij metingen weg te halen; staat los naast het rooster */
.an-rij-del { padding: 6px 7px; }
.an-knoprij { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.an-knoprij .num-add { padding: 9px 14px; font-size: 14px; }
.an-max { align-self: center; font-size: 12.5px; color: var(--text-muted); }

/* De conclusie: significant of niet. Bewust geen groen of rood, want geen van
   beide uitkomsten is "goed" of "fout". */
.an-oordeel {
  margin-top: 18px; border-radius: var(--radius-md); padding: 14px 18px;
  font-size: 15.5px; font-weight: 600; text-align: center; border: 1px solid;
}
.an-oordeel.hidden { display: none; }
.an-oordeel.wel { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.an-oordeel.niet { background: var(--bg); border-color: var(--border); color: var(--text-muted); }

/* Waarschuwing als een voorwaarde van de toets krap zit. Geen fout: de uitkomst
   klopt wel, maar je moet er voorzichtiger mee omgaan. */
.an-waarschuwing {
  margin-top: 14px; border-radius: var(--radius-md); padding: 12px 16px;
  font-size: 13.5px; text-align: center;
  background: color-mix(in srgb, var(--c-orange) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-orange) 40%, transparent);
  color: var(--text-muted);
}
.an-waarschuwing.hidden { display: none; }

/* De F-verdeling met het verwerpingsgebied gearceerd */
.an-curve { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.an-vlak { fill: color-mix(in srgb, var(--c-red) 22%, transparent); }
.an-krit { stroke: var(--c-red); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.8; }
.an-lijn { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.an-tick { fill: var(--text-muted); font-size: 12px; font-weight: 500; }
.an-nul { fill: var(--text-soft); font-size: 11px; }
.an-label { fill: var(--text); font-size: 15px; font-weight: 700; }
.an-tabel-wrap .an-noot { text-align: left; margin-top: -4px; }
/* De totaalregel onder de groepen: dezelfde rol als een totaalregel in Excel */
.an-tabel tr.an-rij-totaal td { border-top: 2px solid var(--border); font-weight: 700; color: var(--text); }

/* ===================== RELATED TOOLS ===================== */
.related-section { margin-top: 40px; }
.related-section h2 { margin-top: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rel-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s, border-color .15s; }
.rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.rel-card .rel-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 4px; }
.rel-card .rel-icon svg { width: 20px; height: 20px; }
.rel-card h3 { font-size: 14.5px; font-weight: 700; margin: 0; color: var(--text); }
.rel-card p { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.5; flex: 1; }
.rel-arrow { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--accent); transition: gap .15s; }
.rel-card:hover .rel-arrow { gap: 7px; }
.rel-arrow svg { width: 14px; height: 14px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

@media (max-width: 768px) {
  .site-header .container { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; min-height: 68px; padding-top: 14px; padding-bottom: 14px; }
  .site-header .container .header-actions { justify-self: end; }
  .nav { display: none; flex-direction: column; gap: 0; grid-column: 1 / -1; width: 100%; padding-bottom: 8px; }
  .nav.open { display: flex; }
  .nav a { padding: 10px 0; border-top: 1px solid var(--border); font-size: 16px; }
  .menu-toggle { display: grid; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  .post-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 560px) {
  .bmi-bar .seg span { font-size: 9.5px; padding: 0 2px; }
  .popular-row .label { display: none; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .search-box { padding: 8px 8px 8px 14px; gap: 6px; }
  .search-box .btn { padding: 10px 14px; font-size: 14px; white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}