/* ============================================================
   Redder Perspectief — shared stylesheet
   Design system lifted from reddermanagement.nl / Redder Perspectief v3.
   Display: Syne · Text/UI: DM Sans · Numeric/labels: DM Mono
   ============================================================ */

:root{
  /* --- Base palette (canon) --- */
  --rm-teal:#1a9ba1;
  --rm-teal-light:#7fd4d8;
  --rm-teal-deep:#0d3d40;
  --rm-mint:#e1f5ee;
  --rm-amber-bright:#e5a400;
  --rm-amber-soft:#fbe8c4;
  --rm-slate:#3d5a6b;
  --rm-slate-light:#8ba0ad;
  --rm-off-white:#f7f5f0;
  --rm-border-warm:#e2e0da;
  --rm-ink:#1a1a1a;
  --rm-white:#ffffff;
  --rm-ground-deep:#061a1c;   /* darkest field behind the canvas */

  /* Fonts */
  --font-display:'Syne','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-sans:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'DM Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  /* One size for the vergelijkingsregel in a kerncijfer-tegel and all verkenner-grafiektekst. */
  --grafiek-tekst:.82rem;

  /* Radius */
  --radius-md:10px;
  --radius-lg:12px;
  --radius-xl:16px;
  --radius-2xl:22px;
  --radius-pill:999px;

  /* Elevation */
  --shadow-card:0 1px 2px rgba(4,26,28,.18),0 18px 40px rgba(4,26,28,.35);
  --shadow-lg:0 22px 60px rgba(4,26,28,.55);

  /* Motion */
  --ease-standard:cubic-bezier(.2,.6,.2,1);

  /* Layout */
  --container:1180px;
  --gutter:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
/* Reserve the scrollbar gutter on every page, so a page that happens to scroll
   (persoonlijk) lines up with the ones that don't. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--rm-off-white);
  background:radial-gradient(120% 90% at 50% 0%,#0e4448 0%,var(--rm-ground-deep) 70%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(127,212,216,.35)}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0;
}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none;transition:color .12s var(--ease-standard)}

.eyebrow{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--rm-teal-light);
  font-family:var(--font-sans);
}

/* ---- Shell ------------------------------------------------ */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

.topbar{
  max-width:var(--container);
  margin:0 auto;
  padding:clamp(.5rem,1vw,.75rem) var(--gutter) 0;
  display:flex;align-items:center;justify-content:space-between;gap:.25rem 1rem;
  flex-wrap:wrap;
}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.brand__mark{width:32px;height:32px;flex:none}
/* Woordmerk as in rp-lockup-donker: ReddeR white, Perspectief licht-teal */
.brand__word{font-family:var(--font-display);font-weight:800;font-size:17px;line-height:1;letter-spacing:-.01em;color:var(--rm-white);white-space:nowrap}
.brand__sub{font-weight:700;color:var(--rm-teal-light)}

/* Main navigation — always visible, no hamburger. On narrow screens the topbar
   wraps to two rows (brand, then nav); the nav itself never wraps. The active
   item gets the amber underline (amber is reserved for this + the home line). */
.mainnav{display:flex;flex-wrap:nowrap;gap:2px;margin-inline:-10px}
.mainnav a{
  position:relative;display:inline-flex;align-items:center;
  min-height:44px;padding:0 10px;white-space:nowrap;
  font-size:14px;font-weight:600;color:rgba(247,245,240,.78);
  border-radius:var(--radius-md);
}
.mainnav a:hover{color:var(--rm-off-white);background:rgba(127,212,216,.10)}
.mainnav a[aria-current="page"]{color:var(--rm-off-white)}
.mainnav a[aria-current="page"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;height:3px;
  border-radius:2px;background:var(--rm-amber-bright);
}
@media (max-width:420px){.mainnav a{font-size:13px;padding:0 8px}
  .mainnav a[aria-current="page"]::after{left:8px;right:8px}}

/* "Mijn aankopen" (cyclus C1, fase 5): at the right of the topbar, apart from the
   perspectives. Where the topbar wraps it stays on the brand's row, the nav goes below. */
.topbar__mijn{
  display:inline-flex;align-items:center;min-height:44px;padding:0 12px;white-space:nowrap;
  font-size:14px;font-weight:600;color:var(--rm-teal-light);
  border:1px solid rgba(127,212,216,.35);border-radius:var(--radius-pill);
}
.topbar__mijn:hover{color:var(--rm-off-white);background:rgba(127,212,216,.10)}
.topbar__mijn[aria-current="page"]{color:var(--rm-off-white);border-color:var(--rm-amber-bright)}
@media (max-width:760px){.topbar__mijn{order:1}.mainnav{order:2}}
@media (max-width:420px){.topbar__mijn{font-size:13px;padding:0 10px}}

/* Visible keyboard focus everywhere */
:focus-visible{outline:2px solid var(--rm-teal-light);outline-offset:3px;border-radius:4px}

/* ---- Medaillon (RP-merkteken, brandbook 22-10-2026) -------
   Inline SVG from rp-medaillon.svg, without the tagline (it drops out below 120px).
   The amber punt — the question — pulses. */
.badge{position:relative;display:block;border-radius:50%;margin:0 auto}
.badge svg{display:block;width:100%;height:100%}
.badge__vraag{transform-box:fill-box;transform-origin:center;animation:rp-pulse 3.4s ease-in-out infinite}

@keyframes rp-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.75}}

/* ---- Home: drie boogdeuren --------------------------------
   One message, a ~96px badge, and three arched doors. An amber line runs from
   the badge down to the top of each arch; hovering (or focusing) a door lights
   the line to that door. Every door shows its icon, perspective and question at
   all times; there is no hover-only content. Below 640px the doors stack and the
   line runs vertically through the gaps between them. */
.home{
  position:relative;overflow:hidden;padding-bottom:clamp(.5rem,1.5vw,1rem);
  --line:3px;
  --line-dim:rgba(229,164,0,.6);
  --stem:clamp(14px,2.5vh,24px);       /* badge -> horizontal bar */
  --drop:clamp(18px,3vh,30px);         /* horizontal bar -> arch tops */
  --door-gap:clamp(1rem,2.5vw,2rem);
}
.home__curve{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}
.home__inner{position:relative;z-index:1}

.home__intro{text-align:center;padding-top:clamp(.75rem,2.5vh,1.75rem)}
.home__title{
  font-size:clamp(1.45rem,3.6vw,2.4rem);font-weight:700;color:var(--rm-off-white);
  margin:0 auto;text-wrap:balance;
}
.home__sub{font-size:.95rem;color:rgba(127,212,216,.85);margin-top:.35rem}

.badge--sm{
  width:96px;height:96px;max-width:none;max-height:none;
  margin-top:clamp(.75rem,2.5vh,1.5rem);
  box-shadow:0 12px 32px rgba(4,26,28,.5);
}
a.badge--sm{text-decoration:none}
/* The stem: badge down to the bar the doors hang from */
.badge--sm::after{
  content:"";position:absolute;top:100%;left:50%;width:var(--line);height:var(--stem);
  margin-left:calc(var(--line) / -2);background:var(--line-dim);
  transition:background-color .2s var(--ease-standard);
}
.home__inner:has(.door:hover,.door:focus-visible) .badge--sm::after{background:var(--rm-amber-bright)}

.doors{
  list-style:none;margin:calc(var(--stem) + var(--drop)) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--door-gap);
  max-width:960px;margin-inline:auto;
}
.doors > li{display:flex;flex-direction:column}

