/* ============================================================
   PRODUCTWERELD: CONTROL CENTER EN VOOR WIE

   Deze pagina's verkopen het product, dus ze zien eruit als het
   product. Dit bestand wordt gebruikt door control-center.html en
   voor-wie.html. De vormtaal komt één op één uit de app zelf:

     wit papier, zwarte rand van 2px, hoeken van 8px,
     de verspringende omlijning als handelsmerk,
     een kleurstreep van 4px boven elke tegel,
     mono voor alle labels en Geist voor de koppen.

   De tokens hieronder komen uit
   control-center-core/css/variables.css. Verandert daar een kleur,
   dan hoort hij hier ook te veranderen.

   Bewust de rustigste pagina van de site: één kolom, veel witruimte,
   geen feestmodus. Hier moet je kunnen nadenken over geld uitgeven.
   ============================================================ */

:root {
  /* ---------- Merkkleuren ---------- */
  --roze:       #ff4f8b;
  --roze-diep:  #e0356f;
  --roze-zacht: #fdeff4;
  --geel:       #ffd23f;
  --geel-diep:  #b9860b;
  --geel-zacht: #fff8e0;
  --ink:        #16161a;
  --ink-2:      #26262d;
  --ink-3:      #33333d;
  --paper:      #ffffff;
  --backdrop:   #ececef;
  --vlak-2:     #f6f6f8;
  --vlak-3:     #eeeef1;
  --muted:      #5a5a66;   /* opschriften en metagegevens: donkerder dan de app, want hier moet je ze lezen */
  --label:      #3f3f4a;   /* kleine kopjes boven een blok */
  --lijn:       #e7e7ec;

  /* Leestekst staat zwart. --label en --muted zijn alleen voor kleine
     opschriften, tellingen en metagegevens, nooit voor een alinea. */
  --tekst:      #16161a;

  /* ---------- Signaalkleuren ---------- */
  --ok:         #1d9a63;
  --ok-zacht:   #e3f6ed;
  --alarm:      #d92d20;
  --alarm-zacht:#fdeceb;
  --info:       #2f6fed;
  --info-zacht: #e9f0fe;

  /* ---------- Typografie ---------- */
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --display: "Geist", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Vormtaal ---------- */
  --ronding:      8px;
  --ronding-blok: 14px;
  --vspr:         9px;
  --vspr-s:       6px;
  --lijn-dik:     2px;

  --schaduw-1: 0 2px 8px rgba(22,22,26,.16);
  --schaduw-2: 0 10px 24px rgba(22,22,26,.16);
  --schaduw-3: 0 22px 50px rgba(22,22,26,.28);

  --pad-x: clamp(24px, 4vw, 44px);   /* op een telefoon minstens 24px lucht, gelijk aan de rest van de site */
  --max:   1600px;      /* zelfde maat als de voettekst op de rest van de site */
  --pg-mut: #6e6e79;    /* gedempte tekst in de voettekst */
  --pg-fg:  #ffffff;    /* de voettekst staat op zwart, dus wit */
  --ease:  cubic-bezier(.22, 1, .36, 1);
  --snel:  .18s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:focus-visible { outline: 3px solid var(--geel); outline-offset: 3px; border-radius: var(--ronding); }
.ccknop-roze:focus-visible, .op-ink :focus-visible { outline-color: var(--roze); }
::selection { background: var(--geel); color: var(--ink); }

/* .skip en het logo komen uit core.css */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   RITME VAN DE PAGINA

   Alles staat in één kolom van 1120 en de blokken staan ver uit
   elkaar. Die witruimte doet het meeste werk: hij zegt "dit is af,
   nu komt het volgende".
   ============================================================ */

.strook { padding: clamp(56px, 9vw, 116px) var(--pad-x); }
.strook.grijs { background: var(--vlak-2); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.strook.donker { background: var(--ink); color: #fff; }
.strook.krap { padding-top: clamp(34px, 5vw, 56px); }

.mid { max-width: 1120px; margin: 0 auto; }
.smal { max-width: 760px; }

/* Het codelabel boven elke kop: kleine hoofdletters met sperletters,
   precies zoals de labels in de app. */
.cclabel {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--label);
}
.cclabel::before { content: ""; width: 16px; height: 3px; background: var(--roze); flex-shrink: 0; }
.op-ink .cclabel { color: #a6a2ae; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }

h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  margin-top: 14px; text-wrap: balance; max-width: 22ch;
}
h2.breed { max-width: 30ch; }

.lead { font-size: clamp(.92rem, 1.5vw, 1rem); line-height: 1.85; color: var(--tekst); margin-top: 18px; max-width: 60ch; }
.lead + .lead { margin-top: 16px; }
.lead b, .lead strong { color: var(--ink); font-weight: 700; }
.op-ink .lead { color: #b9b5c1; }
.op-ink .lead b { color: #fff; }

/* ============================================================
   KNOPPEN

   Uit components.css van de app: de verspringende omlijning is een
   tweede randje dat 6px verschoven staat en op hover terugspringt.
   ============================================================ */

.ccknop {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  letter-spacing: .04em; white-space: nowrap;
  transition: background var(--snel), color var(--snel),
              filter var(--snel), box-shadow var(--snel), transform var(--snel);
}
.ccknop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: var(--lijn-dik) solid transparent; border-radius: var(--ronding);
  transform: translate(var(--vspr-s), var(--vspr-s));
  transition: transform var(--snel);
}
.ccknop:hover::after { transform: translate(0, 0); }
.ccknop:active { transform: translateY(1px); }

.ccknop-roze { background: var(--roze); border-color: var(--roze); color: #fff; box-shadow: var(--schaduw-1); }
.ccknop-roze::after { border-color: var(--geel); }
.ccknop-roze:hover { filter: brightness(1.06); box-shadow: var(--schaduw-2); }

.ccknop-lijn::after { border-color: var(--roze); }
.ccknop-lijn:hover { background: var(--roze-zacht); }

.ccknop-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.ccknop-ink::after { border-color: var(--roze); }
.ccknop-ink:hover { background: var(--ink-2); }

.ccknop-groot { padding: 17px 30px; font-size: .88rem; }
.knoprij { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 30px; }

/* ============================================================
   DE KOPBALK

   Geen volledig menu: wie hier leest moet niet worden weggelokt.
   Wel het logo en de belknop, want dat is het DNA van de site.
   ============================================================ */

.kopbalk {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px var(--pad-x);
  border-bottom: 1px solid var(--lijn);
  background: var(--paper);
}
.kopbalk .ccknop { padding: 10px 16px; font-size: .72rem; }

/* ============================================================
   DE HERO

   Links de belofte, rechts een voorbeeld van het scherm. Dat
   voorbeeld is met dezelfde bouwstenen gemaakt als de app zelf,
   dus wat je hier ziet is precies wat je krijgt.
   ============================================================ */

.hero { padding-top: clamp(44px, 7vw, 88px); }
.hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  margin-top: 18px; text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--roze-diep); }
.hero .lead { font-size: clamp(.95rem, 1.7vw, 1.06rem); max-width: 46ch; }

/* De drie feiten onder de knoppen: prijs, opzegbaarheid en waar het
   werkt. Precies wat iemand meteen wil weten. */
.feiten { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.feit {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border: 1px solid var(--lijn); border-radius: var(--ronding);
  background: var(--vlak-2); color: var(--tekst);
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
}
.feit::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--roze); flex-shrink: 0; }

/* Het voorbeeldscherm van de app staat in css/app-venster.css,
   omdat het ook op de homepage wordt getoond. Laad dat bestand
   ernaast op elke pagina waar het scherm staat. */

/* ============================================================
   HET PROBLEEM

   Donkere strook, zoals de zijbalk van de app. Eerst het rijtje
   losse plekken waar je werk nu staat, dan de pijl naar één vlak.
   ============================================================ */

.plekken { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.plek {
  padding: 10px 15px; border: 1px dashed #3d3947; border-radius: var(--ronding);
  font-size: .74rem; color: #b9b5c1; background: rgba(255,255,255,.02);
}
.plek.hoofd { border-style: solid; border-color: var(--roze); color: #fff; }

.pijl { width: 24px; color: #3d3947; margin: 20px 0 0; }
.samen {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 15px 22px;
  background: var(--ink-2); border: var(--lijn-dik) solid var(--roze);
  border-radius: var(--ronding);
  font-size: .86rem; font-weight: 700; color: #fff;
}
.samen::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--roze); flex-shrink: 0; }

/* ============================================================
   ZO WERKT HET: DRIE STAPPEN
   ============================================================ */

.stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 26px); margin-top: 44px; }
.stap {
  position: relative;
  background: var(--paper); border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding); padding: 26px 22px;
}
.stap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--roze); border-radius: var(--ronding) var(--ronding) 0 0; }
.stap-nr {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--geel); color: var(--ink);
  font-family: var(--display); font-size: .9rem; font-weight: 900;
}
.stap h3 { font-size: 1rem; font-weight: 800; line-height: 1.3; margin-top: 16px; }
.stap p { font-size: .8rem; line-height: 1.75; color: var(--tekst); margin-top: 9px; }

