/* ============================================================================
   assistent.css, concept 6 (op concept 2: grotere film, homepage-kaartjes;
   concept 6: zes gekleurde stroken met voorproefje bij "dit maakt hij ook"). Ligt bovenop site.css en gebruikt alleen diens
   tokens. Doel: rustig zoals apple.com. Grote koppen met één korte regel
   eronder, veel lucht, weinig randen. De diepte komt uit zachte kleurgloed
   (roest en een koel blauw), dezelfde aanpak als het Bob-blok uit concept 1.
   ========================================================================== */

.pa {
  --pa-roest-gloed: color-mix(in srgb, var(--roest) 24%, transparent);
  --pa-blauw-gloed: color-mix(in srgb, var(--serie-2) 20%, transparent);
  --pa-paars-gloed: color-mix(in srgb, var(--serie-4) 16%, transparent);
}

.pa-wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.pa-wrap--breed { max-width: 1200px; }

.pa-zone { position: relative; padding: clamp(88px, 11vw, 168px) 0; overflow: clip; }

/* sectiekop: gecentreerd, één regel uitleg */
.pa-kop2 { text-align: center; max-width: 920px; margin: 0 auto clamp(48px, 6vw, 80px); }
.pa-kop2 h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; }
.pa-kop2 p { margin: 18px auto 0; max-width: 54ch; text-wrap: balance; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--tekst-2); text-wrap: pretty; }

.pa-label {
  font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--roest-tekst);
}

/* ---------- kop ---------- */
.pa-kop { position: relative; padding: clamp(120px, 14vw, 190px) 0 clamp(72px, 9vw, 130px); overflow: clip; }
.pa-kop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 60% at 22% 52%, var(--pa-roest-gloed), transparent 70%),
    radial-gradient(40% 50% at 88% 12%, var(--pa-blauw-gloed), transparent 70%);
}
.pa-kop__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.pa-kop h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.0; text-wrap: balance; margin-top: 16px; }
.pa-sub { margin-top: 22px; max-width: 34ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--tekst-2); }
.pa-knoppen { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

.pa-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
  color: var(--roest-tekst); text-decoration: none;
}
.pa-link svg { transition: translate .3s var(--veer); }
.pa-link:hover svg { translate: 3px 0; }
.pa-link:focus-visible { outline: 2px solid var(--roest); outline-offset: 4px; border-radius: 4px; }

/* de film: klein, staand, als een los scherm */
.pa-film {
  position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden;
  background: #0b0d11; border: 1px solid var(--lijn-2);
  box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--roest) 45%, transparent), var(--schaduw-3);
}
.pa-film img, .pa-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pa-film video { opacity: 0; transition: opacity .6s ease; }
.pa-film video.speelt { opacity: 1; }
.pa-filmkolom { display: grid; justify-items: center; gap: 14px; }
.pa-filmkolom .pa-film { width: 100%; }
.pa-film__opnieuw {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
  border: 0; border-radius: var(--r-vol); background: none;
  color: var(--tekst-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: color .3s var(--veer);
}
.pa-film__opnieuw[hidden] { display: inline-flex; visibility: hidden; } /* ruimte houden, anders verspringt de kop */
.pa-film__opnieuw:hover { color: var(--roest-tekst); }
.pa-film__opnieuw:focus-visible { outline: 2px solid var(--roest); outline-offset: 2px; }

/* ---------- 1. aansluiten: kaartjes komen uit site.css (.koppel), net als op de homepage ---------- */
.pa .koppel { margin-top: 0; }

/* het rondje om een icoon, gebruikt bij de grenzen */
.pa-ico {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  color: var(--roest-tekst);
  background: linear-gradient(140deg, var(--roest-zacht), color-mix(in srgb, var(--serie-4) 14%, var(--roest-zacht)));
  border: 1px solid var(--roest-rand);
}

/* ---------- 2. de middag ---------- */
.pa-zone--inkt { background: var(--inkt); color: var(--op-inkt); }
.pa-zone--inkt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 45% at 50% 62%, var(--pa-roest-gloed), transparent 70%),
    radial-gradient(45% 45% at 12% 18%, var(--pa-blauw-gloed), transparent 70%),
    radial-gradient(40% 40% at 90% 85%, var(--pa-paars-gloed), transparent 70%);
}
.pa-zone--inkt .pa-wrap { position: relative; }
.pa-zone--inkt h2 { color: var(--op-inkt); }
.pa-zone--inkt .pa-kop2 p { color: var(--op-inkt-2); }
.pa .telefoon-los { margin-top: 0; }
.pa-uitsmijter {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 30ch; text-align: center;
  font-size: clamp(19px, 1.8vw, 24px); font-weight: 600; line-height: 1.35; color: var(--op-inkt); text-wrap: balance;
}