/* Snelkoppelingen: the available products of this door, straight under it, so a
   visitor (also on a phone, where the doors stack) clicks through in one step. */
.snel{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;align-self:center;align-items:flex-start;gap:.3rem}
.snel__link{
  display:inline-flex;align-items:center;gap:.45rem;min-height:32px;padding:.2rem .5rem;
  font-size:.92rem;font-weight:500;color:rgba(247,245,240,.85);border-radius:var(--radius-md);
  transition:color .2s var(--ease-standard);
}
.snel__link:hover,.snel__link:focus-visible{color:var(--rm-off-white)}
.snel__link:hover .snel__ico,.snel__link:focus-visible .snel__ico{background:var(--rm-amber-bright);color:var(--rm-ink)}
.snel__ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;color:var(--rm-amber-bright);border:1px solid rgba(229,164,0,.55);
  transition:background-color .2s var(--ease-standard),color .2s var(--ease-standard);
}
.snel__ico svg{width:14px;height:14px}

.door{
  position:relative;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;gap:.6rem;
  padding:clamp(1.25rem,4vh,2.25rem) 1rem clamp(1.25rem,3vh,1.75rem);
  min-height:44px;
  border-radius:999px 999px var(--radius-xl) var(--radius-xl);
  background:rgba(15,65,69,.6);
  border:1px solid rgba(127,212,216,.22);
  box-shadow:var(--shadow-card);
  transition:border-color .2s var(--ease-standard),background-color .2s var(--ease-standard);
}
.door:focus-visible{border-radius:999px 999px var(--radius-xl) var(--radius-xl);outline-offset:4px}

/* The line to this door: an elbow from the centre bar down to the arch top
   (door 1 and 3), or a straight drop (door 2, which continues the stem). */
.door__line{
  position:absolute;bottom:100%;left:50%;height:var(--drop);width:0;
  margin-left:calc(var(--line) / -2);
  border:0 solid var(--line-dim);border-left-width:var(--line);
  pointer-events:none;
  transition:border-color .2s var(--ease-standard);
}
.doors > li:nth-child(1) .door__line{
  width:calc(100% + var(--door-gap));border-top-width:var(--line);border-top-left-radius:14px;
  height:calc(var(--drop) + 1px);
}
.doors > li:nth-child(3) .door__line{
  left:auto;right:50%;margin-left:0;margin-right:calc(var(--line) / -2);
  width:calc(100% + var(--door-gap));border-left-width:0;border-right-width:var(--line);
  border-top-width:var(--line);border-top-right-radius:14px;height:calc(var(--drop) + 1px);
}
.door:hover .door__line,.door:focus-visible .door__line{border-color:var(--rm-amber-bright)}
@media (hover:hover){
  .door:hover{border-color:rgba(127,212,216,.5);background:rgba(15,65,69,.8)}
}
.door:focus-visible{border-color:rgba(127,212,216,.5);background:rgba(15,65,69,.8)}
/* Keep the lit elbow above its neighbours where they overlap at the centre */
.doors > li:has(.door:hover,.door:focus-visible){z-index:1;position:relative}

.door__icon{
  width:clamp(64px,11vh,96px);height:clamp(64px,11vh,96px);flex:none;border-radius:50%;
  background:var(--rm-off-white);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px rgba(4,26,28,.35);
}
.door__icon svg{width:68%;height:68%}
.door__text{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.door__name{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.15;color:var(--rm-off-white);letter-spacing:-.01em;
}
/* Perspectiefbolletje: the colour of its dot in the merkteken */
.door__name::before{
  content:"";display:inline-block;width:12px;height:12px;margin-right:.5rem;vertical-align:middle;
  border:2px solid var(--rm-off-white);border-radius:50%;background:var(--perspectief);
}
.doors > li:nth-child(1){--perspectief:var(--rm-teal-deep)}
.doors > li:nth-child(2){--perspectief:var(--rm-teal)}
.doors > li:nth-child(3){--perspectief:var(--rm-teal-light)}
.door__q{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.25;color:var(--rm-teal-light)}

/* Portrait tablets: same three-up layout, but taller doors so the page uses
   the screen instead of looking like a squeezed desktop */
@media (min-width:641px) and (orientation:portrait){
  .home{--stem:28px;--drop:36px}
  .door{min-height:min(36vh,400px);padding-top:clamp(2.5rem,7vh,4.5rem)}
  .door__icon{width:104px;height:104px}
}

@media (max-width:640px){
  .home{--stem:14px;--drop:0px;--door-gap:22px}
  .doors{grid-template-columns:1fr;max-width:420px;margin-top:var(--stem)}
  .door{
    flex-direction:row;justify-content:flex-start;text-align:left;gap:1rem;
    padding:1.35rem 1.25rem .9rem;
    border-radius:50% 50% var(--radius-lg) var(--radius-lg) / 26px 26px var(--radius-lg) var(--radius-lg);
  }
  .door:focus-visible{border-radius:50% 50% var(--radius-lg) var(--radius-lg) / 26px 26px var(--radius-lg) var(--radius-lg)}
  .door__icon{width:60px;height:60px}
  .door__text{align-items:flex-start}
  /* Vertical line: straight drops through the gaps between the stacked doors */
  .door__line,
  .doors > li:nth-child(1) .door__line,
  .doors > li:nth-child(3) .door__line{
    left:50%;right:auto;width:0;height:var(--door-gap);
    margin-left:calc(var(--line) / -2);margin-right:0;
    border-width:0;border-left-width:var(--line);border-radius:0;
  }
  .doors > li:nth-child(1) .door__line{height:0}  /* the badge stem already reaches door 1 */
}

/* ---- Perspectief-pagina: compacte kop + thema-tegels ------
   A ~72px medallion beside the title, the question and one line of lead, so
   the first row of tiles sits above the fold on a 1366x768 laptop. */
.phero{
  display:grid;grid-template-columns:auto 1fr;gap:.25rem clamp(1rem,2.5vw,1.5rem);
  align-items:center;padding:clamp(1rem,2.5vh,1.75rem) 0 0;
}
.medallion--sm{
  width:72px;height:72px;border-radius:50%;flex:none;
  background:var(--rm-off-white);box-shadow:0 10px 24px rgba(4,26,28,.35);
  display:flex;align-items:center;justify-content:center;
}
.medallion--sm svg{width:70%;height:70%}
.phero__title{font-size:clamp(1.9rem,4vw,2.4rem);color:var(--rm-off-white);margin:.15rem 0 0}
.phero__q{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.25rem);color:var(--rm-teal-light);
  margin-top:.2rem;letter-spacing:-.01em;
}
.phero__lead{margin-top:.35rem;font-size:1rem;line-height:1.5;color:rgba(247,245,240,.8)}
@media (max-width:640px){.phero{grid-template-columns:1fr;text-align:center;justify-items:center}}

.section-label{
  display:flex;align-items:center;gap:12px;
  margin:clamp(1rem,2.5vh,1.5rem) 0 .9rem;
}
.section-label::after{content:"";flex:1;height:1px;background:rgba(127,212,216,.18)}

/* Fluid grid, no fixed maximum of themes. Active and coming-soon differ in
   shape and label, not only colour: active = calm teal fill + "Bekijk cijfers",
   the whole tile one link (hover-lift, focus ring); coming-soon = dashed
   outline, no fill, a "Binnenkort" tag, not a link and no hover. */