/* ============================================================
   DE ONDERDELEN

   Zeven tegels met dezelfde kleurstreep als de statistiekkaarten
   in de app. Je scant ze, je leest ze niet.
   ============================================================ */

.onderdelen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); margin-top: 44px; }
.onderdeel {
  position: relative; overflow: hidden;
  background: var(--paper); border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding); padding: 24px 22px;
  transition: transform var(--snel), box-shadow var(--snel);
}
.onderdeel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--roze); }
.onderdeel:nth-child(2n)::before { background: var(--geel); }
.onderdeel:nth-child(3n)::before { background: var(--ink); }
.onderdeel:hover { transform: translate(-2px, -2px); box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze); }
.onderdeel h3 { font-size: 1.1rem; font-weight: 900; letter-spacing: -.02em; }
.onderdeel p { font-size: .8rem; line-height: 1.75; color: var(--tekst); margin-top: 9px; }
/* Zeven tegels in drie kolommen laat er één alleen achter op de
   laatste regel. Die maken we zo breed als de rij: facturatie is
   waar je geld binnenkomt, dus die mag het slotwoord hebben. */
.onderdeel.breed { grid-column: 1 / -1; }
.onderdeel.breed p { max-width: 70ch; }

/* ============================================================
   IK LOOP HET MET JE DOOR
   ============================================================ */

