/* Kassatoets — gedeelde stijl voor de landingspagina en de juridische pagina's.
   Waarden komen uit de design-handoff (README + source/*.dc.html). */
:root {
  --bg: #f8f7f3;
  --white: #fff;
  --card: #fcfcfa;
  --ink: #1b2326;
  --ink-2: #3f4a4d;
  --muted: #4a5558;
  --muted-2: #5d676a;
  --bon-muted: #5a6467;
  --accent: #1d5c63;
  --accent-hover: #154a50;
  --accent-deep: #123f44;
  --accent-tint: #e6f0ef;
  --accent-light: #cfe3e1;
  --border: #dcdcd5;
  --border-band: #e6e5df;
  --dash: #d3d6d4;
  --dash-2: #c9cecd;
  --dash-3: #b9bfbf;
  --dot: #c9cdcd;
  --input-border: #9aa3a4;
  --grey-block: #f3f3ef;
  --row-mark: #f1f3f2;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --shadow-card: 0 24px 48px -28px rgba(27, 35, 38, 0.3);
  --shadow-bon: drop-shadow(0 18px 30px rgba(27, 35, 38, 0.1)) drop-shadow(0 2px 4px rgba(27, 35, 38, 0.08));
  --zigzag: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/14px 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/14px 51% repeat-x;
  --section-pad: clamp(40px, 6vw, 72px);
}

/* Basis */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-light); }
h1, h2, h3, h4, p, figure { margin: 0; }
[hidden] { display: none !important; }