.tegels{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:clamp(.875rem,2vw,1.25rem);
}
.tegel{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  border-radius:var(--radius-lg);padding:1.25rem 1.35rem 1.1rem;
}
.tegel--actief{
  background:rgba(26,155,161,.18);border:1px solid rgba(127,212,216,.38);
  box-shadow:var(--shadow-card);
  transition:transform .24s var(--ease-standard),border-color .24s var(--ease-standard),background-color .24s var(--ease-standard);
}
.tegel--actief:hover{transform:translateY(-4px);border-color:rgba(127,212,216,.6);background-color:rgba(26,155,161,.24)}
.tegel--actief:has(.tegel__link:focus-visible){outline:2px solid var(--rm-teal-light);outline-offset:4px}
/* "Bekijk cijfers" is stretched over the whole tile; the shortcuts sit above it */
.tegel__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tegel__link:focus-visible{outline:none}
.tegel__voet{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .75rem;
  width:100%;margin-top:auto;padding-top:.9rem;
}
.tegel__voet .tegel__label{margin-top:0;padding-top:0}
.snel--tegel{position:relative;z-index:1;margin:0 0 0 auto;align-self:auto;align-items:flex-end;gap:.15rem}
.snel--tegel .snel__link{font-size:.82rem;padding:.15rem 0 .15rem .3rem}
.snel--kop{margin:.6rem 0 0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.25rem .9rem}
.snel--kop .snel__link{padding-left:0}
.tegel--binnenkort{background:transparent;border:1.5px dashed rgba(139,160,173,.55)}
.tegel__ico{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(127,212,216,.12);color:var(--rm-teal-light);margin-bottom:.8rem;
}
.tegel--binnenkort .tegel__ico{background:transparent;border:1px solid rgba(139,160,173,.4);color:var(--rm-slate-light)}
.tegel__title{font-size:1.15rem;color:var(--rm-off-white)}
.tegel__text{margin-top:.4rem;font-size:.92rem;line-height:1.5;color:rgba(247,245,240,.75)}
/* Figure + label sit at the bottom of the tile, so figures in one row line up
   regardless of how long each tile text is. */
.tegelcijfer{display:flex;flex-direction:column;margin-top:auto;padding-top:.8rem}
.tegelcijfer + .tegel__voet{margin-top:0}
.tegelcijfer__value{
  font-family:var(--font-mono);font-weight:500;font-size:1.6rem;line-height:1.15;
  color:var(--rm-off-white);letter-spacing:-.02em;
}
.tegelcijfer__label{font-size:.8rem;color:rgba(247,245,240,.72)}
.tegel__label{margin-top:auto;padding-top:.9rem;font-size:.85rem;font-weight:600}
.tegel--actief .tegel__label{color:var(--rm-teal-light)}
.tegel--binnenkort .tegel__label{
  display:inline-block;margin-top:auto;margin-bottom:0;padding:.15rem .6rem;
  border:1px solid rgba(139,160,173,.55);border-radius:var(--radius-pill);
  color:rgba(247,245,240,.78);font-weight:500;font-size:.78rem;letter-spacing:.04em;
}
/* margin-top:auto alone would glue the tag to whatever precedes it */
.tegel--binnenkort > :nth-last-child(2){margin-bottom:.9rem}

.teaser{
  margin-top:clamp(1.25rem,2.5vw,1.75rem);
  padding:1.6rem 1.8rem;border-radius:var(--radius-md);
  background:rgba(26,155,161,.10);border:1px solid rgba(26,155,161,.28);
}
.teaser__eyebrow{color:rgba(127,212,216,.75)}
.teaser__value{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.05;
  color:var(--rm-amber-bright);margin-top:.35rem;
}
.teaser__label{font-size:1rem;color:var(--rm-off-white);margin-top:.3rem;font-weight:500}
.teaser__cmp{font-size:.88rem;color:rgba(247,245,240,.6);margin-top:.55rem;font-family:var(--font-mono)}
.teaser__hook{font-size:.92rem;color:rgba(127,212,216,.85);margin-top:.75rem}

/* ---- Verdiepingspagina: broodkruimel, kop, NL-kerncijfers, productkaarten ----
   Product status reads from shape and a text tag, not colour alone: available =
   filled card (a link), coming soon = dashed outline, no fill, not a link. */
.crumbs{padding-top:clamp(.5rem,1.5vh,1rem)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-size:.9rem}
.crumbs li{display:flex;align-items:center;color:rgba(247,245,240,.78)}
.crumbs li + li::before{content:"›";margin:0 .55rem;color:var(--rm-slate-light)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--rm-off-white)}

.thead{
  display:grid;grid-template-columns:auto 1fr;gap:.25rem clamp(1rem,2.5vw,1.5rem);
  align-items:center;padding:clamp(.25rem,1vh,.75rem) 0 0;
}
.thead__ico{
  width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(127,212,216,.12);border:1px solid rgba(127,212,216,.38);color:var(--rm-teal-light);
}
.thead__title{font-size:clamp(1.9rem,4vw,2.4rem);color:var(--rm-off-white)}
.thead__q{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.25rem);color:var(--rm-teal-light);
  margin-top:.2rem;letter-spacing:-.01em;
}
.thead__lead{margin-top:.35rem;font-size:1rem;line-height:1.5;color:rgba(247,245,240,.8)}
@media (max-width:640px){.thead{grid-template-columns:1fr}}

.kerncijfers{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));
  gap:clamp(.75rem,1.5vw,1rem);list-style:none;margin:0;padding:0;
}
.kerncijfer{
  display:flex;flex-direction:column;padding:1rem 1.15rem;border-radius:var(--radius-md);
  background:rgba(26,155,161,.10);border:1px solid rgba(127,212,216,.28);
}
.kerncijfer__value{
  font-family:var(--font-mono);font-weight:500;font-size:1.6rem;line-height:1.15;
  color:var(--rm-off-white);letter-spacing:-.02em;
}
.kerncijfer__label{margin-top:.3rem;font-size:.9rem;color:rgba(247,245,240,.85)}
.kerncijfer__scope{font-size:.78rem;color:rgba(247,245,240,.7)}
.kern__bron{margin-top:.6rem;font-size:.8rem;color:rgba(247,245,240,.7)}

.widgetplek{
  margin-top:clamp(1rem,2.5vh,1.5rem);padding:clamp(1.25rem,3vw,2rem);
  border-radius:var(--radius-lg);border:1.5px dashed rgba(139,160,173,.55);
  min-height:160px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
}
.widgetplek__title{font-size:1.15rem;color:var(--rm-off-white)}
.widgetplek__text{margin-top:.4rem;font-size:.95rem;line-height:1.5;color:rgba(247,245,240,.78)}
/* Ingebedde app: the iframe drops the dashed placeholder frame and takes the full
   width; its height follows the widget's postMessage (assets/appframe.js). The start
   height only covers the first paint before the widget reports in. */
.widgetplek:has(.appframe){border:0;padding:0;min-height:0;display:block}
.appframe{display:block;width:100%;height:1100px;border:0;background:transparent;overflow:hidden}
.appframe__melding{font-size:.95rem;line-height:1.5;color:rgba(247,245,240,.85)}
/* Keuze-balk (cyclus D): on a phone, once schools are chosen in the app, a bar at the
   bottom of the screen jumps to the comparison (assets/appframe.js). Wide screens see
   map, list and comparison close together and don't need it. */