.zien {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 48px);
  align-items: center;
  background: var(--geel-zacht);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  padding: clamp(26px, 4vw, 44px);
}
.zien h2 { margin-top: 12px; font-size: clamp(1.3rem, 2.8vw, 1.85rem); }
.zien .lead { color: #5c5240; }

/* ============================================================
   WAAROM HET ANDERS VOELT

   Links wat je kent, dun en grijs. Rechts wat je krijgt, vol en
   met de zwarte rand van de app eromheen.
   ============================================================ */

.verschil { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 26px); margin-top: 44px; align-items: stretch; }
.kolom { border-radius: var(--ronding); padding: clamp(22px, 3vw, 32px); }
.kolom.nu { background: var(--vlak-2); border: 1px solid var(--lijn); }
.kolom.straks { background: var(--paper); border: var(--lijn-dik) solid var(--ink); box-shadow: var(--vspr) var(--vspr) 0 var(--roze-zacht); }
.kolom h3 { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kolom.straks h3 { color: var(--roze-diep); }
.kolom p { font-size: .84rem; line-height: 1.85; color: var(--tekst); margin-top: 16px; }
.kolom.straks p { color: var(--ink); }

/* ============================================================
   VOOR WIE
   ============================================================ */

.tweeluik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 26px; align-items: start; }
.herken { display: grid; gap: 12px; }
.herken li {
  font-size: .84rem; line-height: 1.7; color: var(--tekst);
  padding: 12px 14px 12px 40px; position: relative;
  background: var(--paper); border: 1px solid var(--lijn); border-radius: var(--ronding);
}
.herken li::before {
  content: ""; position: absolute; left: 15px; top: 1.15em;
  width: 10px; height: 6px;
  border-left: 2px solid var(--roze); border-bottom: 2px solid var(--roze);
  transform: rotate(-45deg);
}

/* ============================================================
   JE MARKETING
   ============================================================ */

.extra-lijst { display: grid; gap: 12px; }
.extra-lijst li { font-size: .82rem; line-height: 1.7; color: var(--tekst); padding-left: 22px; position: relative; }
.extra-lijst li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; background: var(--geel); }
.extra-lijst b { color: var(--ink); font-weight: 700; }

/* ============================================================
   DE PAKKETTEN

   Drie kolommen naast elkaar, ook op een telefoon. Daarom staan de
   regels bewust in twee of drie woorden: op 375 pixels is elke kolom
   nog geen honderdtien breed. Je scant vinkjes, je leest ze niet.
   ============================================================ */

.prijs-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 20px); margin-top: clamp(38px, 5vw, 58px); align-items: stretch; }
.pak {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(16px, 2.2vw, 28px) clamp(10px, 1.8vw, 26px);
  background: var(--paper); border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
}
/* Het middelste pakket springt eruit: roze rand, de verspringende
   omlijning erachter, en het blok staat een tikje hoger. Zo zie je
   met een half oog waar je moet kijken. */
.pak-uit {
  border-color: var(--roze);
  box-shadow: var(--vspr) var(--vspr) 0 var(--geel), var(--schaduw-2);
  transform: translateY(-12px);
  padding-top: clamp(24px, 2.8vw, 34px);
}
.pak-vlag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  width: max-content; max-width: 94%; padding: 5px 12px;
  background: var(--roze); color: #fff; border-radius: var(--ronding); text-align: center;
  font-family: var(--mono); font-size: clamp(.44rem, 1.1vw, .58rem);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25;
}
.pak-naam {
  font-family: var(--mono); font-size: clamp(.6rem, 1.3vw, .72rem); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--label);
  line-height: 1.35; min-height: 2.7em;
}
.pak-prijs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin-top: 10px; }
.pak-prijs b { font-family: var(--display); font-size: clamp(1.3rem, 3.2vw, 2.5rem); font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.pak-prijs span { font-size: clamp(.54rem, 1vw, .64rem); color: var(--muted); white-space: nowrap; }
.pak-lijst {
  display: grid; gap: clamp(7px, 1vw, 11px);
  margin-top: clamp(14px, 1.8vw, 20px); padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--lijn);
}
.pak-lijst li {
  font-size: clamp(.64rem, 1.2vw, .74rem); line-height: 1.45; color: var(--tekst);
  padding-left: clamp(14px, 1.6vw, 21px); position: relative; overflow-wrap: break-word;
}
.pak-lijst li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: clamp(7px, .9vw, 10px); height: clamp(4px, .55vw, 6px);
  border-left: 2px solid var(--roze); border-bottom: 2px solid var(--roze);
  transform: rotate(-45deg);
}
.pak-uit .pak-lijst li { color: var(--ink); }
.prijs-onder { font-size: .8rem; line-height: 1.85; color: var(--tekst); margin-top: clamp(20px, 2.4vw, 28px); max-width: 66ch; }
.prijs-onder b { color: var(--ink); }