/* ---------- 3. wat hij maakt: zes stroken, elk met een eigen kleur ----------
   Concept 6. De stroken zijn in beide kleurstanden donker, net als de telefoon.
   Dicht laat een strook al zien wat erin zit: naam, één korte regel en onderaan
   een voorproefje. Elke strook heeft een eigen kleur (--tint in de html), die
   bovenin vol begint en naar onder in het donker wegloopt. */
.pa-balken {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px; height: 820px;
}
.pa-balk {
  --balk-tekst: #F6F4F0; --balk-tekst-2: #B4B6BA;
  --tint: #E8672C; --blauw: #12A0BB;
  --tint-licht: #F59A6B;
  position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden;
  border-radius: 22px; color: var(--balk-tekst); isolation: isolate;
  /* FleurenFlow: roest bovenin, het lichtblauw schemert onderin door, net als op de site */
  background:
    radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--tint) 62%, transparent), transparent 75%),
    radial-gradient(120% 45% at 20% 100%, color-mix(in srgb, var(--blauw) 30%, transparent), transparent 72%),
    linear-gradient(180deg, #161A21, #0C0F14);
  border: 1px solid color-mix(in srgb, var(--tint) 30%, rgba(255, 255, 255, .06));
  transition: flex-grow .55s var(--veer), border-color .3s var(--veer);
  /* Wat er in een strook verandert, blijft in die strook: de browser hoeft bij
     elk beeldje van het open- en dichtgaan dan niet de hele pagina na te lopen. */
  contain: layout paint style;
}
/* een zachte lichtvlek bovenin, zodat de kleur niet plat oogt */
.pa-balk::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 45% at 30% 0%, rgba(255, 255, 255, .16), transparent 70%);
  transition: opacity .5s ease;
}
/* open: het donker neemt het over en de kleur wordt een gloed achter het plaatje */
.pa-balk::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background:
    radial-gradient(70% 60% at 50% 34%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 72%),
    radial-gradient(60% 40% at 90% 100%, color-mix(in srgb, var(--blauw) 18%, transparent), transparent 72%),
    linear-gradient(180deg, #161A21, #0C0F14);
  transition: opacity .6s var(--veer);
}
.pa-balk.is-open { flex-grow: 6; border-color: color-mix(in srgb, var(--tint) 50%, rgba(255, 255, 255, .08)); }
.pa-balk.is-open::after { opacity: 1; }
.pa-balk:not(.is-open):hover { border-color: color-mix(in srgb, var(--tint) 65%, rgba(255, 255, 255, .12)); }
/* Oplichten bij de muis was een filter over de hele strook. Dat moest bij elk
   beeldje opnieuw over alle pixels, en haperde zichtbaar als je over de rij
   ging (Thijs, 7 okt 2026). Nu alleen de rand, dat kost niets. */