.keuzebalk{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;
  border:1px solid rgba(127,212,216,.32);border-radius:14px;background:rgba(6,26,28,.94);
  box-shadow:0 12px 32px rgba(4,26,28,.55);color:var(--rm-off-white);font:500 .95rem/1.3 var(--font-sans)}
.keuzebalk[hidden]{display:none}
.keuzebalk__knop{flex:none;min-height:44px;padding:0 1.3rem;border:0;border-radius:var(--radius-md);
  background:var(--rm-amber-bright);color:var(--rm-ink);font:inherit;font-weight:700;cursor:pointer}
.keuzebalk__knop:hover{background:var(--rm-amber-soft)}
.keuzebalk__knop:focus-visible{outline:2px solid var(--rm-teal-light);outline-offset:3px}
@media (min-width:821px){.keuzebalk{display:none}}

.producten{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));
  gap:clamp(.875rem,2vw,1.25rem);
}
.product{display:flex;flex-direction:column;align-items:flex-start;border-radius:var(--radius-lg);padding:1.2rem 1.35rem 1.1rem}
.product--beschikbaar{
  background:rgba(26,155,161,.18);border:1px solid rgba(127,212,216,.38);box-shadow:var(--shadow-card);
  transition:transform .24s var(--ease-standard),border-color .24s var(--ease-standard);
}
.product--beschikbaar:hover{transform:translateY(-4px);border-color:rgba(127,212,216,.6)}
.product--beschikbaar:focus-visible{border-radius:var(--radius-lg);outline-offset:4px}
.product--binnenkort{background:transparent;border:1.5px dashed rgba(139,160,173,.55)}
.product__title{font-size:1.1rem;color:var(--rm-off-white)}
.product__text{margin-top:.4rem;margin-bottom:.9rem;font-size:.92rem;line-height:1.5;color:rgba(247,245,240,.75)}
.product__status{
  display:inline-block;margin-top:auto;padding:.15rem .6rem;border-radius:var(--radius-pill);
  font-weight:500;font-size:.78rem;letter-spacing:.04em;
}
.product--binnenkort .product__status{border:1px solid rgba(139,160,173,.55);color:rgba(247,245,240,.78)}
.product--beschikbaar .product__status{background:var(--rm-teal-light);color:var(--rm-teal-deep)}

.footer{
  max-width:var(--container);margin:0 auto;
  padding:clamp(1.5rem,3vw,2.25rem) var(--gutter) clamp(1.25rem,2.5vw,1.75rem);
  border-top:1px solid rgba(255,255,255,.08);margin-top:clamp(1.5rem,3vw,2.5rem);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-size:13px;color:rgba(247,245,240,.55);
}
.footer a{color:rgba(127,212,216,.75)}
.footer a:hover{color:var(--rm-amber-bright)}

.footer__links{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.footer__links a{display:inline-flex;align-items:center;min-height:44px}

.page-head{padding:clamp(1.5rem,3vw,2.25rem) 0 clamp(1rem,2vw,1.5rem)}

/* ---- Over / Privacy: running text, the animation ------------------------
   Prose uses the full content width; the video is our own mp4 with native controls,
   preload="none" and a poster, so nothing loads until the visitor clicks. */
.prose{color:rgba(247,245,240,.85);line-height:1.65}
.prose > * + *{margin-top:.9rem}
.prose + .prose{margin-top:.9rem}
.prose h2{font-size:1.2rem;color:var(--rm-off-white);margin-top:2rem}
.prose ul{padding-left:1.25rem}
.prose li + li{margin-top:.3rem}
.prose a{color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--rm-off-white)}
.prose strong{color:var(--rm-off-white)}
.prose__lead{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,2.2vw,1.35rem);line-height:1.35;color:var(--rm-teal-light)}
.prose__sign{font-size:.92rem;color:rgba(247,245,240,.72)}

.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
@media (max-width:1000px){.videos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.videos{grid-template-columns:1fr}}
.videos + .prose{margin-top:2rem}
.video__caption strong{font-family:var(--font-display);color:var(--rm-off-white)}
.video__caption a{color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px}

/* Het boek uit 2009 naast het verhaal: omslag met het portret van de achterflap erover. */
.over-boek{float:right;position:relative;width:clamp(90px,11vw,120px);margin:.3rem 0 1rem 1.75rem}
.over-boek img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:var(--shadow-card)}
.over-boek .over-boek__portret{position:absolute;left:-.9rem;bottom:2.4rem;width:58%;border:2px solid var(--rm-off-white)}
.over-boek figcaption{margin-top:.5rem;font-size:.8rem;color:rgba(247,245,240,.6);text-align:right}
.prose[aria-label="Verhaal"]::after{content:"";display:block;clear:both}
.over-v2l{float:left;width:clamp(90px,10vw,120px);margin:1.2rem 1.5rem .8rem 0;padding:.45rem .55rem;background:var(--rm-off-white);border-radius:8px;opacity:.82}
.over-v2l img{display:block;width:100%;height:auto}
.over-sign{display:flex;align-items:flex-end;gap:1rem}
.prose[aria-label="Afsluiting"]{margin-bottom:3.5rem}
.over-sign img{display:block;width:clamp(88px,9vw,112px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
.over-sign .prose__sign{margin:0;line-height:1}
.over-londen{float:right;clear:right;width:clamp(180px,24vw,280px);margin:.3rem 0 1rem 1.75rem}
.over-londen img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:var(--shadow-card)}
.over-londen figcaption{margin-top:.5rem;font-size:.8rem;color:rgba(247,245,240,.6);text-align:right}
@media (max-width:560px){.over-boek{float:none;width:min(120px,40%);margin:1rem auto}
  .over-londen{float:none;width:100%;margin:1rem 0}
  .over-v2l{width:100px}}
.video{margin:0}
.video__placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  aspect-ratio:16/9;border-radius:var(--radius-lg);border:1.5px dashed rgba(127,212,216,.45);
  color:rgba(247,245,240,.78);text-align:center;padding:1rem;
}
.video__placeholder strong{font-family:var(--font-display);color:var(--rm-off-white)}
.video__player{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  border-radius:var(--radius-lg);background:var(--rm-teal-deep);box-shadow:var(--shadow-card);
}
.video__player:focus-visible{outline-offset:4px}
.video__caption{margin-top:.6rem;font-size:.85rem;color:rgba(247,245,240,.72)}
.video__title{margin:0 0 .6rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.25;color:var(--rm-off-white)}

/* ---- Verkenner (Je buurt verkennen): search form, keuzelijst, native tiles ----
   A plain POST form (no JS); the tiles are drawn here from the fragment API, in the
   kerncijfer language, grouped by the spec's kpi-tiles pages. */
.page-head--compact{padding-bottom:.5rem}
/* Verkenkop: heading and zoekbalk share one grid (the zoekbalk's own box drops out).
   Left the heading, under it the search form; right on the row of "Zoek mijn buurt" the
   voorbeeldknop, and with a chosen buurt "Volledig buurtrapport" above it, beside the
   heading — so choosing a buurt doesn't push the page down (both buttons as wide as the
   wider one). On a narrow screen everything stacks in reading order. */
