/* ────────────────────────────────────────────────────────────
   Structday — gedeelde stijl voor structday.nl en /roadmap

   De basis komt uit de app (structa/src/app/globals.css), en die
   is weer letterlijk die van het InfiniteMerlin-dashboard. Dit is
   een kopie, geen import: verandert daar een kleur, zet hem dan
   hier ook.

   Meer kleur dan in de app: de vijf behandelkleuren komen hier
   terug als zachte tinten, zodat de pagina warm oogt zonder dat
   er een nieuwe huisstijl ontstaat.
   ──────────────────────────────────────────────────────────── */
/* Het lettertype staat op onze eigen server: sneller dan via Google, en er
   gaat bij het laden niets naar een andere partij. Eén variabel bestand voor
   alle gewichten van 400 tot 800. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:      #F6F6F9;
  --surface:    #FFFFFF;
  --sunken:     #F2F2F8;
  --line:       #E6E6EC;
  --line-soft:  #EEEEF3;

  --ink:        #12122B;
  --slate:      #494568;
  --mute:       #666284;
  --faint:      #8A87A1;

  --merk:       #5C6CFF;
  --merk-licht: #707EFF;
  --merk-diep:  #4755EB;
  --merk-zacht: #ECEDFF;

  /* Amber betekent "let op", net als in de app. De nu-lijn is paars. */
  --pulse:      #B26A0C;
  --pulse-soft: #FBEFDC;

  /* De vijf behandelkleuren uit de app, met een zachte tint erbij. */
  --mint:   #008069;  --mint-zacht:   #E2F2EE;
  --lucht:  #377EE3;  --lucht-zacht:  #E6EEFB;
  --roos:   #C81E48;  --roos-zacht:   #FBE7EC;
  --honing: #B38400;  --honing-zacht: #FAF0D2;
  --pruim:  #7C30A2;  --pruim-zacht:  #F2E7F8;
  --perzik: #F7E6DA;

  --radius-card: 24px;
  --shadow-kaart: 0 18px 40px -24px rgba(20, 20, 60, .2);
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* De krabbels: kleine lijntekeningen uit de dag van een pedicure — een
     voetje, een nagelvijl, een potje crème, een druppel, een blaadje, de
     klok en de agenda. Eén tegel die zichzelf herhaalt. Twee tinten: inkt op
     een lichte grond, periwinkle op een gekleurde band. */
  --krabbel-inkt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%2312122B' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 20) rotate(-14)'%3E%3Cpath d='M9 12c-5 3-6 13-3 20 2 5 8 5 10 0 2-6 1-9 0-13-1-5-3-8-7-7Z'/%3E%3Ccircle cx='6' cy='5' r='2.6'/%3E%3Ccircle cx='11.5' cy='3' r='2.1'/%3E%3Ccircle cx='16' cy='4.6' r='1.8'/%3E%3Ccircle cx='19.2' cy='8' r='1.5'/%3E%3C/g%3E%3Cg transform='translate(104 14) rotate(8)'%3E%3Crect x='0' y='3' width='20' height='18' rx='3.5'/%3E%3Cpath d='M0 9h20M6 0v5M14 0v5'/%3E%3C/g%3E%3Cg transform='translate(196 40) rotate(-6)'%3E%3Ccircle cx='10' cy='10' r='9.5'/%3E%3Cpath d='M10 4.5V10l4 2.5'/%3E%3C/g%3E%3Cg transform='translate(46 104) rotate(14)'%3E%3Cpath d='M9 18S0 12.4 0 6.2A5.2 5.2 0 0 1 9 3a5.2 5.2 0 0 1 9 3.2C18 12.4 9 18 9 18Z'/%3E%3C/g%3E%3Cg transform='translate(136 98) rotate(-8)'%3E%3Crect x='0' y='9' width='24' height='14' rx='4'/%3E%3Crect x='2.5' y='3' width='19' height='6' rx='2.5'/%3E%3Cpath d='M7 16h10'/%3E%3C/g%3E%3Cg transform='translate(214 130) rotate(10)'%3E%3Cpath d='M0 7.5 5 12.5 14 1.5'/%3E%3C/g%3E%3Cg transform='translate(20 196) rotate(-32)'%3E%3Crect x='0' y='0' width='34' height='7' rx='3.5'/%3E%3Cpath d='M9 3.5h20'/%3E%3C/g%3E%3Cg transform='translate(112 176) rotate(6)'%3E%3Cpath d='M9 0C9 0 0 10 0 15a9 9 0 0 0 18 0C18 10 9 0 9 0Z'/%3E%3C/g%3E%3Cg transform='translate(198 204) rotate(-4)'%3E%3Cpath d='M0 18C0 7 8 0 20 0c0 11-7 20-20 18ZM1 17 13 6'/%3E%3C/g%3E%3Cg transform='translate(74 232) rotate(0)'%3E%3Cpath d='M8 0c0 4.4 3.6 8 8 8-4.4 0-8 3.6-8 8 0-4.4-3.6-8-8-8 4.4 0 8-3.6 8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --krabbel-merk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%234755EB' stroke-opacity='.13' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(22 20) rotate(-14)'%3E%3Cpath d='M9 12c-5 3-6 13-3 20 2 5 8 5 10 0 2-6 1-9 0-13-1-5-3-8-7-7Z'/%3E%3Ccircle cx='6' cy='5' r='2.6'/%3E%3Ccircle cx='11.5' cy='3' r='2.1'/%3E%3Ccircle cx='16' cy='4.6' r='1.8'/%3E%3Ccircle cx='19.2' cy='8' r='1.5'/%3E%3C/g%3E%3Cg transform='translate(104 14) rotate(8)'%3E%3Crect x='0' y='3' width='20' height='18' rx='3.5'/%3E%3Cpath d='M0 9h20M6 0v5M14 0v5'/%3E%3C/g%3E%3Cg transform='translate(196 40) rotate(-6)'%3E%3Ccircle cx='10' cy='10' r='9.5'/%3E%3Cpath d='M10 4.5V10l4 2.5'/%3E%3C/g%3E%3Cg transform='translate(46 104) rotate(14)'%3E%3Cpath d='M9 18S0 12.4 0 6.2A5.2 5.2 0 0 1 9 3a5.2 5.2 0 0 1 9 3.2C18 12.4 9 18 9 18Z'/%3E%3C/g%3E%3Cg transform='translate(136 98) rotate(-8)'%3E%3Crect x='0' y='9' width='24' height='14' rx='4'/%3E%3Crect x='2.5' y='3' width='19' height='6' rx='2.5'/%3E%3Cpath d='M7 16h10'/%3E%3C/g%3E%3Cg transform='translate(214 130) rotate(10)'%3E%3Cpath d='M0 7.5 5 12.5 14 1.5'/%3E%3C/g%3E%3Cg transform='translate(20 196) rotate(-32)'%3E%3Crect x='0' y='0' width='34' height='7' rx='3.5'/%3E%3Cpath d='M9 3.5h20'/%3E%3C/g%3E%3Cg transform='translate(112 176) rotate(6)'%3E%3Cpath d='M9 0C9 0 0 10 0 15a9 9 0 0 0 18 0C18 10 9 0 9 0Z'/%3E%3C/g%3E%3Cg transform='translate(198 204) rotate(-4)'%3E%3Cpath d='M0 18C0 7 8 0 20 0c0 11-7 20-20 18ZM1 17 13 6'/%3E%3C/g%3E%3Cg transform='translate(74 232) rotate(0)'%3E%3Cpath d='M8 0c0 4.4 3.6 8 8 8-4.4 0-8 3.6-8 8 0-4.4-3.6-8-8-8 4.4 0 8-3.6 8-8Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* De grond van het dashboard: raster, stipjes en gloeden — met een warme
   perzikgloed erbij, omdat dit over zorg gaat. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(60% 50% at 82% -5%, rgba(92,108,255,.16), transparent 70%),
    radial-gradient(50% 45% at 6% 10%, rgba(233,150,110,.10), transparent 70%),
    radial-gradient(1px 1px at 20% 30%, rgba(71,85,235,.55), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(71,85,235,.42), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(71,85,235,.48), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(71,85,235,.4), transparent),
    radial-gradient(1px 1px at 12% 82%, rgba(71,85,235,.36), transparent),
    linear-gradient(rgba(15,15,30,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,15,30,.024) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  background-size: auto, auto, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 320px 320px, 44px 44px, 44px 44px;
}