/* ============================================================
   EIGEN GEREEDSCHAP

   Bewust geen vierde pakket met een prijs erop. De omvang verschilt
   per vak te veel, en een verzonnen prijs die later niet klopt kost
   meer vertrouwen dan hij oplevert.
   ============================================================ */

.bouw {
  background: var(--paper);
  border: var(--lijn-dik) dashed var(--ink);
  border-radius: var(--ronding-blok);
  padding: clamp(26px, 4vw, 46px);
}

/* ============================================================
   VEELGESTELDE VRAGEN

   Uitklappers zonder javascript. Google leest ze mee via de
   FAQPage-gegevens onderaan de pagina, dus dit blok kan je ook in
   de zoekresultaten opleveren.
   ============================================================ */

.vragen { margin-top: 40px; border-top: var(--lijn-dik) solid var(--ink); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 4px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1rem; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.4;
  transition: color var(--snel);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:hover { color: var(--roze-diep); }
.vraag summary::after {
  content: "+"; margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-weight: 700; color: var(--roze);
  font-size: 1.2rem; line-height: 1.2;
}
.vraag[open] summary::after { content: "–"; }
.vraag .antwoord { font-size: .84rem; line-height: 1.9; color: var(--tekst); padding: 0 40px 24px 0; max-width: 68ch; }
.vraag .antwoord b { color: var(--ink); font-weight: 700; }

/* ============================================================
   HET SLOT

   Roze vlak met de knop erin. Het enige volvlakse roze op de
   pagina, dus je oog gaat er vanzelf heen.
   ============================================================ */

.slot {
  text-align: center;
  /* Iets dieper roze dan het merkroze: wit leest hier een stuk
     beter op, en het blok blijft herkenbaar. */
  background: var(--roze-diep); color: #fff;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok);
  box-shadow: var(--vspr) var(--vspr) 0 var(--geel);
  padding: clamp(38px, 6vw, 68px) clamp(22px, 4vw, 48px);
}
.slot .cclabel { color: #fff; }
.slot .cclabel::before { background: var(--geel); }
.slot h2 { color: #fff; margin-left: auto; margin-right: auto; max-width: 20ch; }
.slot .lead { color: #fff; margin-left: auto; margin-right: auto; max-width: 52ch; }
.slot .knoprij { justify-content: center; }
.slot .ccknop-ink::after { border-color: var(--geel); }
.slot .ccknop-wit { background: transparent; border-color: #fff; color: #fff; }
.slot .ccknop-wit::after { border-color: var(--geel); }
.slot .ccknop-wit:hover { background: rgba(255,255,255,.14); }
.slot-klein { font-size: .74rem; color: #fff; margin-top: 24px; }

/* ============================================================
   DE VOET
   ============================================================ */

.voet { background: var(--ink); color: #b9b5c1; padding: 44px var(--pad-x); font-size: .72rem; }
.voet-in { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.voet b { color: #fff; font-weight: 700; }
.voet .haak { color: var(--roze); }
.voet-nav {
  display: flex; flex-wrap: wrap; gap: 4px 24px;
  width: 100%; padding-top: 18px; margin-top: 18px;
  border-top: 1px solid var(--ink-3);
}
.voet-nav a { color: #b9b5c1; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; padding: 9px 0; transition: color var(--snel); }
.voet-nav a:hover { color: var(--roze); }

/* ============================================================
   KLEINER SCHERM
   ============================================================ */

@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; }
  .venster-om { max-width: 620px; }
  .venster-bij { text-align: left; }
  .stappen { grid-template-columns: 1fr; }
  .onderdelen { grid-template-columns: 1fr 1fr; }
  .verschil { grid-template-columns: 1fr; }
  .tweeluik { grid-template-columns: 1fr; }
  .zien { grid-template-columns: 1fr; }
  /* de drie prijskolommen blijven staan; alleen het middelste blok
     komt gelijk met de andere twee, want op een smal scherm valt die
     verspringing rommelig uit */
  .pak-uit { transform: none; box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel); }
}

@media (max-width: 620px) {
  .onderdelen { grid-template-columns: 1fr; }
  /* De zijbalk gaat eraf: op een telefoon doet de app dat zelf ook,
     en anders houdt het werkvlak nog geen 250 pixels over. */
  .venster-om .venster { grid-template-columns: minmax(0, 1fr); }
  .app-zij { display: none; }
  .knoprij { flex-direction: column; align-items: stretch; }
  .ccknop { width: 100%; }
  .kopbalk .ccknop { width: auto; }
  .pak { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   PAGINA VOOR WIE

   Vier doelgroepen onder elkaar, allemaal met dezelfde opbouw:
   wie je bent, hoe je week eruitziet, waar het overzicht weglekt
   en wat je eraan hebt. Die herhaling is expres. Je leest het
   blok dat over jou gaat en scrolt de rest voorbij.
   ============================================================ */

/* De sprongknoppen bovenaan: vier chips die je meteen bij je
   eigen situatie brengen, zodat niemand hoeft te scrollen om te
   zien of deze pagina over hem gaat. */
.springrij { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.spring {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px;
  border: var(--lijn-dik) solid var(--ink); border-radius: var(--ronding);
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  transition: background var(--snel), box-shadow var(--snel), transform var(--snel);
}
.spring:hover { transform: translate(-2px, -2px); box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze); }
.spring i { width: 8px; height: 8px; border-radius: 50%; background: var(--roze); font-style: normal; flex-shrink: 0; }
.spring:nth-child(2) i { background: var(--geel); }
.spring:nth-child(3) i { background: var(--ink); }
.spring:nth-child(4) i { background: var(--info); }

/* Eén doelgroepblok. Het nummer en de streep erboven geven de
   pagina ritme zonder dat er een kader omheen hoeft. */
.doelgroep { padding-top: 26px; border-top: var(--lijn-dik) solid var(--ink); }
.doelgroep + .doelgroep { margin-top: clamp(50px, 7vw, 84px); }
.dg-nr {
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* De drie kolommen onder elke doelgroep. Op een telefoon worden het
   drie blokken onder elkaar, elk met zijn eigen kopje, want dan blijft
   duidelijk welke vraag je aan het lezen bent. */
.drieluik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); margin-top: 30px; }
.luik { background: var(--paper); border: var(--lijn-dik) solid var(--ink); border-radius: var(--ronding); padding: 20px 18px; }
.luik.zacht { background: var(--vlak-2); border: 1px solid var(--lijn); }
.luik h3 {
  font-family: var(--mono); font-size: .62rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--label);
  padding-bottom: 9px; margin-bottom: 12px; border-bottom: 1px solid var(--lijn);
}
.luik.winst { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel); }
.luik.winst h3 { color: var(--ink); border-bottom-color: var(--geel); }
.luik ul { display: grid; gap: 9px; }
.luik li { font-size: .78rem; line-height: 1.65; color: var(--tekst); padding-left: 17px; position: relative; }
.luik li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--roze); }
.luik.winst li::before { background: var(--geel-diep); }
.luik.zacht li::before { background: var(--muted); }

/* Welke onderdelen van het Control Center bij deze doelgroep horen. */
.helpt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.helpt-kop { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.helpt span.deelnaam {
  padding: 5px 11px; border: 1px solid var(--lijn); border-radius: var(--ronding);
  background: var(--vlak-2); color: var(--ink);
  font-family: var(--mono); font-size: .66rem; font-weight: 700;
}

/* De startersroute: zeven stappen die je in volgorde doet. Genummerd,
   want bij een starter is de volgorde het punt. */
.route { display: grid; gap: 2px; margin-top: 30px; counter-reset: stap; }
.route li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 16px; background: var(--vlak-2);
  border-left: 4px solid var(--roze);
  font-size: .82rem; line-height: 1.5;
}
.route li:first-child { border-radius: var(--ronding) var(--ronding) 0 0; }
.route li:last-child { border-radius: 0 0 var(--ronding) var(--ronding); border-left-color: var(--geel-diep); }
.route li::before {
  counter-increment: stap; content: counter(stap);
  flex: 0 0 auto; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

@media (max-width: 860px) {
  .drieluik { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGINA WERK: DE VOORBEELDPROJECTEN

   Geen foto's, want dit zijn verzonnen bedrijven en een echte
   screenshot met een verzonnen naam eronder zou liegen. In plaats
   daarvan een typografische kop met de initialen en een gekleurde
   balk, zodat elke zaak toch een eigen gezicht heeft.
   ============================================================ */

.zaken { display: grid; gap: clamp(18px, 3vw, 30px); margin-top: 44px; }

.zaak {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  background: var(--paper); border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding-blok); overflow: hidden;
  box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--geel);
}
.zaak:nth-child(2n) { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--roze); }
.zaak:nth-child(3n) { box-shadow: var(--vspr-s) var(--vspr-s) 0 var(--ink); }

/* De linkerkolom: initialen groot, met de categoriekleur als grond. */
.zaak-merk {
  display: grid; align-content: center; justify-items: center; gap: 8px;
  padding: 24px 14px; background: var(--vlak-2);
  border-right: var(--lijn-dik) solid var(--ink);
}
.zaak-letters {
  font-family: var(--display); font-size: 2.1rem; font-weight: 900;
  letter-spacing: -.05em; line-height: 1; color: var(--ink);
}
.zaak-merk.roze { background: var(--roze-zacht); }
.zaak-merk.geel { background: var(--geel-zacht); }
.zaak-merk.info { background: var(--info-zacht); }
.zaak-merk.ok   { background: var(--ok-zacht); }

/* Het label dat zegt dat dit een voorbeeld is. Het staat er altijd,
   op elke zaak, en het is niet weg te lezen. */
.voorbeeldlabel {
  font-family: var(--mono); font-size: .52rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
  color: var(--ink); background: var(--geel);
  padding: 3px 8px; border-radius: 999px;
}

.zaak-in { padding: clamp(20px, 2.6vw, 30px); min-width: 0; }
.zaak-cat {
  font-family: var(--mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.zaak-in h3 {
  font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 900; letter-spacing: -.025em; margin-top: 6px;
}
.zaak-lead { font-size: .82rem; line-height: 1.75; color: var(--tekst); margin-top: 10px; max-width: 62ch; }

/* Vier vaste regels per zaak: vraag, aanpak, rol, resultaat. Dezelfde
   vier bij elke zaak, zodat je ze naast elkaar kunt leggen. */
.zaak-regels { display: grid; gap: 1px; margin-top: 20px; background: var(--lijn); border: 1px solid var(--lijn); border-radius: var(--ronding); overflow: hidden; }
.zaak-regel { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 11px 14px; background: var(--paper); }
.zaak-regel dt {
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--label); padding-top: 2px;
}
.zaak-regel dd { font-size: .78rem; line-height: 1.65; }
.zaak-regel.uitkomst { background: var(--geel-zacht); }
.zaak-regel.uitkomst dt { color: var(--ink); }
.zaak-regel.uitkomst dd { font-weight: 700; }

@media (max-width: 720px) {
  .zaak { grid-template-columns: 1fr; }
  .zaak-merk { flex-direction: row; border-right: 0; border-bottom: var(--lijn-dik) solid var(--ink); padding: 16px; grid-auto-flow: column; justify-content: flex-start; gap: 14px; align-items: center; }
  .zaak-regel { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================================================
   HET HOOFDMENU OP DE PRODUCTPAGINA'S

   Zelfde zes items als op de rest van de site. Bewust een eigen
   uitvoering: core.css en dit bestand hebben allebei een .ccknop, en
   die twee samen in één pagina laden geeft botsingen. Verandert er
   iets aan het menu, dan moet het op beide plekken.

   Geen hamburger, dus geen javascript. Op een smal scherm valt het
   menu netjes over twee regels, en dan staat alles gewoon in beeld.
   ============================================================ */

.kopbalk {
  display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap;
  padding: 14px var(--pad-x);
  border-bottom: 1px solid var(--lijn);
  background: var(--paper);
}
.kopbalk .lw-logo { margin-right: auto; }

.hoofdmenu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.hoofdmenu a {
  position: relative;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; color: var(--tekst);
  padding: 8px 0;
  transition: color var(--snel);
}
.hoofdmenu a:hover { color: var(--ink); }
.hoofdmenu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: var(--roze);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--snel);
}
.hoofdmenu a:hover::after { transform: scaleX(1); }

/* De pagina waar je nu bent, met de roze streep er blijvend onder. */
.hoofdmenu a[aria-current="page"] { color: var(--ink); }
.hoofdmenu a[aria-current="page"]::after { transform: scaleX(1); }

.kopbalk .ccknop { padding: 10px 16px; font-size: .7rem; }

@media (max-width: 900px) {
  .kopbalk { gap: 10px 18px; }
  .hoofdmenu { order: 3; width: 100%; gap: 2px 18px; padding-top: 4px; border-top: 1px solid var(--lijn); }
  .hoofdmenu a { font-size: .68rem; }
}

/* De voettekst, het logo en de feestmodus komen uit css/core.css.
   Die wordt op deze pagina ook geladen, dus hier staan ze niet nog
   een keer. */
/* ============================================================
   DE RONDLEIDING

   Zelfde blok als op de homepage: een zwart vlak dat helemaal knop
   is, met de afspeelknop rechts. Het staat hier vlak onder de kop,
   want wie op deze pagina komt wil eerst zien hoe het eruitziet.
   ============================================================ */

.rondleiding-om { position: relative; }
.rondleiding-om::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: var(--lijn-dik) solid var(--geel); border-radius: var(--ronding-blok);
  transform: translate(10px, 10px);
  transition: transform .2s var(--ease);
}
.rondleiding-om:hover::after { transform: translate(4px, 4px); }

.rondleiding {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 48px); align-items: center;
  padding: clamp(24px, 3.6vw, 42px);
  background: var(--ink); color: #fff;
  border: var(--lijn-dik) solid var(--ink); border-radius: var(--ronding-blok);
  transition: transform .2s var(--ease);
}
.rondleiding-om:hover .rondleiding { transform: translate(-3px, -3px); }
.rondleiding:focus-visible { outline: 3px solid var(--geel); outline-offset: 5px; }

.rondleiding .cclabel { color: var(--geel); }
.rondleiding .cclabel::before { background: var(--roze); animation: rond-klop 2.4s ease-in-out infinite; }
@keyframes rond-klop { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.rondleiding h2 { color: #fff; margin-top: 12px; max-width: 18ch; }
.rondleiding p.uitleg { font-size: clamp(.86rem, 1.5vw, .98rem); line-height: 1.8; color: #b8b4c2; margin-top: 14px; max-width: 46ch; }

.rond-feiten { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px; font-family: var(--mono); font-size: .66rem; color: #a09ba9; }
.rond-feiten span { display: flex; align-items: center; gap: 7px; }
.rond-feiten span::before { content: ""; width: 5px; height: 5px; background: var(--geel); flex-shrink: 0; }

.rond-play {
  display: grid; place-items: center; flex-shrink: 0;
  width: clamp(78px, 11vw, 112px); aspect-ratio: 1;
  background: var(--roze); border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(255, 255, 255, .14);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.rondleiding-om:hover .rond-play { background: var(--geel); box-shadow: 6px 6px 0 rgba(255, 255, 255, .28); }
.rond-play i {
  display: block; width: 0; height: 0; margin-left: 6px;
  border-top: clamp(15px, 2.2vw, 20px) solid transparent;
  border-bottom: clamp(15px, 2.2vw, 20px) solid transparent;
  border-left: clamp(24px, 3.4vw, 32px) solid #fff;
}
.rondleiding-om:hover .rond-play i { border-left-color: var(--ink); }

.rond-onder { margin-top: 16px; font-family: var(--mono); font-size: .66rem; color: var(--muted); text-align: right; }

@media (max-width: 760px) {
  .rondleiding { grid-template-columns: 1fr; justify-items: start; }
  .rond-onder { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .rondleiding .cclabel::before { animation: none; }
  .rondleiding-om::after, .rondleiding, .rond-play { transition: none; }
}

/* ============================================================
   BIJNA KLAAR VOOR LANCERING

   Zelfde balk als op de homepage: eerlijk zeggen waar het staat.
   Gebouwd, laatste ronde, bijna te koop.
   ============================================================ */

.bijna {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  padding: 14px 20px; margin-top: 26px;
  background: var(--geel);
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
  box-shadow: 5px 5px 0 var(--ink);
  color: var(--ink); max-width: 56ch;
}
.bijna-stip {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--roze); flex-shrink: 0;
  animation: bijna-klop 2.2s ease-in-out infinite;
}
@keyframes bijna-klop { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.bijna-kop {
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.bijna-tekst { font-size: .86rem; line-height: 1.6; flex: 1; min-width: 220px; }
.bijna-tekst b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .bijna-stip { animation: none; } }

/* ============================================================
   OP EEN TELEFOON: GROTERE LETTERS

   De maten hierboven zijn gekozen voor een breed scherm, waar veel
   tekst naast elkaar staat. Op een telefoon staat alles onder
   elkaar en is er ruimte zat, en dan is 12 of 13 pixels gewoon te
   klein om prettig te lezen.

   Alles wat je léést gaat hier omhoog naar ongeveer 15 pixels. De
   kleine opschriften blijven klein, want die scan je.
   ============================================================ */

@media (max-width: 620px) {
  .lead { font-size: 1rem; line-height: 1.8; }

  .stap p,
  .onderdeel p,
  .kolom p,
  .luik li,
  .herken li,
  .extra-lijst li,
  .zaak-lead,
  .zaak-regel dd,
  .vraag .antwoord,
  .prijs-onder,
  .rondleiding p.uitleg {
    font-size: .95rem;
    line-height: 1.75;
  }

  /* De vinkjes in de pakketten: die staan met z'n drieën naast
     elkaar, dus die kunnen niet net zo groot. Wel een slag groter
     dan de 10 pixels die ze hadden. */
  .pak-lijst li { font-size: .78rem; line-height: 1.5; }

  .bijna-tekst { font-size: .92rem; }
  .vraag summary { font-size: 1rem; }
  .zaak-in h3 { font-size: 1.15rem; }

  /* Genoeg ruimte om met een duim te raken. */
  .spring, .hoofdmenu a { min-height: 44px; }
}


/* ============================================================
   DE WACHTLIJST

   Het formulier staat in het roze slotblok. Witte velden met een
   zwarte rand, dezelfde dikke lijn als de knoppen. Na het versturen
   maakt het formulier plaats voor een bedankje op dezelfde plek.
   ============================================================ */
.wl { max-width: 560px; margin: 30px auto 0; text-align: left; }
.wl-velden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wl-breed { grid-column: 1 / -1; }
.wl-veld { display: flex; flex-direction: column; gap: 6px; }
.wl-veld span { font-size: .78rem; font-weight: 700; color: #fff; }
.wl-veld span i { font-style: normal; font-weight: 400; opacity: .85; }
.wl-veld input {
  width: 100%;
  padding: 13px 14px;
  font: inherit; font-size: .95rem;
  color: var(--ink); background: #fff;
  border: var(--lijn-dik) solid var(--ink);
  border-radius: var(--ronding);
}
.wl-veld input:focus { outline: 3px solid var(--geel); outline-offset: 2px; }
.wl-veld input[aria-invalid="true"] { border-color: var(--geel); box-shadow: 0 0 0 2px var(--geel); }

/* de spamval: buiten beeld, maar niet display:none, anders slaan
   sommige bots hem over */
.wl-val { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wl .ccknop { margin-top: 22px; width: 100%; justify-content: center; }
.wl .ccknop::after { border-color: var(--geel); }
.wl .ccknop[disabled] { opacity: .7; cursor: wait; }

.wl-fout {
  margin-top: 14px; padding: 10px 14px;
  background: var(--ink); color: #fff;
  border-radius: var(--ronding); font-size: .84rem;
}
.wl-klein { margin-top: 16px; font-size: .76rem; line-height: 1.6; color: #fff; text-align: center; }

.wl-bedankt {
  max-width: 480px; margin: 30px auto 0; padding: 22px 24px;
  background: #fff; color: var(--ink);
  border: var(--lijn-dik) solid var(--ink); border-radius: var(--ronding);
  box-shadow: 7px 7px 0 var(--geel);
}
.wl-bedankt h3 { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; }
.wl-bedankt p { margin-top: 8px; font-size: .9rem; line-height: 1.6; }
.wl-bedankt:focus { outline: none; }

.slot-klein a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .wl-velden { grid-template-columns: minmax(0, 1fr); }
}

/* De kopbalk is wit, dus daar hoort de tekst zwart te zijn. Hierboven
   staat --pg-fg op wit voor de voettekst, en zonder deze regel verdween
   "LUCY'S" in het logo en de menulink van de huidige pagina. */
.nav { --pg-fg: var(--ink); }

/* De testgroep: een zwarte strook onder het formulier, met een gele
   knop die de verspringende roze lijn heeft, net als de andere knoppen. */
.wl-test {
  max-width: 560px; margin: 34px auto 0; padding: 18px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  background: var(--ink); color: #fff; text-align: left;
  border-radius: var(--ronding);
}
.wl-test p { flex: 1 1 260px; font-size: .86rem; line-height: 1.6; }
.wl-test b { color: var(--geel); }
.wl-test-knop {
  position: relative; flex: none;
  padding: 11px 16px;
  background: var(--geel); color: var(--ink);
  font-size: .8rem; font-weight: 800;
  border-radius: var(--ronding);
}
.wl-test-knop::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: var(--lijn-dik) solid var(--roze); border-radius: var(--ronding);
  transform: translate(5px, 5px); transition: transform var(--snel);
}
.wl-test-knop:hover::after { transform: translate(0, 0); }

.wl-test[hidden] { display: none; }


/* ============================================================
   DE DEMO, HETZELFDE VAK ALS OP DE HOMEPAGE

   Het zwarte vlak is een afdekking met één woord erop. Klik je erop,
   dan opent de rondleiding op precies dezelfde plek en in hetzelfde
   formaat (zie js/main.js). Dezelfde regels als in home.css; deze
   pagina laadt home.css niet.
   ============================================================ */
.demo-om {
  position: relative;
  max-width: 1000px;
  margin: 0 auto 10px;
  aspect-ratio: 16 / 10;
}
.demo-om::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  border: 2px solid var(--geel); border-radius: 14px;
  transform: translate(10px, 10px);
  transition: transform .2s var(--ease);
}
.demo-om:hover::after { transform: translate(4px, 4px); }
.demo-om.speelt::after { transform: translate(6px, 6px); }

.demo-kaart {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  width: 100%;
  padding: clamp(24px, 4vw, 44px);
  background: var(--ink); color: #fff;
  border: 2px solid var(--ink); border-radius: 14px;
  cursor: pointer;
  transition: transform .2s var(--ease);
  font: inherit;
}
.demo-om:hover .demo-kaart { transform: translate(-3px, -3px); }
.demo-kaart:focus-visible { outline: 3px solid var(--geel); outline-offset: 5px; }

.demo-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--geel);
}
.demo-label::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--roze); flex-shrink: 0;
  animation: demo-klop 2.4s ease-in-out infinite;
}
@keyframes demo-klop { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.demo-doe {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.4vw, 2.8rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1;
  color: #fff;
}

.demo-play {
  display: grid; place-items: center; flex-shrink: 0;
  width: clamp(66px, 9vw, 92px); aspect-ratio: 1;
  background: var(--roze); border-radius: 12px;
  box-shadow: 6px 6px 0 rgba(255, 255, 255, .14);
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.demo-om:hover .demo-play { background: var(--geel); box-shadow: 6px 6px 0 rgba(255, 255, 255, .28); }
.demo-play i {
  display: block; width: 0; height: 0; margin-left: 6px;
  border-top: clamp(13px, 1.9vw, 18px) solid transparent;
  border-bottom: clamp(13px, 1.9vw, 18px) solid transparent;
  border-left: clamp(21px, 3vw, 29px) solid #fff;
}
.demo-om:hover .demo-play i { border-left-color: var(--ink); }

.demo-schaal {
  position: absolute; inset: 0;
  overflow: hidden;
  border: 2px solid var(--ink); border-radius: 14px;
  background: #131218;
}
.demo-schaal .demo-venster {
  position: absolute; left: 0; top: 0;
  border: 0; display: block;
  transform-origin: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .demo-label::before { animation: none; }
  .demo-om::after, .demo-kaart, .demo-play { transition: none; }
}
@media (max-width: 760px) {
  .demo-om { aspect-ratio: 3 / 4; }
}

/* ---------- De prijzen: in de maak ---------- */
.in-de-maak { max-width: 640px; }
.in-de-maak .knoprij { margin-top: 24px; }