.verkenkop{
  display:grid;grid-template-columns:minmax(0,40rem) auto;justify-content:space-between;
  align-items:end;gap:.6rem 1.25rem;
}
.zoekbalk{display:contents}
.verkenkop > .page-head{grid-column:1 / -1;grid-row:1}
.verkenkop > .page-head--compact{grid-column:1}
.zoekbalk > .buurtzoek{grid-column:1;grid-row:2}
.zoekbalk > .voorbeeldknop{grid-column:2;grid-row:2}
.zoekbalk > .rapportknop{grid-column:2;grid-row:1}
.zoekbalk > a{justify-content:center}
@media (max-width:640px){
  .verkenkop{grid-template-columns:minmax(0,1fr)}
  .verkenkop > .page-head,.zoekbalk > .buurtzoek,.zoekbalk > .voorbeeldknop,.zoekbalk > .rapportknop{grid-column:1;grid-row:auto}
}
.buurtzoek{max-width:40rem}
.buurtzoek__label{display:block;margin-bottom:.4rem;font-weight:500;color:var(--rm-off-white)}
.buurtzoek__rij{display:flex;flex-wrap:wrap;gap:.6rem}
.buurtzoek__veld{
  flex:1 1 16rem;min-width:0;min-height:48px;padding:.6rem .9rem;font:inherit;font-size:1rem;
  color:var(--rm-ink);background:var(--rm-off-white);border:2px solid var(--rm-slate-light);
  border-radius:var(--radius-md);
}
.buurtzoek__veld::placeholder{color:var(--rm-slate)}
.buurtzoek__veld:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:2px}
.buurtzoek__knop{
  flex:0 0 auto;min-height:48px;padding:.6rem 1.2rem;font:inherit;font-weight:700;cursor:pointer;
  color:var(--rm-ink);background:var(--rm-amber-bright);border:0;border-radius:var(--radius-md);
}
.buurtzoek__knop:hover{background:var(--rm-amber-soft)}
.buurtzoek__knop:focus-visible{outline:3px solid var(--rm-off-white);outline-offset:3px}
.buurtzoek--compact .buurtzoek__label{font-size:.9rem;color:rgba(247,245,240,.85)}
@media (max-width:480px){.buurtzoek__knop{flex:1 1 100%}}

.buurtmelding{
  margin-top:1rem;max-width:40rem;padding:.8rem 1rem;border-radius:var(--radius-md);
  border-left:4px solid var(--rm-amber-bright);background:rgba(229,164,0,.10);
  color:var(--rm-off-white);line-height:1.5;
}

.buurtkeuze{margin-top:1.5rem;max-width:40rem}
.buurtkeuze__kop{font-size:1.15rem;color:var(--rm-off-white)}
.buurtkeuze__lijst{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.buurtkeuze__lijst a{
  display:flex;align-items:center;min-height:48px;padding:.5rem 1rem;border-radius:var(--radius-md);
  color:var(--rm-off-white);background:rgba(26,155,161,.14);border:1px solid rgba(127,212,216,.38);
  text-decoration:underline;text-underline-offset:3px;
}
.buurtkeuze__lijst a:hover{border-color:var(--rm-teal-light)}

.buurtbeeld{margin-top:clamp(1.5rem,3vh,2rem)}
.buurtbeeld__kop{font-size:clamp(1.4rem,3vw,1.9rem);color:var(--rm-off-white)}
/* Knoppen naar het volledige rapport — same shape (the house corner radius, never a
   pill), told apart by their border: paid ("Volledig buurtrapport") amber, the free
   voorbeeld light teal. "Zoek mijn buurt" stays the one filled button. */
.rapportknop{
  display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.1rem;font-weight:700;
  color:var(--rm-off-white);background:rgba(229,164,0,.10);border:2px solid var(--rm-amber-bright);
  border-radius:var(--radius-md);
}
.voorbeeldknop{
  display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.1rem;font-weight:700;
  color:var(--rm-off-white);background:rgba(26,155,161,.18);border:2px solid var(--rm-teal-light);
  border-radius:var(--radius-md);
}
.rapportknop::after,.voorbeeldknop::after{content:"→";margin-left:.5rem}
.rapportknop:hover{background:rgba(229,164,0,.22)}
.voorbeeldknop:hover{background:rgba(26,155,161,.32)}
.rapportknop:focus-visible{outline:3px solid var(--rm-off-white);outline-offset:3px}
.voorbeeldknop:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:3px}
.vgroep{margin-top:1.4rem}
.vgroep__titel{
  margin-bottom:.6rem;font-family:var(--font-sans);font-size:.8rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rm-teal-light);
}
/* Each tile keeps its own height (no stretching to the tallest in its row). */
.vtegels{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));
  gap:clamp(.75rem,1.5vw,1rem);list-style:none;margin:0;padding:0;align-items:start;
}
.vtegel{
  display:flex;flex-direction:column;padding:.7rem .9rem;border-radius:var(--radius-md);
  background:rgba(26,155,161,.10);border:1px solid rgba(127,212,216,.28);
}
.vtegel__waarde{
  font-family:var(--font-mono);font-weight:500;font-size:1.6rem;line-height:1.15;
  color:var(--rm-off-white);letter-spacing:-.02em;
}
.vtegel__label{margin-top:.3rem;font-size:.92rem;color:rgba(247,245,240,.88)}
.vtegel__jaar{margin-top:.35rem;font-size:.78rem;color:rgba(247,245,240,.72)}
/* Vergelijkingsbalkjes (cyclus B, fase 4): buurt · gemeente · Nederland per
   verhoudingsgetal. Label + waarde staan er als tekst; de balk is extra (aria-hidden),
   de buurt is ook zonder kleur te herkennen (eerste rij, vet). */
.vbalken{margin:.75rem 0 0;padding:0;display:grid;gap:.45rem}
.vbalk{margin:0}
.vbalk__naam{font-size:.8rem;line-height:1.3;color:rgba(247,245,240,.88)}
.vbalk--buurt .vbalk__naam{font-weight:700;color:var(--rm-off-white)}
.vbalk__waarde{margin:.15rem 0 0;display:flex;align-items:center;gap:.6rem}
.vbalk__spoor{
  flex:1;height:.55rem;border-radius:var(--radius-pill);overflow:hidden;
  background:rgba(247,245,240,.08);
}
.vbalk__balk{display:block;height:100%;border-radius:inherit;background:var(--rm-teal-light)}
.vbalk--buurt .vbalk__balk{background:var(--rm-amber-bright)}
.vbalk__getal{
  flex:none;min-width:4.5rem;text-align:right;font-family:var(--font-mono);font-size:.82rem;
  color:var(--rm-off-white);
}
/* Bij een aantal: the comparisons as text lines ("Utrecht 376.757"), no bar. */
.vvergelijk{margin:.5rem 0 0;padding:0;display:grid;gap:.15rem}
.vvergelijk__regel{display:flex;justify-content:space-between;gap:.75rem;font-size:var(--grafiek-tekst);line-height:1.35}
.vvergelijk__regel dt{color:rgba(247,245,240,.88)}
.vvergelijk__regel dd{margin:0;font-family:var(--font-mono);color:var(--rm-off-white)}
.vbron{margin-top:1rem;font-size:.82rem;color:rgba(247,245,240,.72)}

/* ---- Meer dan kerncijfers (cyclus B3): voorbeeldgrafieken as kaarten — stacked on a
   phone, two columns from 768. Inline SVG, no script, no animation. Rollen → tokens:
   subject = amber (also thicker, with dots — never colour alone), vergelijking = light
   teal, nederland = off-white, referentie = muted + dashed, overig = muted teal. */