/* Instelbare varianten (data-attributen op <html>) */
[data-kop="kort"] .kop-lang,
[data-kop="lang"] .kop-kort,
[data-blackfriday="aan"] .geen-bf,
[data-blackfriday="uit"] .bf,
[data-contact="formulier"] .contact-tally,
[data-contact="tally"] .contact-formulier { display: none !important; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 6px; z-index: 10; text-decoration: none; }
.skip:focus { top: 12px; color: #fff; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.band { background: var(--white); border-top: 1px solid var(--border-band); border-bottom: 1px solid var(--border-band); }
.section { padding-block: var(--section-pad); display: flex; flex-direction: column; gap: 28px; }
.mono { font-family: var(--mono); }
.uitgevuld { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* Header */
.site-header { max-width: 1120px; margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark { width: 26px; height: 32px; background: var(--accent); border-radius: 3px 3px 0 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mono); font-size: 15px; font-weight: 600; }
.logo-name { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: 20px; align-items: center; font-size: 15px; }
.site-nav a, .terug { color: var(--ink); text-decoration: none; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.terug { font-size: 15px; text-decoration: underline; }

/* Typografie */
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
.kop { display: flex; flex-direction: column; gap: 12px; max-width: 40em; }

/* Knoppen */
.btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0 24px; border: 2px solid var(--accent); border-radius: 8px; font: inherit; font-weight: 600; font-size: 17px; text-decoration: none; cursor: pointer; width: 100%; }
.btn-primair { background: var(--accent); color: #fff; }
.btn-primair:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-secundair { background: transparent; color: var(--accent); }
.btn-secundair:hover { background: var(--accent-tint); color: var(--accent-hover); }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* 1. Hero */
.hero { max-width: 1120px; margin: 0 auto; padding: clamp(24px, 6vw, 72px) 20px clamp(48px, 7vw, 88px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero-tekst { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero-eyebrow { font-family: var(--mono); font-size: clamp(11px, 3.1vw, 13px); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: var(--accent); }
.h1-kort { font-size: clamp(40px, 7.4vw, 72px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.h1-lang { font-size: clamp(32px, 5.2vw, 52px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
.hero-sub { font-size: clamp(18px, 2.2vw, 20px); line-height: 1.55; color: var(--ink-2); }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.hero-knoppen .btn { flex: 1 1 260px; width: auto; }
.hero-noot { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--muted); }
.hero-noot .pijl { font-family: var(--mono); color: var(--accent); }

/* Kassabon */
.bon-plek { display: flex; justify-content: center; min-width: 0; }
.bon-schaduw { filter: var(--shadow-bon); width: 100%; }
.bon-hero { max-width: 360px; transform: rotate(-1.2deg); }
.bon-pilot { max-width: 400px; transform: rotate(1deg); }
.bon { background: #fff; font-family: var(--mono); line-height: 1.5; color: var(--ink); -webkit-mask: var(--zigzag); mask: var(--zigzag); }
.bon-hero .bon { padding: 34px 26px 38px; font-size: 13px; }
.bon-pilot .bon { padding: 32px 26px 36px; font-size: 14px; }
.bon-kop { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.bon-naam { font-weight: 600; letter-spacing: 0.18em; }
.bon-hero .bon-naam { font-size: 14px; }
.bon-grijs { color: var(--bon-muted); }
.bon-streep { border-top: 1.5px dashed var(--dash-3); }
.bon-regels { display: flex; flex-direction: column; gap: 10px; }
.bon-regel { display: flex; align-items: center; gap: 10px; }
.bon-regel .ico { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 600; }
.bon-regel .stip { flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--dot); transform: translateY(-4px); }
.bon-regel .status { color: var(--bon-muted); }
.bon-regel.let-op { background: var(--row-mark); margin: 0 -8px; padding: 4px 8px; border-radius: 3px; font-weight: 600; }
.bon-regel.let-op .ico { background: var(--ink); color: #fff; border-radius: 50%; font-size: 12px; }
.bon-regel.let-op .stip { border-bottom-color: var(--dash-3); }
.bon-regel.let-op .status { color: var(--ink); }
.bon-totaal { display: flex; flex-direction: column; gap: 4px; }
.bon-totaal div { display: flex; justify-content: space-between; }
.bon-totaal .vet { font-weight: 600; }
.bon-voet { text-align: center; color: var(--bon-muted); font-size: 12px; line-height: 1.6; }
.bon-prijzen { display: flex; flex-direction: column; gap: 8px; }
.bon-prijs { display: flex; align-items: baseline; gap: 10px; }
.bon-prijs .stip { flex: 1; min-width: 12px; border-bottom: 1.5px dotted var(--dot); }
.bon-prijs.vet { font-weight: 600; }
.bon-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.bon-lijst li { display: flex; gap: 10px; }
.bon-lijst .ico { color: var(--accent); font-weight: 600; }
.bon-slot { text-align: center; color: var(--bon-muted); font-size: 12px; letter-spacing: 0.04em; }

/* 2. Waarom nu */
.feiten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.feit { border: 1px solid var(--border); border-radius: 10px; padding: 28px 24px 22px; display: flex; flex-direction: column; gap: 14px; background: var(--card); }
.feit-getal { font-family: var(--mono); font-size: clamp(34px, 5vw, 42px); font-weight: 500; letter-spacing: -0.03em; color: var(--accent); line-height: 1; }
.feit-tekst { font-size: 18px; line-height: 1.5; flex: 1; }
.feit-bron { padding-top: 12px; border-top: 1.5px dashed var(--dash); font-family: var(--mono); font-size: 12px; color: var(--muted-2); }

/* 3. Hoe het werkt */
.stappen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 32px; }
.stap { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 2px solid var(--accent); }
.stap-nr { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); }
.stap p { font-size: 19px; line-height: 1.5; }

/* 4. Voorbeeldrapport */
.rapport { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-card); }
.rapport-balk { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border-band); font-family: var(--mono); font-size: 13px; color: var(--muted); }
.rapport-titel { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.mini-logo { width: 18px; height: 22px; background: var(--accent); border-radius: 2px 2px 0 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; }
.rapport-body { padding: clamp(20px, 4vw, 36px); display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bevinding-kop { display: flex; flex-direction: column; gap: 12px; }
.bevinding-nr { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.bevinding-titel { font-size: clamp(22px, 3vw, 28px); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; text-wrap: balance; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.shot-kader { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shot-label { display: flex; align-items: center; gap: 10px; }
.stapcirkel { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.shot-label span:last-child { font-size: 14px; color: var(--ink-2); }
.uitleg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px 28px; padding-top: 20px; border-top: 1.5px dashed var(--dash); }
.uitleg div { display: flex; flex-direction: column; gap: 6px; }
.uitleg h4 { font-size: 15px; font-weight: 700; }
.uitleg p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.eerlijk { background: var(--grey-block); border-radius: 12px; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 12px clamp(24px, 5vw, 64px); align-items: baseline; }
.eerlijk h3 { flex: 0 1 260px; font-size: 18px; font-weight: 700; }
.eerlijk p { flex: 1 1 420px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* Nagebouwde productpagina (schaalt via container query units) */
.shop { aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; }
.shop-balk { height: 8cqw; flex: none; display: flex; align-items: center; gap: 1.4cqw; padding: 0 3cqw; background: #f1f1ed; border-bottom: 1px solid #e3e3dc; }
.shop-balk .bol { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--dot); }
.shop-url { flex: 1; margin-left: 2cqw; height: 4.6cqw; border-radius: 1cqw; background: #fff; display: flex; align-items: center; padding: 0 2cqw; font-family: var(--mono); font-size: 2.6cqw; color: var(--muted-2); white-space: nowrap; overflow: hidden; }
.shop-naam { padding: 2.4cqw 4cqw; border-bottom: 1px solid #eeeee9; font-size: 3cqw; font-weight: 700; letter-spacing: 0.14em; }
.shop-inhoud { flex: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 4cqw; padding: 4cqw; min-height: 0; }
.shop-foto { position: relative; height: 100%; border-radius: 1.5cqw; background: linear-gradient(180deg, #e9ede7, #dee5dd); overflow: hidden; }
.shop-info { display: flex; flex-direction: column; gap: 1.8cqw; min-width: 0; }
.shop-titel { font-size: 4.4cqw; font-weight: 600; line-height: 1.1; }
.shop-prijs { font-size: 3.4cqw; display: flex; flex-wrap: wrap; gap: 0 1.6cqw; align-items: baseline; }
.shop-prijs s { color: var(--muted-2); white-space: nowrap; }
.shop-prijs strong { white-space: nowrap; }
.shop-timer { margin-top: auto; border: 2px dashed var(--accent); border-radius: 1.8cqw; padding: 1.4cqw; display: flex; flex-direction: column; gap: 0.6cqw; background: #f4f8f7; }
.shop-timer span:first-child { font-size: 2.6cqw; color: var(--ink-2); }
.shop-timer span:last-child { font-family: var(--mono); font-size: 6.2cqw; font-weight: 600; line-height: 1; }
.shop-knop { height: 7cqw; border-radius: 1.5cqw; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 3cqw; font-weight: 600; }

/* Monstera in terracotta pot (CSS-vormen) */
.plant { position: absolute; left: 50%; top: 50%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.plant span { position: absolute; }
.plant .schaduw { left: 26%; right: 26%; bottom: 10%; height: 5%; border-radius: 50%; background: rgba(27, 35, 38, 0.16); filter: blur(1cqw); }
.plant .steel { left: 49.4%; width: 1.2%; bottom: 44%; height: var(--h); background: #4a6e50; border-radius: 1cqw; transform: rotate(var(--r)); transform-origin: bottom center; }
.plant .pot { left: 30%; width: 40%; top: 54%; height: 34%; clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%); background: linear-gradient(90deg, #b0654a, #cf8862 45%, #b0654a); }
.plant .rand { left: 28%; width: 44%; top: 51%; height: 8%; border-radius: 1cqw; background: #c17553; }
.plant .blad { left: var(--l); top: var(--t); width: var(--w); height: var(--hh); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--c); transform: rotate(var(--r)); overflow: hidden; }
.plant .nerf { left: 48%; width: 4%; top: 10%; bottom: 8%; background: rgba(232, 240, 228, 0.45); border-radius: 1cqw; }
.plant .gat-l { left: 0; width: 30%; top: 38%; height: 7%; background: #e4e9e2; transform: rotate(-20deg); }
.plant .gat-r { right: 0; width: 30%; top: 56%; height: 7%; background: #e4e9e2; transform: rotate(20deg); }

/* 5. Bureaus */
.bureau-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.bureau-kop > div { flex: 2 1 520px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; min-width: 0; }
.bureau-kop .btn { flex: 1 1 280px; width: auto; max-width: 100%; }
.bureau-section { gap: 32px; }
.kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.kaart { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.kaart-label { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); }
.kaart h3 { font-size: 20px; font-weight: 600; }
.kaart p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* 6. Pilot */
.pilot { padding-block: var(--section-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 6vw, 80px); align-items: center; }
.pilot-tekst { display: flex; flex-direction: column; gap: 20px; max-width: 30em; min-width: 0; }
.pilot-lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.pilot-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding-top: 20px; border-top: 1.5px dashed var(--dash-2); }
.i-cirkel { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 14px; font-weight: 600; }
.pilot-info p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pilot-info strong { color: var(--ink); }

/* 7. FAQ */
.faq { padding-block: var(--section-pad); display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 6vw, 80px); align-items: flex-start; }
.faq-kop { flex: 1 1 260px; display: flex; flex-direction: column; gap: 16px; }
.faq-lead { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.faq-lijst { flex: 2 1 480px; min-width: 0; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item h3 { margin: 0; }
.faq-vraag { width: 100%; min-height: 64px; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: none; border: 0; text-align: left; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); cursor: pointer; }
.faq-vraag:hover { color: var(--accent); }
.faq-vraag > span:first-child { flex: 1; }
.faq-icoon { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid #c3c9c8; border-radius: 50%; font-family: var(--mono); font-size: 16px; color: var(--accent); }
.faq-antwoord { padding: 0 48px 24px 0; max-width: 46em; font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.faq-antwoord[hidden] { display: none; }

/* 8. Contact */
.contact { padding-block: var(--section-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.contact-intro { display: flex; flex-direction: column; gap: 12px; max-width: 28em; }
.contact-intro > p:last-child { font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.contact-band { border-bottom: 0; }
.tally { min-height: 420px; border: 1.5px dashed var(--dash-3); border-radius: 10px; background: repeating-linear-gradient(135deg, #f6f6f2 0 8px, #fcfcfa 8px 16px); display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.formulier { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld label, .keuze legend { font-size: 15px; font-weight: 600; }
.optioneel { font-weight: 400; color: var(--muted-2); }
.invoer { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--input-border); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; color: var(--ink); width: 100%; }
textarea.invoer { padding: 12px 14px; resize: vertical; }
.invoer:focus { border-color: var(--accent); }
.keuze { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.keuze legend { padding: 0; margin-bottom: 8px; }
.tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tegel { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1.5px solid var(--input-border); border-radius: 8px; font-size: 16px; cursor: pointer; }
.tegel input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); }
.verstuur { display: flex; flex-direction: column; gap: 10px; }
.verstuur .btn { border: 0; }
.verstuur p, .noscript { font-size: 15px; color: var(--muted); }
.pot-veld { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.fout { border: 1.5px solid #b3261e; border-radius: 8px; padding: 14px 16px; font-size: 15px; line-height: 1.55; color: var(--ink); background: #fdf3f2; }
.ontvangen { border: 1px solid var(--border); border-radius: 10px; padding: 32px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.ontvangen:focus { outline: none; }
.ontvangen:focus-visible { outline: 3px solid var(--accent); }
.ontvangen-label { font-family: var(--mono); font-size: 14px; color: var(--accent); font-weight: 600; }
.ontvangen p { font-size: 18px; line-height: 1.5; }
.ontvangen .btn { min-height: 44px; padding: 0 16px; margin-top: 8px; border-width: 1.5px; }

/* Footer */
.site-footer { border-top: 1px solid var(--border-band); }
.footer-binnen { max-width: 1120px; margin: 0 auto; padding: 40px 20px 48px; display: flex; flex-direction: column; gap: 24px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.footer-rij { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.footer-gegevens { display: flex; flex-direction: column; gap: 2px; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.footer-slot { padding-top: 20px; border-top: 1.5px dashed var(--dash); font-family: var(--mono); font-size: 13px; }
.footer-compact { max-width: 1120px; margin: 0 auto; padding: 32px 20px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* Juridische pagina's */
.juridisch { max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 20px clamp(48px, 7vw, 88px); display: flex; flex-direction: column; gap: 36px; }
.juridisch-kop { display: flex; flex-direction: column; gap: 12px; padding-bottom: 28px; border-bottom: 1.5px dashed var(--dash-2); }
.juridisch-kop h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.versie { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.samenvatting { margin-top: 8px !important; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.artikel { display: flex; flex-direction: column; gap: 12px; }
.artikel h2 { display: flex; gap: 14px; align-items: baseline; font-size: 22px; font-weight: 700; }
.artikel h2 .nr { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.artikel > p { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.artikel ul, .artikel ol { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.artikel ul { padding: 0 0 0 20px; }
.artikel ol { padding: 0 0 0 22px; }
.artikel ul.krap { gap: 8px; }
.artikel li strong { color: var(--ink); }
.deflijst { display: flex; flex-direction: column; border-top: 1px solid var(--border); margin: 0; }
.deflijst > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.deflijst dt { font-weight: 600; font-size: 16px; }
.deflijst dd { margin: 0; grid-column: span 2; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 480px) { .deflijst dd { grid-column: auto; } }