/* de dichte strook: knop over de hele strook */
.pa-balk__knop {
  position: absolute; inset: 0; z-index: 3; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 0 12px 0 14px;
  border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; border-radius: inherit;
}
.pa-balk__knop:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.pa-balk.is-open .pa-balk__knop { cursor: default; }
.pa-balk__knop > * { transition: opacity .3s ease; }
.pa-balk.is-open .pa-balk__knop > * { opacity: 0; }
.pa-balk__ico {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5);
}
.pa-balk__namen { display: grid; gap: 2px; min-width: 0; }
.pa-balk__naam { font-size: 17px; font-weight: 650; letter-spacing: -.015em; white-space: nowrap; }
.pa-balk__kort { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* het voorproefje: een klein donker kaartje met het belangrijkste eruit */
.pa-mini {
  display: grid; place-items: center; align-content: center; gap: 3px; text-align: center;
  border-radius: 12px; overflow: hidden;
  background: rgba(8, 10, 14, .55); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8);
  /* geen waas (backdrop-filter): onder dit kaartje schuift de strook, dus de
     waas moest elk beeldje opnieuw; een donkerder vlak geeft hetzelfde beeld */
  background: rgba(8, 10, 14, .72);
}
.pa-mini--getal svg { color: var(--tint-licht); }
.pa-mini--getal b { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--tint-licht); font-variant-numeric: tabular-nums; }
.pa-mini--getal span { display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, .7); }
.pa-mini__stip { width: 6px; height: 6px; border-radius: 50%; background: #5FD08A; flex: none; }
/* de dia als miniatuur: zelfde opbouw als de grote */
.pa-mini--dia { position: relative; padding: 0; background: #F6F1E8; border-color: rgba(255, 255, 255, .5); aspect-ratio: 16 / 10; display: block; }
.pa-mini--dia i { position: absolute; bottom: 18%; width: 9%; border-radius: 2px 2px 0 0; background: #CFC6B6; }
.pa-mini--dia i:nth-child(1) { left: 16%; height: 22%; }
.pa-mini--dia i:nth-child(2) { left: 32%; height: 34%; }
.pa-mini--dia i:nth-child(3) { left: 48%; height: 30%; }
.pa-mini--dia i:nth-child(4) { left: 64%; height: 56%; background: #E8672C; }
.pa-mini--dia::before { content: ""; position: absolute; left: 14%; top: 16%; width: 46%; height: 9%; border-radius: 2px; background: #14181F; }
.pa-mini--foto { padding: 0; border-color: rgba(255, 255, 255, .4); }
.pa-mini--foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.pa-mini--golf { gap: 6px; }
.pa-mini--golf > span:last-child { font-size: 11px; font-weight: 650; color: rgba(255, 255, 255, .75); font-variant-numeric: tabular-nums; }
.pa-mini__golf { display: flex; align-items: center; gap: 3px; height: 26px; }
.pa-mini__golf i { width: 4px; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--tint-licht); }

/* smal: dichte strook is een balk, het voorproefje staat rechts */
.pa-balk__voorproef .pa-mini { width: 92px; height: 54px; }
.pa-balk__voorproef .pa-mini--getal { grid-auto-flow: column; gap: 6px; padding: 0 8px; }
.pa-balk__voorproef .pa-mini--getal svg { color: var(--tint-licht); }
.pa-mini--getal b { font-size: 20px; }
.pa-balk__voorproef .pa-mini--getal span { text-align: left; justify-content: start; font-size: 10px; }
.pa-balk__voorproef .pa-mini--dia { width: 86px; height: auto; }
.pa-balk__voorproef .pa-mini--foto { width: 54px; }
.pa-balk__voorproef .pa-mini--golf { grid-auto-flow: column; }

/* het plaatje: verschijnt pas als de strook open is */
.pa-balk__beeld {
  position: absolute; inset: 0 0 132px 0; z-index: 1;
  display: grid; place-items: center; padding: 28px 24px 0;
  opacity: 0; transform: scale(.96) translateY(10px);
  transition: opacity .35s ease, transform .6s var(--veer);
  pointer-events: none;
}
.pa-balk.is-open .pa-balk__beeld { opacity: 1; transform: none; transition-delay: .12s; }

/* de tekst onderin */
.pa-balk__info {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: grid; gap: 8px; padding: 0 28px 26px;
  visibility: hidden; opacity: 0; transform: translateY(10px);
  transition: opacity .35s ease, transform .6s var(--veer), visibility 0s linear .35s;
}
.pa-balk.is-open .pa-balk__info { visibility: visible; opacity: 1; transform: none; transition-delay: .15s, .15s, 0s; }
.pa-balk__info h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.025em; color: var(--balk-tekst); }
.pa-balk__info h3::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%;
  vertical-align: .12em; background: var(--tint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tint) 25%, transparent);
}
.pa-balk__info p { max-width: 44ch; font-size: 16px; line-height: 1.45; color: var(--balk-tekst-2); }

@media (min-width: 900px) {
  .pa-balken { flex-direction: row; height: 580px; gap: 8px; }
  /* dicht: icoon boven, naam en korte regel staand, voorproefje onderaan */
  .pa-balk__knop {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center; align-items: start; gap: 18px; padding: 22px 10px 14px;
  }
  .pa-balk__namen { display: flex; gap: 6px; writing-mode: vertical-rl; rotate: 180deg; align-self: start; justify-self: center; }
  .pa-balk__naam { font-size: 19px; }
  .pa-balk__kort { font-size: 13.5px; }
  .pa-balk.is-open .pa-balk__knop { visibility: hidden; }
  .pa-balk__voorproef { width: 100%; display: grid; justify-items: center; }
  .pa-balk__voorproef .pa-mini { width: min(84px, 100%); height: auto; aspect-ratio: 1 / 1.1; }
  .pa-balk__voorproef .pa-mini--getal { grid-auto-flow: row; gap: 4px; padding: 6px; }
  .pa-balk__voorproef .pa-mini--getal svg { color: var(--tint-licht); }
.pa-mini--getal b { font-size: clamp(17px, 1.9vw, 26px); }
  .pa-balk__voorproef .pa-mini--getal span { text-align: center; justify-content: center; flex-wrap: wrap; }
  .pa-balk__voorproef .pa-mini--dia { aspect-ratio: 16 / 10; }
  .pa-balk__voorproef .pa-mini--foto { aspect-ratio: 4 / 5; }
  .pa-balk__voorproef .pa-mini--golf { grid-auto-flow: row; }
  .pa-balk__beeld { padding: 36px 32px 0; }
  .pa-balk__info { padding: 0 32px 30px; }
  /* Plaatje en tekst hebben altijd de breedte van een open strook (assistent.js
     rekent die uit). Zo hoeft de browser ze tijdens het open- en dichtgaan niet
     elk beeldje opnieuw op te bouwen: de strook schuift er alleen overheen. */
  .pa-balk__beeld, .pa-balk__info { right: auto; width: var(--open-b, 100%); }
  /* Hetzelfde voor de kleur. De verlopen zaten op de strook zelf en moesten bij
     elke breedteverandering opnieuw getekend worden, zes stroken tegelijk. Nu
     liggen ze op een vaste laag ter breedte van een open strook, midden in de
     strook; de browser tekent die één keer en schuift hem daarna alleen. */
  .pa-balk { background: #0E1117; }
  .pa-balk::before, .pa-balk::after {
    inset: 0 auto 0 50%; width: var(--open-b, 100%); translate: -50% 0;
    will-change: transform;
  }
  .pa-balk::before {
    background:
      radial-gradient(60% 45% at 40% 0%, rgba(255, 255, 255, .14), transparent 70%),
      radial-gradient(40% 55% at 50% 0%, color-mix(in srgb, var(--tint) 62%, transparent), transparent 75%),
      radial-gradient(45% 45% at 40% 100%, color-mix(in srgb, var(--blauw) 30%, transparent), transparent 72%),
      linear-gradient(180deg, #161A21, #0C0F14);
  }
  .pa-balk::after { will-change: transform, opacity; }

  /* Stroken die schuiven in plaats van groeien (8 okt 2026). Bovenstaande
     haperde nog steeds: de breedte van zes stroken veranderde bij elk beeldje,
     en dan rekent de browser (vooral Safari) de hele rij opnieuw uit. Nu is
     elke strook altijd zo breed als een open strook. assistent.js zet hem op
     zijn plek (--x) en knipt er een venster uit (--a aan beide kanten); bij
     openen schuift alleen dat venster open. Schuiven en knippen hoeft de
     browser niet opnieuw op te bouwen. Zonder script (geen .is-los) blijft
     het oude groeien staan. De rand is de strook zelf, met de kleurlagen
     1px kleiner erin geknipt. */
  .pa-balken.is-los { display: block; position: relative; overflow: hidden; }
  .is-los > .pa-balk {
    --rand: color-mix(in srgb, var(--tint) 30%, rgba(255, 255, 255, .06));
    position: absolute; top: 0; bottom: 0; left: 0; width: var(--open-b);
    border: 0; border-radius: 0; background: var(--rand);
    transform: translateX(var(--x, 0px));
    clip-path: inset(0 var(--a, 0px) round 22px);
    transition: transform .55s var(--veer), clip-path .55s var(--veer), background-color .3s var(--veer);
    will-change: transform, clip-path;
  }
  .is-los > .pa-balk.is-open { background-color: color-mix(in srgb, var(--tint) 50%, rgba(255, 255, 255, .08)); }
  .is-los > .pa-balk:not(.is-open):hover { background-color: color-mix(in srgb, var(--tint) 65%, rgba(255, 255, 255, .12)); }
  .is-los > .pa-balk::before, .is-los > .pa-balk::after {
    inset: 1px; width: auto; translate: none;
    clip-path: inset(0 var(--a, 0px) round 21px);
    will-change: clip-path;
  }
  .is-los > .pa-balk::before { transition: clip-path .55s var(--veer), opacity .5s ease; }
  .is-los > .pa-balk::after { transition: clip-path .55s var(--veer), opacity .6s var(--veer); }
  /* de dichte inhoud staat midden in het venster, zo breed als een dichte strook */
  .is-los .pa-balk__knop { inset: 0 auto 0 50%; width: var(--dicht-b); transform: translateX(-50%); }
  /* bij laden en bij een ander schermformaat meteen op zijn plek, niet aanschuiven */
  .is-los.is-direct > .pa-balk, .is-los.is-direct > .pa-balk::before, .is-los.is-direct > .pa-balk::after { transition: none; }
  /* de foto-strook heeft een regel tekst extra; het plaatje schuift daarvoor omhoog */
  .pa-balk:has(.pa-balk__noot) .pa-balk__beeld { bottom: 200px; padding-top: 24px; }
}

/* smal: dichte stroken zijn een balk van 76px, de open strook groeit mee met
   zijn inhoud (plaatje en tekst onder elkaar, niet over elkaar heen) */
@media (max-width: 899px) {
  .pa-balken { height: auto; interpolate-size: allow-keywords; }
  .pa-balk { flex: none; height: 76px; transition: height .6s var(--veer), border-color .4s var(--veer), filter .4s var(--veer); }
  .pa-balk {
    background:
      radial-gradient(70% 140% at 0% 50%, color-mix(in srgb, var(--tint) 58%, transparent), transparent 75%),
      radial-gradient(60% 140% at 100% 100%, color-mix(in srgb, var(--blauw) 26%, transparent), transparent 72%),
      linear-gradient(180deg, #161A21, #0C0F14);
  }
  .pa-balk.is-open { height: auto; }
  .pa-balk.is-open .pa-balk__knop { pointer-events: none; }
  .pa-balk__beeld, .pa-balk__info { position: relative; inset: auto; }
  .pa-balk__beeld { padding: 26px 18px 0; }
  .pa-balk__info { padding: 22px 22px 24px; }
}
@media (max-width: 480px) {
  .pa-balk__knop { gap: 12px; }
  .pa-balk__voorproef .pa-mini { width: 58px; height: 46px; }
  .pa-balk__voorproef .pa-mini--getal { padding: 0 4px; }
  .pa-balk__voorproef .pa-mini--getal svg { color: var(--tint-licht); }
.pa-mini--getal b { font-size: 16px; }
  .pa-balk__voorproef .pa-mini--getal span, .pa-balk__voorproef .pa-mini--golf > span:last-child { display: none; }
  .pa-balk__voorproef .pa-mini--dia { width: 64px; height: auto; }
  .pa-balk__voorproef .pa-mini--foto { width: 46px; }
}

.pa-ster { color: var(--roest-tekst); font-weight: 700; }
.pa-balk .pa-ster { color: #F49AB8; font-size: .6em; margin-left: 2px; vertical-align: super; }
.pa-voetnoot {
  margin: 22px auto 0; max-width: 70ch; text-align: center;
  font-size: 14px; line-height: 1.5; color: var(--tekst-2); text-wrap: balance;
}

/* ---- de plaatjes, gedeelde stukjes ---- */
.mk-klein { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #8E939B; }
.mk-regel { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.mk-regel--kort { width: 62%; }

/* presentatie: één echte dia (warm papier, groot cijfer, een lijn die zich
   tekent als de strook opengaat) met eronder de rij dia's zoals in Keynote */
.mk-deck { width: min(420px, 100%); display: grid; gap: 12px; }
.mk-deck__dia {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto;
  padding: 7% 7% 5%; color: #14181F;
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(232, 103, 44, .16), transparent 60%),
    linear-gradient(160deg, #FBF7F0, #F1EADF);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.mk-deck__kop { display: grid; gap: 6px; }
.mk-deck__label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #B23F12; }
.mk-deck__kop strong { font-size: clamp(16px, 1.6vw, 21px); font-weight: 750; letter-spacing: -.03em; line-height: 1.05; }
.mk-deck__cijfer { display: grid; justify-items: end; gap: 2px; text-align: right; }
.mk-deck__cijfer b { font-size: clamp(26px, 2.8vw, 36px); font-weight: 750; letter-spacing: -.04em; line-height: 1; color: #D9541F; }
.mk-deck__cijfer span { font-size: 10px; font-weight: 600; line-height: 1.25; color: #6B655C; }
.mk-deck__lijn { grid-column: 1 / -1; width: 100%; height: 100%; min-height: 0; align-self: end; overflow: visible; }
.mk-deck__trek { fill: none; stroke: #D9541F; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mk-deck__lijn circle { fill: #D9541F; stroke: #FBF7F0; stroke-width: 2; vector-effect: non-scaling-stroke; }
.mk-deck__voet { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 9.5px; font-weight: 650; color: #8A8378; }
.mk-deck__voet i { width: 14px; height: 3px; border-radius: 2px; background: #D9541F; }
/* de lijn tekent zich als de strook opengaat */
.pa-balk .mk-deck__trek { transition: stroke-dashoffset 1.2s var(--veer) .45s; }
.pa-balk:not(.is-open) .mk-deck__trek { stroke-dashoffset: 1; }
.mk-deck__vlak, .mk-deck__lijn circle { transition: opacity .6s ease 1.1s; }
.pa-balk:not(.is-open) .mk-deck__vlak, .pa-balk:not(.is-open) .mk-deck__lijn circle { opacity: 0; transition-delay: 0s; }

.mk-deck__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mk-deck__mini {
  position: relative; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden;
  background: #F1EADF; opacity: .55; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.mk-deck__mini--nu { opacity: 1; box-shadow: 0 0 0 2px #E8672C; }
.mk-deck__mini--titel { background: linear-gradient(135deg, #1B2230, #2A1A14); }
.mk-deck__mini--titel::before { content: ""; position: absolute; left: 14%; top: 38%; width: 56%; height: 12%; border-radius: 2px; background: #F6F1E8; box-shadow: 0 9px 0 -3px rgba(246, 241, 232, .4); }
.mk-deck__mini--nu::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 18%; height: 34%; background: linear-gradient(170deg, transparent 48%, rgba(217, 84, 31, .9) 50%, rgba(217, 84, 31, .9) 56%, rgba(217, 84, 31, .18) 58%); clip-path: polygon(0 80%, 30% 62%, 60% 48%, 100% 0, 100% 100%, 0 100%); }
.mk-deck__mini--foto { background: linear-gradient(160deg, #2E6B5A, #12A0BB 60%, #E8B97A); }
.mk-deck__mini--foto::before { content: ""; position: absolute; left: 12%; bottom: 14%; width: 44%; height: 10%; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.mk-deck__mini--slot { background: #D9541F; }
.mk-deck__mini--slot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40%; height: 12%; translate: -50% -50%; border-radius: 2px; background: #FBF7F0; }

/* uitzoekwerk: vraag als chatbubbel, antwoord met bronnen */
.mk-zoek { width: min(380px, 100%); display: grid; gap: 12px; }
.mk-zoek__vraag {
  justify-self: end; max-width: 82%; padding: 11px 14px; border-radius: 16px 16px 4px 16px;
  font-size: 14px; line-height: 1.35; color: #14181F; background: #F3F2EF;
}
.mk-zoek__antwoord {
  display: grid; gap: 9px; padding: 16px 18px; border-radius: 16px 16px 16px 4px;
  background: #1A1F27; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
}
.mk-zoek__antwoord strong { font-size: 14.5px; line-height: 1.35; margin-bottom: 2px; }
.mk-zoek__bronnen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mk-zoek__bronnen i {
  font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
  color: #C79BE6; background: rgba(156, 99, 196, .16); border: 1px solid rgba(156, 99, 196, .35);
}

/* vaste taken: een lijstje met tijden, de bovenste open */
.mk-taken { width: min(360px, 100%); display: grid; gap: 8px; }
.mk-taken__rij {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.mk-taken__rij--open {
  padding: 16px 14px; background: #1A1F27; border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8);
}
.mk-taken__tijd { font-size: 12px; font-weight: 650; color: #7FD3E2; font-variant-numeric: tabular-nums; }
.mk-taken__wat { display: grid; gap: 4px; min-width: 0; }
.mk-taken__wat b { font-size: 14px; font-weight: 650; color: #F3F2EF; }
.mk-taken__wat span { font-size: 12.5px; line-height: 1.35; color: #A9AAAD; }
.mk-taken__vink {
  font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: 999px;
  color: #8FDCA8; background: rgba(60, 180, 110, .14); border: 1px solid rgba(60, 180, 110, .32);
}
.mk-taken__vink--straks { color: #A9AAAD; background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }

/* tweede controleur: genummerde tips in het antwoord */
.mk-tips { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 13px; line-height: 1.4; color: #C9CCD1; }
.mk-tips li::marker { color: #C79BE6; font-weight: 700; }

/* foto: de vraag in de chat, de foto komt terug */
.mk-foto__antwoord { justify-self: start; padding: 8px; }
.mk-foto__antwoord img { display: block; width: min(150px, 46vw); aspect-ratio: 720 / 894; height: auto; border-radius: 10px; object-fit: cover; }
.mk-foto__antwoord .mk-klein { padding: 2px 4px 2px; }

/* podcast: gewoon een mp3-bestand in het antwoord */
.mk-zoek__antwoord > span:first-child:not(.mk-klein) { font-size: 14px; line-height: 1.35; color: #C9CCD1; }
.mk-mp3 {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.mk-mp3__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: #C9CCD1; background: rgba(255, 255, 255, .08); }
.mk-mp3__naam { font-size: 13.5px; font-weight: 600; color: #F3F2EF; }
.mk-mp3__naam .mk-klein { margin-top: 2px; font-weight: 500; }

/* ---------- 4. grenzen ---------- */
.pa-zone--zacht { background: var(--opp-2); }
.pa-zone--zacht::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 0%, var(--pa-blauw-gloed), transparent 70%);
}
.pa-zone--zacht .pa-wrap { position: relative; }
.pa-grens {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px);
  text-align: center;
}
.pa-grens li { display: grid; align-content: start; justify-items: center; gap: 10px; }
.pa-grens b { margin-top: 8px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.015em; }
.pa-grens span:last-child { max-width: 28ch; font-size: 16px; line-height: 1.45; color: var(--tekst-2); }

/* ---------- 5. Bob ---------- */
.pa-bob {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end;
  padding: clamp(36px, 5vw, 72px); border-radius: clamp(22px, 2vw, 32px); overflow: hidden;
  background:
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--roest) 26%, transparent), transparent 55%),
    radial-gradient(80% 90% at 0% 0%, color-mix(in srgb, var(--serie-4) 12%, transparent), transparent 60%),
    var(--opp);
  border: 1px solid var(--lijn-2);
}
.pa-bob__tekst { display: grid; gap: 16px; }
.pa-bob h2 { font-size: clamp(32px, 4vw, 54px); }
.pa-bob p:not(.pa-label) { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--tekst-2); max-width: 42ch; }
.pa-bob__adres {
  justify-self: end; display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(17px, 1.7vw, 22px); font-weight: 650; letter-spacing: -.02em; text-decoration: none;
  padding: 16px 24px; border-radius: var(--r-vol); background: var(--vlak); border: 1px solid var(--roest-rand);
  color: var(--tekst); transition: border-color .3s var(--veer), translate .3s var(--veer), color .3s var(--veer);
}
.pa-bob__adres svg { color: var(--roest-tekst); }
.pa-bob__adres:hover { border-color: var(--roest); color: var(--roest-tekst); translate: 0 -2px; }
.pa-bob__adres:focus-visible { outline: 2px solid var(--roest); outline-offset: 3px; }

/* ---------- 6. slot ---------- */
/* .pa-slot en .pa-slot__knop: niet meer gebruikt sinds concept 8 */
.pa-slot { padding-top: 0; }
.pa-slot__knop { text-align: center; }

/* ---------- smaller ---------- */
@media (max-width: 900px) {
  .pa-grens { grid-template-columns: minmax(0, 1fr); }
  .pa-bob { grid-template-columns: minmax(0, 1fr); }
  .pa-bob__adres { justify-self: start; }
}
@media (max-width: 760px) {
  .pa-kop { padding-top: 104px; }
  .pa-kop__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pa-filmkolom { width: min(300px, 76vw); }
  .pa-film { border-radius: 20px; }
  .pa-kop::before { background: radial-gradient(60% 40% at 30% 20%, var(--pa-roest-gloed), transparent 70%); }
}
@media (max-width: 520px) {
  .pa-ico { width: 36px; height: 36px; }
  .pa-bob__adres { font-size: 16px; padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pa-film video, .pa-film__opnieuw { display: none; }
  .pa-balk, .pa-balk::before, .pa-balk::after, .pa-balk__knop > *, .pa-balk__beeld, .pa-balk__info,
  .pa-balk .mk-deck__trek, .mk-deck__vlak, .mk-deck__lijn circle { transition: none !important; }
  .pa-link svg, .pa-bob__adres { transition: none; }
}
:root[data-beweging="stil"] .pa-film video, :root[data-beweging="stil"] .pa-film__opnieuw { display: none; }
@media (max-width: 640px) { .mk-foto__antwoord img { width: min(180px, 46vw); } }
:root[data-beweging="stil"] .pa-balk, :root[data-beweging="stil"] .pa-balk::before, :root[data-beweging="stil"] .pa-balk::after, :root[data-beweging="stil"] .pa-balk__beeld, :root[data-beweging="stil"] .pa-balk__info, :root[data-beweging="stil"] .pa-balk .mk-deck__trek { transition: none !important; }

.pa-balk__noot { max-width: 44ch; font-size: 13px; line-height: 1.45; color: #8E939B; }

/* ============================================================================
   Concept 8 (7 okt 2026): drie probeersels bovenop concept 7.
   ========================================================================== */

/* a. bij "Je overleggen" een linkje naar de telefoon */
.koppel__zie {
  justify-self: start; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--roest-tekst); text-decoration: none;
}
.koppel__kaart .koppel__zie svg { margin: 0; transform: none; transition: translate .3s var(--veer); }
.koppel__zie:hover { text-decoration: underline; text-underline-offset: 3px; }
.koppel__zie:hover svg { translate: 0 2px; }
.koppel__zie:focus-visible { outline: 2px solid var(--roest); outline-offset: 3px; border-radius: 4px; }

/* b. de drie antwoorden in de telefoon zijn knoppen */
.bericht__antwoord button {
  font: inherit; cursor: pointer; background: none;
  border: 1px solid var(--lijn-2); border-radius: var(--r-vol);
  padding: 6px 15px; font-size: 13.5px; color: var(--tekst-2);
  transition: border-color .25s var(--veer), color .25s var(--veer), translate .25s var(--veer);
}
.bericht__antwoord button:first-child { border-color: var(--roest); color: var(--roest-tekst); font-weight: 650; }
.bericht__antwoord button:hover { border-color: var(--roest); color: var(--roest-tekst); translate: 0 -1px; }
.bericht__antwoord button:focus-visible { outline: 2px solid var(--roest); outline-offset: 2px; }
.bericht__antwoord[hidden] { display: none; }

/* wat er na een tik bij komt */
.bericht__vervolg > * { animation: regel-in .45s var(--veer) both; opacity: 0; translate: 0 8px; filter: blur(3px); }
.bericht__ik {
  width: fit-content; max-width: 80%; margin: 14px 0 0 auto;
  padding: 7px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--roest-knop); color: var(--tekst-op-roest); font-size: 14px; font-weight: 600;
}
.bericht__zin { font-size: 14.5px; line-height: 1.5; margin-top: 11px; }
.bericht__zin b { font-weight: 650; color: var(--roest-tekst); }
.bericht__typt { display: inline-flex; gap: 4px; margin-top: 12px; padding: 9px 12px; border-radius: 14px; background: var(--opp); }
.bericht__typt i { width: 6px; height: 6px; border-radius: 50%; background: var(--tekst-3); animation: typt 1s ease-in-out infinite; }
.bericht__typt i:nth-child(2) { animation-delay: .15s; }
.bericht__typt i:nth-child(3) { animation-delay: .3s; }
@keyframes typt { 0%, 60%, 100% { opacity: .35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
.bericht__stap { display: flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 13.5px; color: var(--tekst-2); }
.bericht__stap::before {
  content: "✓"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 700; background: var(--roest-zacht); color: var(--roest-tekst); border: 1px solid var(--roest-rand);
}
.bericht__tabel { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bericht__tabel td { padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.bericht__tabel td:nth-child(2), .bericht__tabel td:nth-child(3) { text-align: right; }
.bericht__tabel td:nth-child(3) { width: 4.5em; font-weight: 650; }
.bericht__tabel .is-nu td { color: var(--tekst-3); }
.bericht__tabel .is-beter td:nth-child(3) { color: var(--roest-tekst); }
.bericht__opnieuw {
  display: block; margin: 16px auto 0; font: inherit; font-size: 12.5px; color: var(--tekst-3);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.bericht__opnieuw:hover { color: var(--roest-tekst); }

@media (prefers-reduced-motion: reduce) {
  .bericht__vervolg > *, .bericht__typt i { animation: none !important; opacity: 1; translate: none; filter: none; }
}
:root[data-beweging="stil"] .bericht__vervolg > *, :root[data-beweging="stil"] .bericht__typt i { animation: none !important; opacity: 1; translate: none; filter: none; }

/* c. "Neem contact op" als kleinere balk onder die van Bob, met een koele gloed */
.pa-bob--klein {
  margin-top: 18px; align-items: center; gap: 24px;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 4vw, 56px);
  background:
    radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--serie-2) 18%, transparent), transparent 55%),
    var(--opp);
}
.pa-bob--klein .pa-bob__tekst { gap: 6px; }
.pa-bob--klein h2 { font-size: clamp(24px, 2.6vw, 34px); }
.pa-bob--klein p:not(.pa-label) { font-size: 16px; }
.pa-bob--klein .pa-bob__adres { font-size: clamp(15px, 1.3vw, 18px); padding: 12px 20px; }