.meer{margin-top:clamp(2rem,4vh,2.75rem)}
.meer__kop{font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--rm-off-white)}
.grafieken{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.75rem,1.5vw,1rem);margin-top:.9rem;align-items:start}
@media (min-width:768px){.grafieken{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* De afsluiting: what the full Report holds (from `inhoud`), then the step to it. */
.meer__slot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.25rem;margin-top:clamp(1.25rem,2.5vh,1.75rem);padding-top:1rem;border-top:1px solid rgba(127,212,216,.28)}
.meer__inhoud{margin:0;max-width:60ch;color:var(--rm-off-white);font-size:1rem;line-height:1.5}
.grafiekkaart{
  min-width:0;display:flex;flex-direction:column;padding:1rem 1.15rem;border-radius:var(--radius-md);
  background:rgba(26,155,161,.10);border:1px solid rgba(127,212,216,.28);
}
.grafiekkaart__eyebrow{
  margin:0;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--rm-teal-light);
}
.grafiekkaart__titel{margin-top:.2rem;font-family:var(--font-sans);font-size:1.05rem;color:var(--rm-off-white)}
.grafiekkaart__leeg{margin-top:.75rem;color:rgba(247,245,240,.88)}
.grafiekkaart__bron{margin-top:auto;padding-top:.6rem;font-size:.78rem;color:rgba(247,245,240,.72)}
.grafiek__legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;margin:.5rem 0 0;padding:0;font-family:var(--font-sans);font-size:var(--grafiek-tekst);color:rgba(247,245,240,.88)}
.grafiek__sleutel{display:inline-flex;align-items:center;gap:.4rem}
.grafiek__sleutel::before{content:"";width:1.1rem;border-top:2px solid var(--rm-off-white)}
.grafiek__sleutel--subject{font-weight:700;color:var(--rm-off-white)}
.grafiek__sleutel--subject::before{border-top:3px solid var(--rm-amber-bright)}
.grafiek__sleutel--vergelijking::before{border-top-color:var(--rm-teal-light)}
.grafiek__sleutel--referentie::before{border-top:2px dashed var(--rm-slate-light)}
.grafiek__sleutel--overig::before{border-top-color:rgba(127,212,216,.55)}
/* Lijn and radar (fase 11) fill the kaart width. The lijn is about 2:1 and has no viewBox
   (1 unit = 1 px): its text is --grafiek-tekst at every width, only its lines stretch. The
   radar is square up to a max-height (the drawing centred), so its text stays 12–16 px. */
.grafiek__svg{display:block;width:100%;height:auto;margin-top:.4rem;overflow:visible}
/* the lijn's margins (as-labels, jaren, eindwaarden) are its padding, set per chart */
.grafiek__svg--lijn{box-sizing:border-box;aspect-ratio:2/1}
.grafiek__lijnen{overflow:visible}
.grafiek__raster{stroke:rgba(247,245,240,.14);stroke-width:1}
.grafiek__as{fill:rgba(247,245,240,.78);font-family:var(--font-mono);font-size:var(--grafiek-tekst)}
.grafiek__lijn{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.grafiek__lijn--subject{stroke:var(--rm-amber-bright);stroke-width:3}
.grafiek__lijn--vergelijking{stroke:var(--rm-teal-light)}
.grafiek__lijn--nederland{stroke:var(--rm-off-white)}
.grafiek__lijn--referentie{stroke:var(--rm-slate-light);stroke-dasharray:4 4}
.grafiek__lijn--overig{stroke:rgba(127,212,216,.55)}
.grafiek__punt{fill:var(--rm-amber-bright)}
.grafiek__eind{font-family:var(--font-mono);font-size:var(--grafiek-tekst);fill:var(--rm-off-white)}
.grafiek__eind--subject{fill:var(--rm-amber-bright);font-weight:700}
.grafiek__eind--vergelijking{fill:var(--rm-teal-light)}
/* gegroepeerde-staven (verdeling) and liggende-staven (ranking), fase 11: HTML rows in the
   style of the tegels' vergelijkingsbalken — a label (DM Sans) above, the staaf over the
   kaart width, the value (DM Mono) right. Names wrap, never cut. */
.grafiek{display:grid;margin-top:.6rem}
.grafiek--staven{gap:.9rem}
.grafiek__groep{display:grid;gap:.3rem}
.grafiek__categorie{margin:0;font-family:var(--font-sans);font-size:var(--grafiek-tekst);line-height:1.3;color:var(--rm-off-white)}
.grafiek__rij{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.6rem;row-gap:.15rem}
.grafiek__naam{grid-column:1/-1;font-family:var(--font-sans);font-size:var(--grafiek-tekst);line-height:1.3;color:rgba(247,245,240,.88);overflow-wrap:anywhere}
.grafiek__naam--subject{font-weight:700;color:var(--rm-amber-bright)}
.grafiek__spoor{display:block;height:.55rem;border-radius:var(--radius-pill);background:rgba(247,245,240,.08)}
.grafiek__staaf{position:relative;display:block;height:100%;border-radius:inherit}
.grafiek__staaf--subject{background:var(--rm-amber-bright)}
.grafiek__staaf--vergelijking{background:var(--rm-teal-light)}
.grafiek__staaf--nederland{background:var(--rm-off-white)}
.grafiek__staaf--referentie{background:var(--rm-slate-light)}
.grafiek__staaf--overig{background:rgba(127,212,216,.55)}
.grafiek__staaf--tweede{opacity:.6}
.grafiek__waarde{min-width:4.5rem;text-align:right;white-space:nowrap;font-family:var(--font-mono);font-size:var(--grafiek-tekst);line-height:1.3;color:var(--rm-off-white)}
.grafiek__waarde--subject{color:var(--rm-amber-bright);font-weight:700}
.grafiek__waarde--vergelijking{color:var(--rm-teal-light)}
/* ranking: the window around the buurt, then — set apart by room and a line — the
   hoogste and laagste in Nederland; the hoogste cut with a breukteken (a slanted gap with
   two strokes) when it would flatten the window */
.grafiek__plek{margin-top:.3rem;font-size:var(--grafiek-tekst);line-height:1.3;font-weight:700;color:var(--rm-amber-bright)}
.grafiek__venster{display:grid;gap:.45rem}
.grafiek__nl{display:grid;gap:.45rem;margin-top:1.1rem;padding-top:.7rem;border-top:1px dashed rgba(247,245,240,.3)}
.grafiek__nlkop{margin:0;font-family:var(--font-sans);font-size:var(--grafiek-tekst);line-height:1.3;font-weight:700;color:rgba(247,245,240,.88)}
.grafiek__staaf--breuk{background:linear-gradient(90deg,var(--rm-slate-light) calc(100% - 1.5rem),transparent calc(100% - 1.5rem) calc(100% - 1.05rem),var(--rm-slate-light) calc(100% - 1.05rem))}
.grafiek__breuk{position:absolute;top:-.2rem;bottom:-.2rem;right:1.05rem;width:.45rem;border-inline:1.5px solid var(--rm-off-white);transform:skewX(-20deg)}
/* radar (spider): Nederland = 100 is the dashed referentie vlak */
.grafiek__svg--radar{max-height:20rem}
.grafiek__rand{fill:none;stroke:rgba(247,245,240,.14);stroke-width:1}
.grafiek__spaak{stroke:rgba(247,245,240,.22);stroke-width:1}
.grafiek__vlak{fill:none;stroke-width:2;stroke-linejoin:round}
.grafiek__vlak--subject{stroke:var(--rm-amber-bright);stroke-width:3;fill:rgba(229,164,0,.16)}
.grafiek__vlak--vergelijking{stroke:var(--rm-teal-light)}
.grafiek__vlak--nederland{stroke:var(--rm-off-white)}
.grafiek__vlak--referentie{stroke:var(--rm-slate-light);stroke-dasharray:4 4}
.grafiek__vlak--overig{stroke:rgba(127,212,216,.55)}
.grafiek__vlak--tweede{stroke-dasharray:7 4}
.grafiek__aslabel{fill:var(--rm-off-white);font-family:var(--font-sans);font-size:var(--grafiek-tekst)}
.grafiek__index{fill:var(--rm-amber-bright);font-family:var(--font-mono);font-size:var(--grafiek-tekst);font-weight:700}
.grafiek__sleutel--tweede::before{border-top-style:dashed}
.grafiektabel{margin-top:.6rem}
.grafiektabel summary{
  display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-size:.88rem;font-weight:500;
  color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px;
}
.grafiektabel summary:hover{color:var(--rm-off-white)}
.grafiektabel summary:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:2px;border-radius:4px}
.grafiektabel__wrap{overflow-x:auto}
.grafiektabel__wrap:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:2px;border-radius:4px}
.grafiektabel table{border-collapse:collapse;font-size:.82rem;margin-top:.25rem}
.grafiektabel th,.grafiektabel td{padding:.3rem .8rem .3rem 0;text-align:right;color:var(--rm-off-white)}
.grafiektabel th:first-child{text-align:left}
.grafiektabel thead th{font-weight:700;border-bottom:1px solid rgba(127,212,216,.38)}
.grafiektabel td{font-family:var(--font-mono)}