h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }
.tnum { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--merk-diep); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--merk-zacht); color: var(--merk-diep); }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding-inline: 24px; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-kaart);
}

/* ── Krabbels: op elk blok te zetten met class="krabbels" ─── */
.krabbels { position: relative; isolation: isolate; }
.krabbels::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--krabbel-inkt); border-radius: inherit;
}
.krabbels.merk-tint::after { background-image: var(--krabbel-merk); }
/* Op een witte kaart met tekst alleen in de hoek: dwars door een alinea leest
   het als ruis. */
.krabbels.hoek::after {
  -webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 70%);
          mask-image: radial-gradient(70% 90% at 100% 0%, #000, transparent 70%);
}
.krabbels.vervaag::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
          mask-image: linear-gradient(to bottom, #000 45%, transparent);
}

/* ── Labels ────────────────────────────────────────────────── */
.pil {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
  background: var(--merk-zacht); color: var(--merk-diep);
}
.pil.bijna { background: var(--honing-zacht); color: #7A5A00; }
.pil.bijna::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--honing); }
.pil.klaar { background: var(--mint-zacht); color: var(--mint); }

/* ── Knoppen: pillen, net als in de app ───────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 22px; border-radius: 999px;
  font: 600 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: filter .14s ease, background-color .14s ease, transform .14s ease;
}
.knop svg { flex: none; }
.knop-primair {
  background-image: linear-gradient(120deg, var(--merk-licht), var(--merk-diep));
  color: #fff; box-shadow: 0 8px 24px -10px rgba(92,108,255,.7);
}
.knop-primair:hover { filter: brightness(1.06); transform: translateY(-1px); }
.knop-zacht { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-kaart); }
.knop-zacht:hover { background: var(--sunken); }
.knop-klein { min-height: 38px; padding: 8px 16px; font-size: 14px; }

/* ── Merk ──────────────────────────────────────────────────── */
.merk { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.merkteken {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 9px;
  background-image: linear-gradient(135deg, #7E8CFF, #4755EB);
}
.merk-woord { font-weight: 600; font-size: 21px; letter-spacing: -.025em; color: var(--ink); }
.merk-woord span { color: var(--merk); }

/* ── Bovenbalk ─────────────────────────────────────────────── */
.balk {
  position: sticky; top: 0; z-index: 20;
  background: rgba(246,246,249,.74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.balk.gescrold { border-bottom-color: var(--line); }
.balk .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.balk nav { display: flex; align-items: center; gap: 24px; font-size: 14.5px; font-weight: 500; color: var(--slate); }
.balk nav > a { text-decoration: none; }
.balk nav > a:hover, .balk nav > a[aria-current] { color: var(--merk-diep); }
.balk nav > a[aria-current] { font-weight: 600; }
.nav-knoppen { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.nav-knoppen .knop-zacht { box-shadow: none; }
.balk .kort { display: none; }

/* Menuknop: altijd met het woord erbij. Drie streepjes alleen herkent niet
   iedereen als menu. */
.menu-knop { display: none; box-shadow: none; }
.menu-knop[aria-expanded="true"] { background: var(--merk-zacht); border-color: #C9CEFF; color: var(--merk-diep); }
.menu-knop .dicht { display: none; }
.menu-knop[aria-expanded="true"] .open { display: none; }
.menu-knop[aria-expanded="true"] .dicht { display: block; }

/* Nooit hoger dan het scherm onder de balk: op een telefoon die dwars ligt
   vielen Inloggen en de demo er anders onderaf, en omdat de balk vastzit kon
   je daar niet naartoe scrollen. */
.menu-paneel {
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,.97);
  box-shadow: 0 24px 40px -24px rgba(20,20,60,.35);
  max-height: calc(100vh - 66px);
  max-height: calc(100dvh - 66px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-paneel .wrap { display: grid; gap: 4px; padding-block: 12px 20px; }
.menu-paneel a.regel-menu {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 14px; border-radius: 14px; text-decoration: none;
  font-size: 18px; font-weight: 600; color: var(--ink);
}
.menu-paneel a.regel-menu:hover, .menu-paneel a.regel-menu[aria-current] { background: var(--merk-zacht); color: var(--merk-diep); }
.menu-paneel a.regel-menu svg { color: var(--faint); flex: none; }
.menu-paneel .menu-acties { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; padding: 14px 14px 0; border-top: 1px solid var(--line); }
.menu-paneel .menu-acties .knop { flex: 1 1 180px; }

@media (max-width: 1080px) {
  .balk nav > a { display: none; }
  .nav-knoppen { margin-left: 0; }
  .menu-knop { display: inline-flex; }
}
@media (min-width: 1081px) { .menu-paneel { display: none; } }
/* Tot 600 px staat Inloggen in het menu, met tekst; zo past "Menu" er voluit
   naast. Bij 500 px liepen de drie knoppen samen 47 px buiten het scherm. */
@media (max-width: 600px) { .nav-knoppen .knop-inloggen { display: none; } }
/* Op 360 px stond "Sluiten" 18 px buiten de marge. Een iets kleinere
   letter in het woordmerk en smallere knoppen, en het past met ruimte over. */
@media (max-width: 400px) {
  .balk .wrap { padding-inline: 16px; gap: 10px; }
  .balk .merk { gap: 8px; }
  .balk .merk-woord { font-size: 18px; }
  .nav-knoppen .knop-klein { padding-inline: 12px; }
  .nav-knoppen { gap: 6px !important; }
}
.menu-knop { min-width: 92px; }
/* Terwijl het menu open is, hoort "Naar boven" er niet doorheen te steken. */
.menu-open .naar-boven { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }

/* Vangnet: niets mag de pagina breder maken dan het scherm. `clip` en niet
   `hidden`, want hidden maakt een scrollcontainer en dan werkt de vaste
   bovenbalk niet meer. */
html, body { overflow-x: clip; }
@media (max-width: 460px) {
  .balk .lang { display: none; }
  .balk .kort { display: inline; }
  .nav-knoppen { gap: 8px; }
}

/* Naar boven: met tekst, rechtsonder, pas als je een eind naar beneden bent. */
.naar-boven {
  position: fixed; right: 20px; bottom: 20px; z-index: 15;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -14px rgba(20,20,60,.45);
  font: 600 15px/1 var(--sans); text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.naar-boven.zichtbaar { opacity: 1; transform: none; pointer-events: auto; }
.naar-boven:hover { background: var(--merk-zacht); color: var(--merk-diep); }
.naar-boven svg { color: var(--merk-diep); }
@media (max-width: 460px) { .naar-boven { right: 14px; bottom: 14px; } }

.terug {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.85);
  border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--slate); text-decoration: none;
}
.terug:hover { color: var(--merk-diep); background: var(--merk-zacht); }

/* ── Secties ───────────────────────────────────────────────── */
.sectie { padding-block: 88px; }
.sectie.dicht { padding-top: 24px; }
[id] { scroll-margin-top: 76px; }
.kop { max-width: 40em; }
.kop h2 { font-size: clamp(28px, 3.8vw, 40px); letter-spacing: -.03em; margin-top: 12px; }
.kop p { margin-top: 14px; font-size: 17px; color: var(--slate); }
.kop.midden { margin-inline: auto; text-align: center; }
.kop .eyebrow + .pil, .kop .pil + .eyebrow { margin-left: 10px; }

/* Een gekleurde band over de volle breedte, met krabbels in periwinkle. */
.band {
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(124,48,162,.10), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(233,150,110,.16), transparent 60%),
    linear-gradient(180deg, #EEF0FF, #F4EEFB);
  border-block: 1px solid #E2E3F6;
}

.vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vinkjes li { display: flex; gap: 12px; font-size: 15.5px; color: var(--slate); }
.vinkjes li b { color: var(--ink); font-weight: 600; }
.vinkjes svg { flex: none; margin-top: 3px; color: var(--merk-diep); }

/* Een gekleurd icoonblokje; de kleur komt uit de behandelset. */
.icoon {
  display: flex; flex: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--tint, var(--merk-zacht)); color: var(--kleur, var(--merk-diep));
}
.t-mint   { --kleur: var(--mint);   --tint: var(--mint-zacht); }
.t-lucht  { --kleur: var(--lucht);  --tint: var(--lucht-zacht); }
.t-roos   { --kleur: var(--roos);   --tint: var(--roos-zacht); }
.t-honing { --kleur: #8A6500;       --tint: var(--honing-zacht); }
.t-pruim  { --kleur: var(--pruim);  --tint: var(--pruim-zacht); }
.t-merk   { --kleur: var(--merk-diep); --tint: var(--merk-zacht); }

/* ── Voet ──────────────────────────────────────────────────── */
/* Vier kolommen en een onderregel met de bedrijfsgegevens. Structday valt
   onder de KvK van InfiniteMerlin, dus die gegevens staan hier. */
.voet {
  margin-top: 24px; padding-block: 64px 28px;
  border-top: 1px solid #E2E3F6;
  background:
    radial-gradient(50% 80% at 100% 0%, rgba(124,48,162,.08), transparent 60%),
    radial-gradient(40% 70% at 0% 100%, rgba(233,150,110,.12), transparent 60%),
    linear-gradient(180deg, #F1F2FE, #F5F0FB);
}
.voet-raster {
  display: grid; gap: 36px 28px;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .voet-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voet-merk { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .voet-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voet-merk p { margin-top: 14px; max-width: 22em; font-size: 15px; color: var(--slate); }
.voet-contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 6px; }
.voet-contact a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 34px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.voet-contact a:hover { color: var(--merk-diep); }
.voet-contact svg { flex: none; color: var(--merk-diep); }
.voet-kop { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.voet nav ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.voet nav a { display: inline-block; padding: 6px 0; font-size: 15.5px; color: var(--slate); text-decoration: none; }
.voet nav a:hover, .voet nav a[aria-current] { color: var(--merk-diep); }
.voet-onder {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(71,85,235,.14);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-size: 13.5px; color: var(--mute);
}
.voet-onder a { color: inherit; text-underline-offset: 3px; }
.voet-onder a:hover { color: var(--merk-diep); }

/* ── Juridische pagina's ───────────────────────────────────── */
.juridisch { padding-block: 48px 88px; }
.juridisch .wrap { max-width: 808px; }
.artikel { margin-top: 4px; padding: 44px; }
@media (max-width: 640px) { .artikel { padding: 28px 22px; } }
.artikel h1 { font-size: clamp(32px, 4.4vw, 44px); font-weight: 800; letter-spacing: -.03em; margin-top: 12px; }
.artikel .bijgewerkt { margin-top: 10px; font-size: 14px; color: var(--mute); }
.artikel h2 { margin-top: 34px; font-size: 19px; letter-spacing: -.015em; }
.artikel p, .artikel li { font-size: 16px; color: var(--slate); }
.artikel p { margin-top: 10px; }
.artikel ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.artikel a { color: var(--merk-diep); font-weight: 600; text-underline-offset: 3px; }
.artikel .inleiding { margin-top: 18px; font-size: 17px; }

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

/* ════════════════════════════════════════════════════════════
   Hoofdpagina
   ════════════════════════════════════════════════════════════ */

.hero { padding-block: 72px 96px; }
.hero-raster {
  display: grid; gap: 56px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
}
@media (max-width: 940px) { .hero-raster { grid-template-columns: 1fr; gap: 44px; } .hero { padding-block: 48px 72px; } }
.hero h1 { font-size: clamp(36px, 4.6vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; margin-top: 16px; }
.hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--merk-diep), var(--pruim)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin-top: 22px; max-width: 34em; font-size: 18px; color: var(--slate); }
.acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero .acties { margin-top: 32px; }
.hero .fijn { margin-top: 18px; font-size: 13.5px; color: var(--mute); }

/* Het scherm Vandaag, uit de app */
.vandaag { position: relative; }
.vandaag::before {
  /* Een zachte kleurvlek achter de kaart, zodat hij er warm op ligt. Niet
     rechts buiten de kaart: met -6% werd de pagina op een telefoon 19 px
     breder dan het scherm en schoof alles opzij als je veegde. */
  content: ""; position: absolute; inset: 8% 0 -6% 10%; z-index: -1;
  background: radial-gradient(closest-side, rgba(124,48,162,.16), rgba(92,108,255,.10) 55%, transparent);
  filter: blur(8px);
}
.vandaag-kop {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 22px 14px;
}
.vandaag-kop h2, .vandaag-kop h3 { font-size: 20px; letter-spacing: -.02em; }
.vandaag-kop p { font-size: 13.5px; color: var(--mute); }
.dag { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dag > li { position: relative; border-bottom: 1px solid var(--line); }
.dag > li:last-child { border-bottom: 0; }
.regel { position: relative; display: flex; align-items: center; gap: 18px; padding: 13px 18px 13px 24px; }
.regel::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--kleur);
}
.regel .t { width: 62px; flex: none; }
.regel .t b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.regel .t i { display: block; font-style: normal; font-size: 12.5px; color: var(--slate); line-height: 1.25; }
.regel .wie { min-width: 0; flex: 1; }
.regel .wie b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regel .wie i { display: block; font-style: normal; font-size: 13.5px; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.regel .rechts { flex: none; font-size: 13px; font-weight: 600; color: var(--mute); }
.regel .rechts.knop { min-height: 32px; padding: 6px 13px; font-size: 12.5px; color: var(--ink); box-shadow: none; }
.regel.geweest::before { opacity: .35; }
.regel.geweest .wie b { color: var(--slate); }
.regel.geweest .t b { color: var(--mute); }

/* In het paars van het merk, zoals in de app sinds die de amber lijn verving:
   amber betekent daar "let op", en nu is geen waarschuwing. */
.nu-lijn { display: flex; align-items: center; gap: 10px; padding: 9px 22px; color: var(--merk-diep); margin: 0; }
.nu-lijn::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px var(--merk-zacht); }
.nu-lijn::after { content: ""; height: 2px; flex: 1; border-radius: 1px; background: currentColor; opacity: .4; }
.nu-lijn span { font-size: 12px; font-weight: 700; }

.vandaag-voet {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between;
  padding: 14px 22px; border-top: 1px solid var(--line); background: var(--sunken);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  font-size: 13px; color: var(--mute);
}
.vandaag-voet b { color: var(--ink); font-weight: 700; }
.bijschrift { margin-top: 12px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* Een notitie die over de kaart heen steekt: dit is waar het om gaat. */
/* Onder de kaart en niet erover: daar lag hij op de vrije tijd en de bedragen. */
.notitie {
  position: relative; margin: -10px -12px 0 auto; max-width: 260px; z-index: 2;
  padding: 12px 14px; border-radius: 16px; background: #FFF8F2;
  border: 1px solid #F1DCCB; box-shadow: 0 16px 30px -18px rgba(120,60,30,.35);
  font-size: 13px; color: #5C4033; transform: rotate(2deg);
}
.notitie b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #A2613F; margin-bottom: 2px; }
@media (max-width: 1100px) { .notitie { margin-right: 0; } }
@media (max-width: 520px) { .notitie { transform: rotate(1deg); margin: 12px 0 0 auto; } }

@media (prefers-reduced-motion: no-preference) {
  .hero .dag > li { animation: zacht-in .42s cubic-bezier(.22,1,.36,1) both; }
  .hero .dag > li:nth-child(2) { animation-delay: .06s } .hero .dag > li:nth-child(3) { animation-delay: .12s }
  .hero .dag > li:nth-child(4) { animation-delay: .18s } .hero .dag > li:nth-child(5) { animation-delay: .24s }
  .hero .dag > li:nth-child(6) { animation-delay: .30s } .hero .dag > li:nth-child(7) { animation-delay: .36s }
  .notitie { animation: zacht-in .5s cubic-bezier(.22,1,.36,1) .6s both; }
  @keyframes zacht-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
}
@media (max-width: 420px) {
  .regel { gap: 12px; padding-right: 14px; padding-left: 18px; }
  .regel .t { width: 50px; }
  .regel .rechts:not(.knop):not(.nieuw) { display: none; }
}

/* ── Online boeken: website → agenda → bericht ────────────── */
.dak {
  margin-top: 52px;
  display: grid; align-items: center; gap: 28px;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
}
@media (max-width: 900px) { .dak { grid-template-columns: 1fr; gap: 18px; } .dak .brug { transform: rotate(90deg); margin-inline: auto; } }

.browser { overflow: hidden; }
.browser-balk {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--sunken); border-bottom: 1px solid var(--line);
}
.browser-balk .stipjes { display: flex; gap: 6px; }
.browser-balk .stipjes i { width: 9px; height: 9px; border-radius: 50%; background: #D9D9E3; }
.browser-balk .adres {
  flex: 1; min-width: 0; text-align: center; font-size: 12.5px; color: var(--mute);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* De voorbeeldsite heeft bewust een eigen, warme huisstijl: het is háár site. */
.site-kop {
  padding: 26px 24px 24px; color: #3B2A22;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(222,170,140,.45), transparent 60%),
    linear-gradient(160deg, #FBF3EC, #F4E4D8);
}
.site-kop .site-naam { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9A5B3C; }
.site-kop h3 { margin-top: 10px; font-size: 24px; letter-spacing: -.025em; line-height: 1.15; color: #3B2A22; }
.site-kop p { margin-top: 6px; font-size: 13.5px; color: #6E5549; }
.boek { padding: 18px 24px 22px; }
.boek .label { font-size: 12.5px; font-weight: 600; color: var(--mute); }
.boek .behandeling {
  margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px;
}
.boek .behandeling b { font-weight: 700; }
.boek .behandeling span { color: var(--mute); font-size: 13px; }
.tijden { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tijden span {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 13.5px; font-weight: 600; color: var(--slate); background: var(--surface);
}
/* De gekozen tijd staat altijd zo; alleen de afspraak rechts beweegt. */
.tijden span.gekozen { background: #9A5B3C; border-color: #9A5B3C; color: #fff; box-shadow: 0 6px 16px -8px rgba(154,91,60,.8); }
.boek .bevestig {
  margin-top: 16px; width: 100%; min-height: 42px; border-radius: 999px; border: 0;
  background: #3B2A22; color: #fff; font: 600 14px/1 var(--sans);
}

.brug { display: flex; align-items: center; justify-content: center; color: var(--merk-diep); }
.brug .spoor { stroke-dasharray: 4 6; }
@media (prefers-reduced-motion: no-preference) {
  .dak.speelt .brug .spoor { animation: stroom 1s linear infinite; }
  @keyframes stroom { to { stroke-dashoffset: -20; } }
}

.agenda-klein .vandaag-kop { padding-bottom: 12px; }
.regel.binnen { background: linear-gradient(90deg, rgba(92,108,255,.09), transparent 80%); }
.rechts.nieuw {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--merk-zacht);
  color: var(--merk-diep); font-size: 12px; font-weight: 700;
}
.berichtjes { display: grid; gap: 8px; padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--sunken); border-radius: 0 0 var(--radius-card) var(--radius-card); }
.berichtje { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--slate); }
.berichtje svg { flex: none; color: var(--mint); }

/* De animatie: de regel schuift de agenda in, de berichtjes volgen. Zonder
   JavaScript of met minder beweging staat meteen de eindstand er. */
.js .dak:not(.klaar) .binnen-li { max-height: 0; opacity: 0; border-bottom-width: 0; }
.js .dak:not(.klaar) .berichtje { opacity: 0; transform: translateY(4px); }
.binnen-li { max-height: 80px; overflow: hidden; transition: max-height .5s cubic-bezier(.22,1,.36,1), opacity .4s ease .1s; }
.berichtje { transition: opacity .4s ease, transform .4s ease; }
.dak.klaar .berichtje:nth-child(2) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { .js .dak:not(.klaar) .binnen-li, .js .dak:not(.klaar) .berichtje { max-height: none; opacity: 1; transform: none; } }

/* Drie stappen op volgorde: zo loopt een boeking echt, dus nummers kloppen. */
.stappen {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: grid; gap: 16px 28px; grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: stap;
}
@media (max-width: 900px) { .stappen { grid-template-columns: 1fr; } }
.stappen li { display: flex; gap: 12px; font-size: 15px; color: var(--slate); counter-increment: stap; }
.stappen li::before {
  content: counter(stap); flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid #DADCF3; color: var(--merk-diep);
  font-size: 13px; font-weight: 700; margin-top: 1px;
}
.stappen li b { color: var(--ink); font-weight: 600; }

/* Website-aanbod */
.website {
  margin-top: 56px; padding: 40px 44px; overflow: hidden;
  display: grid; gap: 36px; align-items: center;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
@media (max-width: 860px) { .website { grid-template-columns: 1fr; padding: 30px 26px; gap: 26px; } }
.website h3 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.025em; margin-top: 12px; }
.website .tekst p { margin-top: 12px; font-size: 16px; color: var(--slate); }
.website .acties { margin-top: 24px; }
.website .van { margin-top: 16px; font-size: 13.5px; color: var(--mute); }
.website .van a { color: var(--merk-diep); font-weight: 600; text-underline-offset: 3px; }
.website .vinkjes svg { color: var(--mint); }

/* Een dag: drie momenten */
.momenten {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) { .momenten { grid-template-columns: 1fr; } }
.moment { padding: 28px; border-top: 4px solid var(--kleur); }
.moment time { display: inline-flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--kleur); }
.moment h3 { margin-top: 10px; font-size: 18px; }
.moment p { margin-top: 8px; font-size: 15px; color: var(--slate); }

.functies {
  display: grid; gap: 20px; margin-top: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .functies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .functies { grid-template-columns: 1fr; } }
.functie { padding: 26px; }
.functie .boven { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.functie h3 { margin-top: 16px; font-size: 17px; }
.functie p { margin-top: 6px; font-size: 15px; color: var(--slate); }

/* Cliëntgegevens */
.privacy {
  display: grid; gap: 40px; padding: 44px; overflow: hidden;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  background: linear-gradient(135deg, #FFFFFF 40%, var(--mint-zacht));
}
@media (max-width: 860px) { .privacy { grid-template-columns: 1fr; padding: 30px 26px; gap: 28px; } }
.privacy h2 { font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -.03em; margin-top: 12px; }
.privacy .kop p { font-size: 16px; }
.privacy .vinkjes svg { color: var(--mint); }

/* Prijs */
.prijzen {
  margin-top: 48px; display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .prijzen { grid-template-columns: 1fr; } }
.prijs {
  padding: 40px; display: grid; gap: 36px;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
@media (max-width: 1060px) { .prijs { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 860px) { .prijs { padding: 30px 26px; } }
.bedrag { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.bedrag strong { font-size: 68px; font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.bedrag span { font-size: 16px; color: var(--slate); }
.prijs .onder { margin-top: 10px; font-size: 14.5px; color: var(--mute); }
.prijs .acties { margin-top: 28px; }
.prijs .vinkjes { align-content: center; gap: 11px; }
.prijs .vinkjes li { font-size: 15px; }
.prijs .voetnoot { margin-top: 14px; font-size: 13px; color: var(--mute); }
.prijs .voetnoot a { color: var(--merk-diep); font-weight: 600; text-underline-offset: 3px; }

.erbij {
  overflow: hidden; padding: 34px 30px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(124,48,162,.14), transparent 65%),
    radial-gradient(80% 60% at 0% 100%, rgba(233,150,110,.16), transparent 65%),
    var(--surface);
}
.erbij .plus {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--pruim-zacht); color: var(--pruim); font-size: 20px; font-weight: 700;
}
.erbij h3 { margin-top: 16px; font-size: 22px; letter-spacing: -.025em; }
.erbij .korting { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--pruim); }
.erbij .vinkjes { margin-top: 18px; gap: 10px; }
.erbij .vinkjes li { font-size: 14.5px; }
.erbij .vinkjes svg { color: var(--pruim); }
.erbij .acties { margin-top: auto; padding-top: 24px; }

/* Vooruitblik op de roadmap */
.vooruit {
  display: grid; gap: 36px; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 860px) { .vooruit { grid-template-columns: 1fr; gap: 26px; } }
.vooruit .acties { margin-top: 26px; }
.bezig-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bezig-lijst li {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255,255,255,.8); border: 1px solid #E2E3F6; border-radius: 18px;
}
.bezig-lijst li b { display: block; font-size: 15px; font-weight: 700; }
.bezig-lijst li span.sub { display: block; font-size: 13.5px; color: var(--slate); }
.bezig-lijst li .pil { margin-left: auto; }
@media (max-width: 480px) { .bezig-lijst li { flex-wrap: wrap; } .bezig-lijst li .pil { margin-left: 54px; } }

/* Slot */
.slot { text-align: center; padding: 64px 28px; overflow: hidden; }
.slot h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; max-width: 18em; margin: 12px auto 0; }
.slot p.lead { margin: 14px auto 0; max-width: 36em; font-size: 17px; color: var(--slate); }
.slot .acties { justify-content: center; margin-top: 30px; }
.slot .mail { margin-top: 20px; font-size: 14.5px; color: var(--mute); }
.slot .mail a { color: var(--merk-diep); font-weight: 600; text-underline-offset: 3px; }

/* ════════════════════════════════════════════════════════════
   Roadmap
   ════════════════════════════════════════════════════════════ */

.rm-hero { padding-block: 72px 64px; text-align: center; }
.rm-hero h1 { font-size: clamp(36px, 5.4vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 14px auto 0; max-width: 14em; }
.rm-hero .lead { margin: 18px auto 0; max-width: 36em; font-size: 18px; color: var(--slate); }
.rm-hero .acties { justify-content: center; margin-top: 30px; }

.bezig {
  display: grid; gap: 20px; margin-top: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .bezig { grid-template-columns: 1fr; } }
.bezig-kaart { padding: 26px; border-top: 4px solid var(--kleur); }
.bezig-kaart .boven { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bezig-kaart h3 { margin-top: 16px; font-size: 18px; }
.bezig-kaart p { margin-top: 8px; font-size: 15px; color: var(--slate); }
.bezig-kaart .al { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--mute); }
.bezig-kaart .al b { color: var(--mint); font-weight: 700; }

.ideeen-raster {
  display: grid; gap: 24px; margin-top: 40px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 900px) { .ideeen-raster { grid-template-columns: 1fr; } }
.ideeen { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.idee { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.idee:last-child { border-bottom: 0; }
.idee .icoon { width: 38px; height: 38px; border-radius: 11px; }
/* Op een telefoon gaat de ruimte naar de tekst, niet naar het icoontje. */
@media (max-width: 480px) { .idee .icoon { display: none; } .idee { padding: 16px 16px 16px 18px; } }
.idee .tekst { min-width: 0; flex: 1; }
.idee .tekst b { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.idee .tekst span { display: block; margin-top: 2px; font-size: 14px; color: var(--slate); }
.stem {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 76px; min-height: 60px; padding: 6px 6px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface); color: var(--slate);
  font: 600 12px/1.1 var(--sans); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.stem svg { margin-bottom: 2px; }
.stem .aantal { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.stem:hover { border-color: #C9CCF5; background: #F7F7FF; }
.stem[aria-pressed="true"] { background: var(--merk-zacht); border-color: #BFC5FF; color: var(--merk-diep); }
.stem[aria-pressed="true"] .aantal { color: var(--merk-diep); }
.stem:active { transform: scale(.96); }
.stem:disabled { cursor: progress; }

/* Als een stem niet lukt: rustig en duidelijk, niet als alarm. */
.stem-melding {
  margin-top: 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--roos-zacht); color: #8E1634; font-size: 14.5px; font-weight: 600;
}

.idee-insturen { padding: 28px; position: sticky; top: 92px; overflow: hidden;
  background: radial-gradient(90% 70% at 100% 0%, rgba(233,150,110,.18), transparent 65%), var(--surface); }
.idee-insturen h3 { margin-top: 14px; font-size: 20px; }
.idee-insturen p { margin-top: 8px; font-size: 15px; color: var(--slate); }
.idee-insturen .acties { margin-top: 20px; }
.idee-insturen .klein { margin-top: 16px; font-size: 13px; color: var(--mute); }

/* Wat er al in zit: per onderwerp, zonder datums. Wat telt is wat je vandaag
   kunt gebruiken, niet wanneer het gebouwd is. */
.themas {
  display: grid; gap: 20px; margin-top: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) { .themas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .themas { grid-template-columns: 1fr; } }
.thema { padding: 26px; border-top: 4px solid var(--kleur); }
.thema h3 { margin-top: 16px; font-size: 18px; }
.thema ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.thema li { display: flex; gap: 10px; font-size: 15px; color: var(--slate); }
.thema li svg { flex: none; margin-top: 4px; color: var(--kleur); }

/* ── Veelgestelde vragen ───────────────────────────────────── */
/* Uitklapbaar met details/summary: werkt zonder JavaScript en met het
   toetsenbord, en de antwoorden staan in de HTML voor zoekmachines. */
.vragen-raster {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}
@media (max-width: 900px) { .vragen-raster { grid-template-columns: 1fr; gap: 28px; } }
.vragen { overflow: hidden; }
.vraag { border-bottom: 1px solid var(--line); }
.vraag:last-child { border-bottom: 0; }
.vraag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 700; color: var(--ink);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--merk-zacht); color: var(--merk-diep); font-size: 20px; font-weight: 600; line-height: 1;
  transition: transform .2s ease;
}
.vraag[open] summary::after { transform: rotate(45deg); }
.vraag summary:hover { color: var(--merk-diep); }
.vraag .antwoord { padding: 0 24px 22px; font-size: 15.5px; color: var(--slate); }
.vraag .antwoord a { color: var(--merk-diep); font-weight: 600; text-underline-offset: 3px; }

/* ── 404 ───────────────────────────────────────────────────── */
.niet-gevonden { padding-block: 88px 120px; text-align: center; }
.niet-gevonden h1 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -.035em; margin: 14px auto 0; max-width: 14em; }
.niet-gevonden p.lead { margin: 16px auto 0; max-width: 32em; font-size: 18px; color: var(--slate); }
.niet-gevonden .acties { justify-content: center; margin-top: 30px; }