/* ---- Rapport-shell (/rapport/…): topbar, a slim terug-bar, then the Report render —
   untouched, in its own house style — in an iframe filling the rest of the viewport.
   The render scrolls inside the frame; the page itself does not (no RP footer). */
/* the shell never scrolls itself (the frame does), so no reserved, empty gutter */
html:has(> body > main.rapportshell){scrollbar-gutter:auto}
body:has(> main.rapportshell){display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:0;overflow:hidden}
body:has(> main.rapportshell) > .topbar{width:100%}
.rapportshell{flex:1;min-height:0;display:flex;flex-direction:column;width:100%}
.rapportshell__balk{
  width:100%;max-width:var(--container);margin:0 auto;padding:.25rem var(--gutter) .6rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 1rem;
}
.rapportshell__terug{
  display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--rm-teal-light);
  text-decoration:underline;text-underline-offset:3px;
}
.rapportshell__terug:hover{color:var(--rm-off-white)}
.rapportshell__titel{font-size:1rem;font-family:var(--font-sans);font-weight:700;color:var(--rm-off-white)}
.rapportshell__voorbeeld{font-weight:400;color:rgba(247,245,240,.8)}
/* Download (a download link) and Delen (script only) — quiet outline buttons. */
.rapportshell__knoppen{display:flex;flex-wrap:wrap;gap:.5rem}
.shellknop{
  display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;font:inherit;
  font-weight:700;cursor:pointer;color:var(--rm-off-white);background:rgba(26,155,161,.18);
  border:2px solid var(--rm-teal-light);border-radius:var(--radius-md);
}
.shellknop[hidden]{display:none}
.shellknop:hover{background:rgba(26,155,161,.32)}
.shellknop:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:3px}
.rapportshell__melding{flex-basis:100%;margin:0;padding:.4rem .8rem;border-left:4px solid var(--rm-amber-bright);background:rgba(229,164,0,.10);color:var(--rm-off-white)}
.rapportshell__melding[hidden]{display:none}
.rapportshell__frame{flex:1;min-height:0;display:block;width:100%;border:0;background:#fff}
/* the gids lines up with the content column (the container less its gutters), not the bar */
.rapportshell__frame--smal{width:calc(100% - 2 * var(--gutter));max-width:calc(var(--container) - 2 * var(--gutter));margin-inline:auto}
.rapportshell__laden{margin:2rem auto;max-width:40rem;padding:0 var(--gutter);color:var(--rm-off-white);line-height:1.5}

/* ---- Afrekenen (/afrekenen/…, cyclus C1): what you buy above a plain form — fields like
   the buurtzoek, the required vinkje with its full text, one filled amber button. Also
   the bare beheer screens (/beheer/…). */
.afreken__inhoud{margin-top:.6rem;color:rgba(247,245,240,.85)}
.afreken{max-width:34rem;display:grid;gap:1rem;padding-bottom:clamp(2rem,5vh,3rem)}
.afreken__veld label{display:block;margin-bottom:.35rem;font-weight:500;color:var(--rm-off-white)}
.afreken__optie{font-weight:400;color:rgba(247,245,240,.75)}
.afreken__veld input,.afreken__veld select{
  width:100%;min-height:48px;padding:.6rem .9rem;font:inherit;font-size:1rem;
  color:var(--rm-ink);background:var(--rm-off-white);border:2px solid var(--rm-slate-light);
  border-radius:var(--radius-md);
}
.afreken__veld input:focus-visible,.afreken__veld select:focus-visible,.afreken__vinkje input:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:2px}
.afreken__vinkje{display:flex;gap:.7rem;align-items:flex-start;color:var(--rm-off-white);line-height:1.5}
.afreken__vinkje input{flex:0 0 auto;width:1.4rem;height:1.4rem;margin-top:.1rem;accent-color:var(--rm-amber-bright)}
.afreken__methode{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;color:var(--rm-off-white)}
.afreken__methode legend{padding:0;margin-bottom:.35rem;font-weight:500}
.afreken__methode label{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer}
.afreken__methode input{width:1.2rem;height:1.2rem;accent-color:var(--rm-amber-bright)}
.afreken__vrijcode{display:none}
.afreken:has(input[name="methode"][value="vrijcode"]:checked) .afreken__vrijcode{display:block}
.afreken__knop-code{display:none}
.afreken:has(input[name="methode"][value="vrijcode"]:checked) .afreken__knop-betaal{display:none}
.afreken:has(input[name="methode"][value="vrijcode"]:checked) .afreken__knop-code{display:inline}
.afreken__methode input:focus-visible{outline:3px solid var(--rm-amber-bright);outline-offset:2px}
.afreken__voorwaarden{font-size:.95rem;color:rgba(247,245,240,.85)}
.afreken__voorwaarden a{color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px}
.afreken__knop{
  justify-self:start;min-height:48px;padding:.6rem 1.6rem;font:inherit;font-weight:700;cursor:pointer;
  color:var(--rm-ink);background:var(--rm-amber-bright);border:0;border-radius:var(--radius-md);
}
.afreken__knop:hover{background:var(--rm-amber-soft)}
.afreken__knop:focus-visible{outline:3px solid var(--rm-off-white);outline-offset:3px}
@media (max-width:480px){.afreken__knop{justify-self:stretch}}
.afreken__melding{
  max-width:34rem;margin:0 0 1rem;padding:.6rem .9rem;border-left:4px solid var(--rm-amber-bright);
  background:rgba(229,164,0,.10);color:var(--rm-off-white);
}
.afreken__melding p + p{margin-top:.3rem}
.afreken__hint{
  max-width:34rem;margin:0 0 1rem;padding:.6rem .9rem;border-left:4px solid var(--rm-teal-light);
  background:rgba(127,212,216,.10);color:var(--rm-off-white);line-height:1.5;
}
.afreken__hint a{color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---- Mijn aankopen (/mijn-aankopen, cyclus C1 fase 5): one card per aankoop — what,
   when and how much, then Bekijken/Download; a refunded one is dimmed and marked. */
.mijn__lijst{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.75rem;max-width:46rem}
.mijn__aankoop{
  display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;align-items:center;
  padding:.9rem 1rem;border:1px solid rgba(247,245,240,.12);border-radius:var(--radius-md);
  background:rgba(247,245,240,.03);color:var(--rm-off-white);
}
.mijn__wat{display:flex;flex-direction:column}
.mijn__product{font-weight:700}
.mijn__subject{color:rgba(247,245,240,.85)}
.mijn__details{display:flex;flex-wrap:wrap;gap:.2rem 1rem;font-size:.95rem;color:rgba(247,245,240,.78);grid-column:1}
.mijn__knoppen{display:flex;gap:.5rem;grid-column:2;grid-row:1 / span 2}
.mijn__status{color:var(--rm-amber-bright);font-weight:600}
.mijn__aankoop--terug{opacity:.75}
.mijn__uit{padding-bottom:clamp(2rem,5vh,3rem)}
@media (max-width:560px){
  .mijn__aankoop{grid-template-columns:1fr}
  .mijn__knoppen{grid-column:1;grid-row:auto}
}
.beheer__form{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));max-width:none;align-items:end}
.beheer__tabel{width:100%;border-collapse:collapse;margin-bottom:3rem;color:var(--rm-off-white);font-size:.95rem}
.beheer__tabel th,.beheer__tabel td{padding:.45rem .6rem;text-align:left;border-bottom:1px solid rgba(247,245,240,.15)}
.beheer__tabel code{font-family:var(--font-mono,monospace);white-space:nowrap}
.beheer__nowrap{white-space:nowrap}
.beheer__aankopen{font-size:.85rem}
.beheer__aankopen th,.beheer__aankopen td{padding:.45rem .4rem}
/* fase 7: the beheer menu, search + CSV side by side, a table that scrolls sideways on a
   phone rather than squeezing, and the small terugbetaald button. */
.beheer__nav{display:flex;gap:1.5rem;margin:-.5rem 0 1.5rem}
.beheer__nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--rm-teal-light);text-decoration:underline;text-underline-offset:3px}
.beheer__nav a[aria-current="page"]{color:var(--rm-off-white);font-weight:700;text-decoration:none}
.beheer__balk{display:flex;flex-wrap:wrap;gap:0 2rem}
.beheer__balk .beheer__form{flex:1 1 18rem;padding-bottom:1.5rem}
.beheer__scroll{overflow-x:auto;margin-bottom:3rem}
.beheer__scroll .beheer__tabel{margin-bottom:0}
.beheer__tabel td{vertical-align:top}
.beheer__tabel a{color:var(--rm-teal-light)}
.beheer__status{font-weight:600;white-space:nowrap}
.beheer__rij--mislukt .beheer__status{color:var(--rm-amber-bright)}
.beheer__rij--terugbetaald{opacity:.75}
.beheer__klein{font-size:.85rem;color:rgba(247,245,240,.78)}
.beheer__knop{
  min-height:44px;padding:.4rem .9rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap;
  color:var(--rm-off-white);background:transparent;border:2px solid var(--rm-amber-bright);border-radius:var(--radius-md);
}
a.beheer__knop{display:inline-flex;align-items:center;text-decoration:none;color:var(--rm-off-white)}
.beheer__acties{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.beheer__acties form{margin:0}
.beheer__bevestig{margin:1.5rem 0}
.beheer__bevestig dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;margin:0 0 1.2rem}
.beheer__bevestig dt{color:rgba(247,245,240,.78)}
.beheer__bevestig dd{margin:0}
.beheer__knop:hover{background:rgba(229,164,0,.15)}
.beheer__knop:focus-visible{outline:3px solid var(--rm-off-white);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* De antwoordzin (cyclus D): the fixed question, answered with the theme's tegelcijfer. */
.antwoord{margin-top:.2rem;font-size:1.05rem;line-height:1.5;color:var(--rm-off-white)}
.antwoord__vraag{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.05rem,2vw,1.25rem);color:var(--rm-teal-light);letter-spacing:-.01em;
}
.antwoord__zin{font-weight:600}
.antwoord__bron{display:block;margin-top:.15rem;font-size:.8rem;font-weight:400;color:rgba(247,245,240,.7)}

/* Beheer · vindbaarheid (cyclus D): one card per etalagepagina, green or orange. */
.seo{margin:0 0 1.5rem;padding:1.1rem 1.25rem;border-radius:var(--radius-md);
  background:rgba(247,245,240,.04);border:1px solid rgba(247,245,240,.15);border-left:6px solid var(--rm-teal)}
.seo--oranje{border-left-color:var(--rm-amber-bright)}
.seo__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;font-size:1.15rem;color:var(--rm-off-white);margin:0 0 .9rem}
.seo__stip{width:.7rem;height:.7rem;border-radius:50%;background:var(--rm-teal);align-self:center}
.seo--oranje .seo__stip{background:var(--rm-amber-bright)}
.seo__soort,.seo__staat{font-size:.8rem;font-weight:400;color:rgba(247,245,240,.7)}
.seo--oranje .seo__staat{color:var(--rm-amber-bright);font-weight:600}
.seo__pad{font-family:var(--font-mono);font-size:.85rem;font-weight:400;color:var(--rm-teal-light)}
.seo__rij{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:flex-start;margin-bottom:1rem}
.google{display:flex;flex-direction:column;gap:.15rem;flex:1 1 28rem;max-width:40rem;padding:.9rem 1rem;
  border-radius:8px;background:#fff;font-family:Arial,sans-serif}
.google__adres{font-size:.8rem;color:#202124}
.google__titel{font-size:1.2rem;line-height:1.3;color:#1a0dab}
.google__tekst{font-size:.875rem;line-height:1.45;color:#4d5156}
.seo__beeld{margin:0;font-size:.75rem;color:rgba(247,245,240,.7)}
.seo__beeld img{display:block;width:240px;height:auto;border-radius:4px;margin-bottom:.25rem}
.seo__velden{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem;margin:0 0 1rem;font-size:.9rem;color:var(--rm-off-white)}
.seo__velden dt{font-family:var(--font-mono);color:rgba(247,245,240,.7)}
.seo__velden dd{margin:0}
.seo__terugval{color:var(--rm-amber-bright)}
.seo__kapot{color:var(--rm-amber-bright)}
.seo__checks{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--rm-off-white)}
.check::before{display:inline-block;width:1.1em;font-weight:700}
.check--ja::before{content:"✓";color:var(--rm-teal-light)}
.check--nee::before{content:"!";color:var(--rm-amber-bright)}
.check--nvt::before{content:"–";color:rgba(247,245,240,.5)}
.check--nee{color:var(--rm-amber-bright)}
.check__detail{color:rgba(247,245,240,.65)}
/* cyclus D, fase 6: "Funnel deze maand" above the aankopen */
.beheer__funnel{margin:0 0 1.5rem}
.beheer__funnel h2{font-size:1.15rem;margin:0 0 .75rem;color:var(--rm-off-white)}
.beheer__funnel .beheer__scroll{margin-bottom:.75rem}
.beheer__funnel td{font-family:var(--font-mono,monospace)}