/* De productdemo op de homepage: het intakescherm en de werkvoorbereiding
   zoals ze in het product staan, het klantportaal in de live-stand, en de
   beweging eromheen (de camera, de plek achter de telefoon, de mail, het
   versturen, de bus naar huis). Uit ronde 9 (.impeccable/mocks/ronde9/),
   op 9 oktober 2026 overgenomen met de keuzes van Nathan: alles aan, en
   alleen de inhoud van de pagina, zonder de zijbalk en de topbalk van de
   app. Wordt alleen op de homepage geladen, na product.css; schermen.js
   hoort erbij. */


/* ══ Het intakescherm (intake.html in ronde 9) ══════════════════ */
/* Ronde 9: het intakescherm zoals het in het product staat (intake.html).
   Maten: 1em is 14px in het product, op een scherm van 1728 breed (een
   16-inch MacBook). Het venster is .pwin, met container-type inline-size,
   dus .81cqw is precies die 14px op schaal. Kleuren uit apps/web
   tailwind.config.ts en globals.css: navy #1E2A45, offwhite #FFFDF8,
   paper #F9F7F2, line #EAE8E2, line-2 #D9D6CE, muted #6B7280,
   orange #F57C00, teal #2EC4B6. In rust staat het eindbeeld; de tijdlijn
   (14s) staat onderaan, in procenten. */

.pwin--intake { --vanaf: 0s; }
/* de knop rechtsonder: rechtsboven ligt hier de topbalk met zoeken en de bel */
.pwin--intake .pwin__replay { top: auto; bottom: 2.6em; right: 14px; }

.ie {
  font-size: .81cqw;
  font-family: var(--font-body);
  color: #1E2A45;
  background: #F9F7F2;
  line-height: 1.4;
}
.ie svg.li { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── de zijbalk (220px), maten naar de schermafbeelding van 6 oktober ── */
.ie-side {
  flex: 0 0 15.71em;
  display: flex;
  flex-direction: column;
  gap: .43em;
  padding: 1.15em .75em 1.3em;
  background: #1E2A45;
  color: rgba(255, 253, 248, .62);
}
.ie-side__logo { display: flex; align-items: center; justify-content: space-between; padding: 0 .4em .9em .2em; }
.ie-side__logo img { height: 2.3em; width: auto; }
.ie-side__logo i { display: inline-flex; color: rgba(255, 253, 248, .55); font-size: 1em; }
.ie-nav { display: flex; align-items: center; gap: .85em; height: 2.75em; padding: 0 .9em; border-radius: .71em; font-size: .964em; font-weight: 500; }
.ie-nav svg.li { width: 1.45em; height: 1.45em; stroke-width: 1.75; }
.ie-nav.is-now { color: #2EC4B6; background: rgba(46, 196, 182, .2); }
.ie-nav--sub { padding-left: 2.85em; }
.ie-nav--sub svg.li { width: 1.3em; height: 1.3em; }
.ie-side__lijn { height: 1px; margin: .35em 0; background: rgba(255, 253, 248, .14); }
.ie-side__rest { flex: 1 1 auto; }

/* ── de topbalk (h-14) ── */
.ie-kolom { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ie-top {
  flex: 0 0 4em;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0 1.14em;
  border-bottom: 1px solid #EAE8E2;
  background: #F9F7F2;
}
.ie-org { display: inline-flex; align-items: center; gap: .55em; font-size: .93em; font-weight: 600; }
.ie-org b { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: .45em; background: #1E2A45; color: #FFFDF8; font-size: .75em; letter-spacing: .02em; }
.ie-terug { display: inline-flex; align-items: center; gap: .45em; padding: .45em .85em; border: 1px solid #EAE8E2; border-radius: .57em; background: #FFFDF8; font-size: .93em; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.ie-top__rechts { margin-left: auto; display: flex; align-items: center; gap: .9em; }
.ie-zoek { display: inline-flex; align-items: center; gap: .5em; width: 17em; padding: .5em .8em; border: 1px solid #EAE8E2; border-radius: .57em; background: #FFFDF8; color: #6B7280; font-size: .93em; }
.ie-bel { display: inline-flex; color: #45464D; font-size: 1.3em; }
.ie-av { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #FFE3C2; color: #A35200; font-size: .8em; font-weight: 700; }
.ie-av--klein { width: 1.9em; height: 1.9em; font-size: .72em; }

/* ── de pagina (px-10 py-10, gap-5) ── */
.ie-pagina { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1.43em; padding: 2.86em; }
.ie-kaart { border: 1px solid #EAE8E2; border-radius: 1.14em; background: #FFFDF8; }

/* kopkaart */
.ie-kop { display: flex; justify-content: space-between; gap: 2em; padding: 1.29em 1.57em; }
.ie-naam { margin: 0; font-family: var(--font-display); font-size: 2.43em; line-height: 1.18; font-weight: 600; letter-spacing: -.02em; }
.ie-meta { margin: .35em 0 0; font-size: .964em; color: #6B7280; }
.ie-meta b { color: #1E2A45; font-weight: 600; display: inline-flex; align-items: center; gap: .35em; }
.ie-meta b svg.li { width: .85em; height: .85em; color: #6B7280; }
.ie-badges { position: relative; display: flex; align-items: center; gap: .5em; margin: .8em 0 0; }
.ie-badge { display: inline-flex; align-items: center; gap: .4em; padding: .3em .75em; border-radius: 999px; border: 1px solid; font-size: .786em; font-weight: 600; }
.ie-badge i { width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ie-badge--loopt { background: #EAFAF7; color: #0C7C6E; border-color: #BEEDE5; }
.ie-pot { display: inline-flex; align-items: center; gap: .4em; padding: .3em .75em; border-radius: 999px; border: 1px solid; font-size: .786em; font-weight: 600; }
.ie-pot--bepalen { position: absolute; left: 4.9em; background: #F9F7F2; color: #6B7280; border-color: #EAE8E2; opacity: 0; }
.ie-pot--hoog { background: #E9F8EC; color: #15803D; border-color: #BDE8C6; }
.ie-pot svg.li { width: 1em; height: 1em; }
.ie-kop__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .7em; }
.ie-meer { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: .57em; color: #45464D; font-size: 1.1em; }
.ie-toegewezen { display: inline-flex; align-items: center; gap: .5em; font-size: .93em; font-weight: 500; }
.ie-herkomst { font-size: .82em; color: #6B7280; }

/* fasebalk */
.ie-fase { display: flex; align-items: center; gap: 1.5em; padding: .86em 1.71em; }
.ie-rond { display: grid; place-items: center; width: 2.57em; height: 2.57em; border-radius: 50%; border: 1px solid #EAE8E2; background: #F9F7F2; color: #45464D; font-size: 1em; }
.ie-fase__midden { flex: 1 1 auto; }
.ie-fase__titel { margin: 0; text-align: center; font-size: 1em; }
.ie-fase__titel b { font-family: var(--font-display); font-weight: 600; color: #F57C00; }
.ie-fase__titel span { font-size: .786em; color: #6B7280; margin-left: .3em; }
.ie-weg { position: relative; height: 5.86em; margin: 0 3.5em; }
.ie-weg__lijn { position: absolute; left: 0; right: 0; top: 2.6em; height: .29em; border-radius: 9px; background: repeating-linear-gradient(90deg, #D9D6CE 0 .9em, transparent .9em 1.5em); }
.ie-stop { position: absolute; left: var(--x); top: 2.42em; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .6em; }
.ie-stop i { width: .64em; height: .64em; border-radius: 50%; background: #D9D6CE; }
.ie-stop em { font-style: normal; font-size: .786em; color: #6B7280; white-space: nowrap; }
.ie-stop.is-nu i { background: #F57C00; box-shadow: 0 0 0 .3em rgba(245, 124, 0, .18); }
.ie-stop.is-nu em { color: #F57C00; font-weight: 600; }
.ie-bus { position: absolute; left: 0; top: .1em; width: 4em; translate: -50% 0; color: #1E2A45; }

/* ── twee kolommen (1fr 340px) ── */
.ie-lijf { display: grid; grid-template-columns: minmax(0, 1fr) 24.29em; gap: 1.43em; align-items: start; }

/* woningprofiel-kaart (rounded-xl) */
.ie-wp { position: relative; border: 1px solid #EAE8E2; border-radius: 1.43em; background: #FFFDF8; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); overflow: hidden; }
.ie-live { position: relative; overflow: hidden; display: flex; align-items: center; gap: .65em; padding: .55em 1.43em; border-bottom: 1px solid #FCD5AD; background: #FEEBD6; font-size: .893em; max-height: 3em; opacity: 0; }
.ie-live b { font-family: var(--font-display); font-weight: 600; }
.ie-live span:last-child { font-size: .92em; color: #6B7280; }
.ie-live__ster { color: #F57C00; font-family: var(--font-display); font-weight: 900; }
.ie-live__glans { position: absolute; inset: 0 auto 0 -33%; width: 33%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }

.ie-wp__balk { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em 1.43em .2em; }
.ie-tabs { display: flex; gap: .55em; }
.ie-tab { display: inline-flex; align-items: center; gap: .45em; padding: .5em 1em; border-radius: 999px; border: 1px solid #EAE8E2; background: #F9F7F2; font-size: .929em; color: #1E2A45; }
.ie-tab.is-aan { border-color: #F57C00; background: #FEEBD6; }
.ie-tab i { width: .45em; height: .45em; border-radius: 50%; background: #F57C00; }
.ie-tab svg.li { width: 1.1em; height: 1.1em; stroke-width: 1.75; }
.ie-wp__knoppen { display: flex; gap: .5em; }
.ie-ghost { display: inline-flex; align-items: center; gap: .45em; padding: .45em .9em; border: 1px solid #D9D6CE; border-radius: .57em; font-size: .893em; font-weight: 500; }

/* de held: beelden links, AI rechts */
.ie-held { display: grid; grid-template-columns: 32em minmax(0, 1fr); gap: 1.14em; padding: 1em 1.43em 0; }
.ie-beeld__vak { position: relative; height: 21.4em; border-radius: .86em; overflow: hidden; background: #EAE8E2; }
.ie-beeld__vak img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ie-beeld__leeg { position: absolute; inset: 0; z-index: 1; background: #EAE8E2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; color: #6B7280; font-size: .893em; opacity: 0; }
.ie-beeld__leeg svg.li { width: 2em; height: 2em; }
.ie-beeld__zuid { opacity: 0; }
.ie-pil { position: absolute; left: .85em; top: .85em; display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .68em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ie-pil--zuid { opacity: 0; }
.ie-groot { position: absolute; right: .85em; top: .85em; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.ie-pijl { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2.57em; height: 2.57em; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.05em; }
.ie-pijl--l { left: .85em; } .ie-pijl--r { right: .85em; }
.ie-onder { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 2.5em 1em .8em; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); color: #fff; }
.ie-onder b { font-family: var(--font-display); font-size: .93em; font-weight: 600; }
.ie-onder span { font-size: .786em; opacity: .7; }
.ie-strip { display: flex; gap: .4em; margin-top: .55em; }
.ie-duim { height: 3.14em; width: 4em; object-fit: cover; border-radius: .4em; border: 1.5px solid transparent; }
.ie-duim--zuid { border-color: #F57C00; box-shadow: 0 0 0 1px #F57C00; }

/* AI-paneel (brand-tint) */
.ie-ai { display: flex; flex-direction: column; padding: 1.14em 1.29em 1em; border: 1px solid #FCD5AD; border-radius: .86em; background: #FEEBD6; }
.ie-ai__kop { display: flex; gap: .7em; margin-bottom: .85em; }
.ie-ai__ic { display: grid; place-items: center; flex: 0 0 2em; height: 2em; border-radius: 50%; background: rgba(245, 124, 0, .12); color: #F57C00; }
.ie-ai__t { margin: 0; display: flex; align-items: center; gap: .7em; }
.ie-ai__t b { font-family: var(--font-display); font-size: 1.143em; font-weight: 600; }
.ie-score { padding: .15em .7em; border-radius: 999px; border: 1px solid rgba(46, 196, 182, .2); background: rgba(46, 196, 182, .1); color: #2EC4B6; font-size: .786em; font-weight: 600; letter-spacing: .02em; }
.ie-lbl { margin: 0; font-size: .786em; font-weight: 600; color: #6B7280; text-transform: uppercase; letter-spacing: .06em; }
.ie-lbl--t { display: flex; align-items: center; gap: .4em; margin-bottom: .5em; color: #1E2A45; }
.ie-lbl--t svg.li { color: #2EC4B6; }
.ie-lbl--r { margin-top: 1em; }
.ie-lbl--r svg.li { color: #F57C00; }
.ie-ai__leeg { margin: 0; font-size: .929em; color: #6B7280; opacity: 0; }
.ie-ai__vol { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.3em; flex: 1 1 auto; }
.ie-ai ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5em; font-size: .893em; line-height: 1.5; }
.ie-ai li { position: relative; padding-left: 1.1em; }
.ie-punten li::before, .ie-tips li::before, .ie-risico li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45em; height: .45em; border-radius: 50%; background: #F57C00; }
.ie-tips li::before { background: #2EC4B6; width: .32em; height: .32em; }
.ie-ai__voet { display: flex; flex-wrap: wrap; align-items: center; gap: .3em 1em; margin: .9em 0 0; padding-top: .7em; border-top: 1px solid #FCD5AD; font-size: .75em; color: #6B7280; }
.ie-ai__voet b { display: inline-flex; align-items: center; gap: .3em; color: #F57C00; }

/* veldgroep Woning (grid 3 kolommen, waarde font-display 15px) */
.ie-velden { padding: 1.29em 1.43em 1.43em; }
.ie-velden__t { margin: 0 0 .7em; font-family: var(--font-display); font-weight: 600; font-size: 1.07em; }
.ie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em 1.4em; }
.ie-veld { display: flex; flex-direction: column; gap: .25em; }
.ie-w { position: relative; display: block; height: 1.6em; font-family: var(--font-display); font-weight: 600; font-size: 1.07em; }
.ie-w__leeg, .ie-w__vol { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
.ie-w__leeg { color: #6B7280; opacity: 0; }
.ie-w__leeg em { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: .8em; }
.ie-bron { display: inline-flex; font-size: .85em; }
.ie-bron--ai { color: #F57C00; font-weight: 900; }
.ie-bron--crm { color: #1F4E96; }
.ie-label { display: inline-grid; place-items: center; min-width: 1.6em; padding: .05em .4em; border-radius: .3em; background: #C5D92B; color: #1a1a1a; font-size: .9em; }

/* ── de kolom Taken (border-2 oranje, sticky) ── */
.ie-taken { position: relative; padding: 1.29em; border: 2px solid rgba(245, 124, 0, .6); border-radius: 1.14em; background: #FFFDF8; box-shadow: 0 4px 12px rgba(15, 23, 42, .07); }
.ie-taken__kop { display: flex; align-items: center; gap: .6em; margin: 0; }
.ie-taken__kop b { font-family: var(--font-display); font-size: 1.214em; font-weight: 600; }
.ie-open { padding: .15em .65em; border-radius: 999px; background: rgba(245, 124, 0, .1); color: #F57C00; font-size: .786em; font-weight: 600; }
.ie-open--6, .ie-open--5 { display: none; }
.ie-taken__sub { margin: .15em 0 .9em; font-size: .857em; color: #6B7280; }
.ie-stand { display: flex; flex-direction: column; gap: .57em; }
.ie-stand--1, .ie-stand--2 { position: absolute; left: 1.29em; right: 1.29em; top: 4.5em; opacity: 0; }
.ie-klaar { display: flex; align-items: center; gap: .4em; margin: 0; font-size: .82em; color: #6B7280; }
.ie-taak { display: grid; grid-template-columns: 1.71em 1fr auto; align-items: center; gap: .7em; padding: .78em .86em; border: 1px solid #EAE8E2; border-radius: .86em; background: #FFFDF8; font-size: .964em; }
.ie-taak p { margin: 0; font-weight: 500; line-height: 1.3; }
.ie-taak .ie-taak__sub { margin-top: .25em; font-size: .85em; font-weight: 400; color: #6B7280; }
.ie-taak.is-loopt .ie-taak__sub { color: #2EC4B6; font-weight: 600; }
.ie-taak.is-straks { opacity: .6; }
.ie-taak.is-actie { background: #FEF3E6; border-color: #FCD5AD; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.ie-taak--blok { display: block; }
.ie-taak__rij { display: grid; grid-template-columns: 1.71em 1fr; gap: .7em; }
.ie-taak__acties { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; margin-top: .7em; padding-left: 2.4em; }
.ie-taak__acties .ie-wie { margin-left: auto; }
.ie-mark { display: grid; place-items: center; width: 1.57em; height: 1.57em; border-radius: 50%; border: 1.5px solid #D9D6CE; font-size: .9em; }
.ie-mark--loopt { border-color: #2EC4B6; background: #E3F8F5; }
.ie-mark--loopt i { width: .85em; height: .85em; border-radius: 50%; border: 2px solid rgba(46, 196, 182, .25); border-top-color: #2EC4B6; animation: ie-draai .9s linear infinite; }
.ie-mark--actie { border: 0; background: #F57C00; color: #fff; font-weight: 800; font-size: .8em; }
@keyframes ie-draai { to { rotate: 360deg; } }
.ie-wie { padding: .2em .6em; border-radius: 999px; background: #F9F7F2; color: #6B7280; font-size: .75em; font-weight: 500; }
.ie-knop { position: relative; display: inline-flex; align-items: center; gap: .4em; padding: .5em .95em; border-radius: .57em; background: #F57C00; color: #fff; font-size: .893em; font-weight: 600; }
.ie-knop--uit { opacity: .5; }
.ie-ghost--ic svg.li { width: 1.05em; height: 1.05em; }
.ie-taken__voet { margin: 1em 0 0; display: flex; }
.ie-taak .tap { left: 50%; top: 50%; }


/* ── de tijdlijn: 10 seconden (was 14; Nathan: "sneller") ──── *
   0 de live-strook, velden leeg · 0,8 Street View komt binnen, de
   filmstrip vult zich · 1,8–4 de velden van de woning, een voor een,
   met hun bron · 4,8 verrijken klaar, lead-potentie scoren · 5,6 schuine
   luchtfoto Zuid · 6,2 de AI-analyse · 7,6 Hoog potentieel, de volgende
   taak: de klant uitnodigen · 8,8 tik op Bekijken & versturen.       */
.pwin--intake.is-playing .ie-live { animation: ie-live 10s linear both; }
.pwin--intake.is-playing .ie-live__glans { animation: ie-glans 1.6s linear infinite; }
.pwin--intake.is-playing .ie-beeld__leeg { animation: ie-leeg 10s linear both; }
.pwin--intake.is-playing .ie-beeld__straat,
.pwin--intake.is-playing .ie-pil--straat,
.pwin--intake.is-playing .ie-onder { animation: ie-straat 10s linear both; }
.pwin--intake.is-playing .ie-beeld__zuid,
.pwin--intake.is-playing .ie-pil--zuid { animation: ie-zuid 10s linear both; }
.pwin--intake.is-playing .ie-duim { animation: ie-duim 10s linear both; animation-delay: calc(var(--d) * .18s); }
.pwin--intake.is-playing .ie-duim--straat { animation: ie-duim 10s linear both, ie-ring-straat 10s linear both; }
.pwin--intake.is-playing .ie-duim--zuid { animation: ie-duim 10s linear both, ie-ring-zuid 10s linear both; animation-delay: .54s, 0s; }
.pwin--intake.is-playing .ie-w__leeg { animation: ie-veld-leeg 10s linear both; animation-delay: calc(var(--d) * .54s); }
.pwin--intake.is-playing .ie-w__vol { animation: ie-veld-vol 10s linear both; animation-delay: calc(var(--d) * .54s); }
.pwin--intake.is-playing .ie-ai__leeg { animation: ie-ai-leeg 10s linear both; }
.pwin--intake.is-playing .ie-ai__vol,
.pwin--intake.is-playing .ie-score,
.pwin--intake.is-playing .ie-ai__voet { animation: ie-ai-vol 10s linear both; }
.pwin--intake.is-playing .ie-ai li { animation: ie-ai-punt 10s linear both; animation-delay: calc(var(--d) * .14s); }
.pwin--intake.is-playing .ie-pot--bepalen { animation: ie-bepalen 10s linear both; }
.pwin--intake.is-playing .ie-pot--hoog { animation: ie-hoog 10s linear both; }
.pwin--intake.is-playing .ie-stand--1 { animation: ie-stand1 10s linear both; }
.pwin--intake.is-playing .ie-stand--2 { animation: ie-stand2 10s linear both; }
.pwin--intake.is-playing .ie-stand--3 { animation: ie-stand3 10s linear both; }
.pwin--intake.is-playing .ie-open--6 { display: inline; animation: ie-open6 10s linear both; }
.pwin--intake.is-playing .ie-open--5 { display: inline; animation: ie-open5 10s linear both; }
.pwin--intake.is-playing .ie-open--4 { animation: ie-open4 10s linear both; }
.pwin--intake.is-playing .ie-taak .tap { animation: ie-tap 10s linear both; }
.pwin--intake.is-playing .ie-knop:not(.ie-knop--uit) { animation: ie-druk 10s linear both; }

@keyframes ie-live { 0%, 46% { opacity: 1; max-height: 3em; } 49%, 100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-width: 0; } }
@keyframes ie-glans { from { translate: 0 0; } to { translate: 400% 0; } }
@keyframes ie-leeg { 0%, 7% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes ie-straat { 0%, 7% { opacity: 0; } 11%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes ie-zuid { 0%, 54% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes ie-duim { 0%, 9% { opacity: 0; scale: .8; } 12%, 100% { opacity: 1; scale: 1; } }
@keyframes ie-ring-straat { 0%, 54% { border-color: #F57C00; box-shadow: 0 0 0 1px #F57C00; } 56%, 100% { border-color: transparent; box-shadow: none; } }
@keyframes ie-ring-zuid { 0%, 54% { border-color: transparent; box-shadow: none; } 56%, 100% { border-color: #F57C00; box-shadow: 0 0 0 1px #F57C00; } }
@keyframes ie-veld-leeg { 0%, 17% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes ie-veld-vol { 0%, 17% { opacity: 0; translate: 0 .3em; } 20%, 100% { opacity: 1; translate: 0 0; } }
@keyframes ie-ai-leeg { 0%, 60% { opacity: 1; } 62%, 100% { opacity: 0; height: 0; } }
@keyframes ie-ai-vol { 0%, 61% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes ie-ai-punt { 0%, 62% { opacity: 0; translate: 0 .4em; } 65%, 100% { opacity: 1; translate: 0 0; } }
@keyframes ie-bepalen { 0%, 48% { opacity: 0; } 50%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes ie-hoog { 0%, 75% { opacity: 0; scale: .85; } 77% { opacity: 1; scale: 1.06; } 78.5%, 100% { opacity: 1; scale: 1; } }
@keyframes ie-stand1 { 0%, 47% { opacity: 1; } 50%, 100% { opacity: 0; visibility: hidden; } }
@keyframes ie-stand2 { 0%, 47% { opacity: 0; } 50%, 74% { opacity: 1; } 77%, 100% { opacity: 0; visibility: hidden; } }
@keyframes ie-stand3 { 0%, 74% { opacity: 0; } 77%, 100% { opacity: 1; } }
@keyframes ie-open6 { 0%, 48% { opacity: 1; } 48.1%, 100% { opacity: 0; position: absolute; } }
@keyframes ie-open5 { 0%, 48% { opacity: 0; position: absolute; } 48.1%, 75% { opacity: 1; position: static; } 75.1%, 100% { opacity: 0; position: absolute; } }
@keyframes ie-open4 { 0%, 75% { opacity: 0; position: absolute; } 75.1%, 100% { opacity: 1; position: static; } }
@keyframes ie-tap { 0%, 86% { opacity: 0; scale: .4; } 88% { opacity: 1; scale: 1; } 91%, 100% { opacity: 0; scale: 1.5; } }
@keyframes ie-druk { 0%, 87.5% { scale: 1; } 88% { scale: .97; } 89.5%, 100% { scale: 1; } }

/* de cursor: glijdt van rechtsonder naar "Bekijken & versturen" en klikt
   (daarna schakelt de demo door naar de klantuitvraag).
   Groot genoeg om te zien op een venster dat kleiner is dan een scherm,
   met een witte rand en een golf bij de klik. */
.ie-muis { position: absolute; left: 58%; top: 48%; width: 3.4em; height: 3.4em; pointer-events: none; opacity: 0; filter: drop-shadow(0 .25em .45em rgba(15, 26, 45, .45)); z-index: 3; }
.ie-golf { position: absolute; left: 58%; top: 48%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: .25em solid #F57C00; opacity: 0; pointer-events: none; z-index: 2; }
.pwin--intake.is-playing .ie-muis { animation: ie-muis 10s linear both; }
.pwin--intake.is-playing .ie-golf { animation: ie-golf 10s linear both; }
@keyframes ie-muis {
  0%, 78% { opacity: 0; translate: 10em 8em; }
  80% { opacity: 1; translate: 10em 8em; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  87% { opacity: 1; translate: 0 0; scale: 1; }
  88% { scale: .82; }
  89.5%, 96% { opacity: 1; translate: 0 0; scale: 1; }
  100% { opacity: 0; translate: 0 0; }
}
@keyframes ie-golf { 0%, 87.8% { opacity: 0; scale: .3; } 88.5% { opacity: .9; scale: .6; } 92%, 100% { opacity: 0; scale: 1.8; } }

@media (prefers-reduced-motion: reduce) {
  .pwin--intake.is-playing .ie *, .pwin--intake.is-playing .ie *::before { animation: none !important; }
}


/* ══ De werkvoorbereiding (wvb.html in ronde 9) ══════════════════ */
/* Ronde 9: de werkvoorbereiding zoals hij op main staat (wvb.html).
   De schil (zijbalk, topbalk, fasebalk, de kolom Taken) komt uit
   intake.css (.ie-*); hier staat de sectie zelf, de twee dialogen en de
   tijdlijn. 1em is 14px in het product. Kleuren uit apps/web: de
   status-groep (failed #FEECEB/#B42318/#FBC8C4, completed
   #E9F8EC/#15803D/#BDE8C6), brand-tint #FEEBD6, brand-tint-soft #FEF3E6,
   brand-tint-border #FCD5AD. In rust staat het eindbeeld. */

.pwin--wb { --vanaf: 0s; }
.pwin--wb .pwin__replay { top: auto; bottom: 2.6em; right: 14px; }
.wb { position: relative; }
.wb svg.li { width: 1em; height: 1em; }

/* een stapel: kinderen op dezelfde plek, de hoogste bepaalt de maat */
.wb-stapel { display: grid; }
.wb-stapel > * { grid-area: 1 / 1; }
.wb-wissel { display: inline-grid; }
.wb-wissel > * { grid-area: 1 / 1; }
/* in- en uitklappen zonder vaste hoogte */
.wb-klap { display: grid; grid-template-rows: 1fr; }
.wb-klap > * { min-height: 0; overflow: hidden; }

/* de pagina: geen kopkaart (die staat erboven, uit beeld) */
.wb .ie-pagina { padding-top: 1.71em; gap: 1.14em; }
.wb .ie-stop.is-af i { background: #F57C00; }
.wb .ie-lijf { grid-template-columns: minmax(0, 1fr) 24.29em; }

/* ── de veldgroep ── */
.wb-fg { border: 1px solid #EAE8E2; border-radius: .86em; background: #FFFDF8; overflow: hidden; }
.wb-fg__kop { display: flex; align-items: center; justify-content: space-between; padding: 1.29em 1.57em; }
.wb-fg__kop h5 { margin: 0; display: flex; align-items: center; gap: .7em; font-family: var(--font-display); font-size: 1.29em; font-weight: 600; letter-spacing: -.005em; }
.wb-fg__kop > svg.li { color: #6B7280; width: 1.14em; height: 1.14em; }
.wb-fg__lijf { display: flex; flex-direction: column; gap: 1.43em; padding: 1.29em 1.57em 1.57em; border-top: 1px solid #EAE8E2; }

.wb-badge { display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em; border-radius: 999px; border: 1px solid; font-family: var(--font-body); font-size: .72em; font-weight: 600; letter-spacing: 0; line-height: 1.3; white-space: nowrap; }
.wb-badge--actie { background: #FEEBD6; color: #A35200; border-color: #FCD5AD; }
.wb-badge--kanaal { background: rgba(30, 42, 69, .05); color: #45464D; border-color: rgba(30, 42, 69, .15); }
.wb-badge--rood { background: #FEECEB; color: #B42318; border-color: #FBC8C4; }
.wb-badge--groen { background: #E9F8EC; color: #15803D; border-color: #BDE8C6; }
.wb-badge--oranje { background: rgba(245, 124, 0, .1); color: #F57C00; border-color: rgba(245, 124, 0, .3); }

.wb-knop { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: .55em 1em; border: 1px solid #F57C00; border-radius: .57em; background: #F57C00; color: #fff; font-size: .893em; font-weight: 600; white-space: nowrap; }
.wb-knop svg.li { width: 1.05em; height: 1.05em; }
.wb-knop--twee { background: transparent; border-color: #D9D6CE; color: #1E2A45; }
.wb-knop--klein { align-self: flex-start; padding: .45em .85em; }

/* ── het verdict ── */
.wb-v { display: flex; align-items: center; gap: 1em; padding: 1.07em 1.29em; border: 1px solid; border-radius: .71em; }
.wb-v__tekst { flex: 1 1 auto; min-width: 0; }
.wb-v__t { margin: 0; display: flex; align-items: center; gap: .5em; font-family: var(--font-display); font-size: 1.14em; font-weight: 600; letter-spacing: -.005em; }
.wb-v__s { margin: .15em 0 0; font-size: .929em; }
.wb-v--wacht { border-color: rgba(245, 124, 0, .25); background: rgba(245, 124, 0, .06); }
.wb-v--wacht .wb-v__t, .wb-v--wacht .wb-v__s { color: #F57C00; }
.wb-v--wacht .wb-v__s { opacity: .85; }
.wb-v--loopt { border-color: #FCD5AD; background: #FEF3E6; }
.wb-v--loopt .wb-v__t { color: #F57C00; }
.wb-v--loopt .wb-v__s { color: #45464D; }
/* Eén balk tegelijk: het venster draagt de voortgang. Op de pagina eronder
   staat de balk van dit blok ook, maar twee bewegende balken boven elkaar
   (Nathan, 6 oktober: "dit moet cleaner") trekken de blik van het venster. */
.wb-v--loopt .wb-balk { display: none; }
.wb-v--stop { border-color: #FBC8C4; background: #FEECEB; }
.wb-v--stop .wb-v__t, .wb-v--stop .wb-v__s { color: #B42318; }
.wb-v--stop .wb-v__s { opacity: .85; }
.wb-v--go { border-color: #BDE8C6; background: #E9F8EC; }
.wb-v--go .wb-v__t, .wb-v--go .wb-v__s { color: #15803D; }
.wb-v--go .wb-v__s { opacity: .85; }
.wb-v--wacht, .wb-v--loopt, .wb-v--stop { opacity: 0; visibility: hidden; }

.wb-draai { width: 1em; height: 1em; border-radius: 50%; border: 2px solid rgba(245, 124, 0, .25); border-top-color: #F57C00; }
.wb-balk { position: relative; height: .43em; margin-top: .85em; border-radius: 999px; background: #FEEBD6; overflow: hidden; }
.wb-balk i { position: absolute; top: 0; bottom: 0; left: 0; width: 33%; border-radius: 999px; background: #F57C00; }

/* ── de vergelijking ── */
.wb-lijst { display: flex; flex-direction: column; gap: .86em; }
.wb-lijst__kop { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .7em; }
.wb-sectie { font-size: .75em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #6B7280; }
.wb-tel, .wb-meter__tel { font-size: .893em; color: #6B7280; font-variant-numeric: tabular-nums; }
.wb-lijst__knoppen { margin-left: auto; display: flex; gap: .5em; }
.wb-lijst__knoppen .wb-knop { padding: .4em .85em; }
.wb-tel--b, .wb-knop--b { opacity: 0; }

.wb-meter { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.14em; }
.wb-streep { display: flex; flex: 1 1 13em; gap: 3px; }
.wb-streep i { flex: 1 1 0; height: .57em; border-radius: 3px; }
/* eindbeeld: besloten is vol groen, wat overeenkomt licht groen */
.wb-streep .m-ok { background: rgba(21, 128, 61, .35); }
.wb-streep .m-blok, .wb-streep .m-afw { background: #15803D; }
.wb-meter__tel { font-size: .857em; }

.wb-samen { margin: 0; font-size: .929em; color: #45464D; line-height: 1.5; }

.wb-rijen { display: flex; flex-direction: column; gap: .57em; }
.wb-rij { display: flex; align-items: flex-start; gap: .57em; padding: .86em; border: 1px solid #FBC8C4; border-radius: .57em; background: #FEECEB; }
.wb-mark { display: inline-flex; margin-top: .1em; }
.wb-mark svg.li { width: 1.14em; height: 1.14em; }
.wb-mark--blok { color: #B42318; }
.wb-mark--mist { color: #6B7280; }
.wb-rij__lijf { flex: 1 1 auto; min-width: 0; }
.wb-rij__kop { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3em .57em; }
.wb-rij__kop b { font-size: .929em; font-weight: 500; }
.wb-tegen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: .86em; margin-top: .57em; font-size: .929em; }
.wb-tegen > svg.li { align-self: center; color: #6B7280; width: 1em; height: 1em; }
.wb-tegen em { display: block; font-style: normal; font-size: .85em; color: #6B7280; }
.wb-tegen i { font-style: italic; color: #6B7280; }
.wb-rij__uitleg { margin: .57em 0 0; font-size: .893em; color: #45464D; }
.wb-klap--open { grid-template-rows: 0fr; }

.wb-groep { display: flex; align-items: center; gap: .7em; padding: .86em 1.07em; border: 1px solid #EAE8E2; border-radius: .57em; background: #F9F7F2; }
.wb-groep b { font-size: .929em; font-weight: 600; }
.wb-groep span { font-size: .893em; color: #6B7280; }
.wb-groep svg.li { margin-left: auto; color: #6B7280; width: 1.14em; height: 1.14em; }
.wb-klein { margin: 0; font-size: .82em; color: #6B7280; }
.wb-kleiner { margin: -.4em 0 0; font-size: .786em; color: #6B7280; }

/* ── mee naar de uitvoering, het profiel, de AI-regel ── */
.wb-mee { padding: 1.14em; border: 1px solid #EAE8E2; border-radius: .57em; background: #F9F7F2; }
.wb-mee__kop { display: flex; align-items: center; gap: .45em; margin: 0 0 .85em; }
.wb-mee__kop > svg.li { margin-left: auto; color: #6B7280; width: 1em; height: 1em; }
.wb-ster { color: #F57C00; }
.wb-grijs { font-size: .857em; color: #6B7280; }
.wb-mee__groep { display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: .3em 1.14em; padding-top: .85em; margin-top: .85em; border-top: 1px solid #EAE8E2; }
.wb-mee__groep:nth-child(2) { border-top: 0; padding-top: 0; margin-top: 0; }
.wb-mee__groep > span { font-size: .893em; font-weight: 600; color: #6B7280; }
.wb-mee__groep ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .3em; font-size: .929em; }
.wb-mee__groep li { position: relative; padding-left: 1.2em; }
.wb-mee__groep li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .3em; height: .3em; border-radius: 50%; background: rgba(30, 42, 69, .35); }
.wb-profiel { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .9em; margin: 0; padding-top: 1em; border-top: 1px solid #EAE8E2; font-size: .893em; color: #6B7280; }
.wb-profiel b { color: #1E2A45; font-weight: 600; }
.wb-profiel u { margin-left: auto; font-weight: 600; text-decoration-color: #D9D6CE; text-underline-offset: 3px; }
.wb-ai { display: flex; align-items: center; gap: .6em; margin: -.4em 0 0; font-size: .786em; color: #6B7280; }
.wb-ai .wb-badge { font-size: 1em; }

/* ── de takenkolom ── */
.wb-taken .ie-taken__kop .wb-wissel { align-items: center; }
.wb-open--2, .wb-open--1 { opacity: 0; }
.wb-klaarpil { display: inline-flex; align-items: center; gap: .3em; padding: .15em .65em; border-radius: 999px; background: rgba(46, 196, 182, .1); color: #2EC4B6; font-size: .786em; font-weight: 600; }
.wb-klaarpil svg.li { width: .9em; height: .9em; }
.wb-stand--a, .wb-stand--b, .wb-stand--c { opacity: 0; visibility: hidden; }
.wb-stapel--taken { align-items: start; }
.wb-akkoord { position: relative; display: inline-flex; align-items: center; padding: .4em .75em; border: 1px solid rgba(46, 196, 182, .4); border-radius: .43em; background: rgba(46, 196, 182, .08); color: #2EC4B6; font-size: .82em; font-weight: 500; }
.wb-door .ie-knop { width: 100%; justify-content: center; }

/* ── de dialogen ── */
.wb-dek { position: absolute; inset: 0; z-index: 4; background: rgba(15, 23, 42, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; }
.wb-dlg { position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; border: 1px solid #EAE8E2; border-radius: 1.14em; background: #FFFDF8; box-shadow: 0 24px 60px -20px rgba(15, 23, 42, .45); opacity: 0; visibility: hidden; }
.wb-boven { margin: 0; font-size: .75em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6B7280; }
.wb-boven--oranje { color: #F57C00; }
.wb-dlg__t { margin: .55em 0 0; font-family: var(--font-display); font-size: 1.57em; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.wb-dlg__s { margin: .55em 0 0; font-size: .964em; color: #45464D; line-height: 1.55; }

.wb-rit { width: 37.14em; padding: 1.57em 1.71em 1.43em; }
.wb-rit .wb-balk { margin-top: 1.4em; }
.wb-sec { margin: .55em 0 0; font-size: .82em; color: #6B7280; font-variant-numeric: tabular-nums; }
.wb-sec > span { opacity: 0; }
.wb-bronnen { margin: 1.4em 0 0; padding: 0; list-style: none; display: grid; gap: .57em; font-size: .929em; }
.wb-bronnen li { display: flex; align-items: flex-start; gap: .7em; }
.wb-bronnen svg.li { flex: 0 0 1.21em; width: 1.21em; height: 1.21em; padding: .2em; margin-top: .1em; border-radius: 50%; background: #15803D; color: #fff; stroke-width: 3; }
.wb-bronnen span { color: #45464D; }
.wb-bronnen b { color: #1E2A45; font-weight: 600; }
.wb-rit__voet { margin-top: 1.4em; }
.wb-rij2 { display: flex; align-items: center; gap: .6em; }
.wb-rij2 p { flex: 1 1 auto; margin: 0; font-size: .82em; color: #6B7280; }
.wb-rij2 .wb-knop--controle { margin-left: auto; }
.wb-tellen { display: flex; gap: 1.14em; margin: 0 0 1.1em; padding-top: .85em; border-top: 1px solid #EAE8E2; font-size: .893em; color: #6B7280; font-variant-numeric: tabular-nums; }
.wb-rit__loopt { opacity: 0; }

.wb-wiz { width: 62.86em; overflow: hidden; }
.wb-wiz__kop { display: flex; align-items: center; gap: .7em; padding: 1.14em 1.71em; border-bottom: 1px solid #EAE8E2; }
.wb-wiz__titels > span { display: flex; align-items: center; gap: .6em; opacity: 0; }
.wb-wiz__titels b { font-family: var(--font-display); font-size: 1.14em; font-weight: 600; }
.wb-wiz__lijf { display: grid; grid-template-columns: 16.29em minmax(0, 1fr); min-height: 25.7em; }
.wb-rail { display: flex; flex-direction: column; gap: .15em; padding: 1.14em; border-right: 1px solid #EAE8E2; background: #F9F7F2; }
.wb-rail .wb-boven { margin-bottom: .55em; }
.wb-ri { display: flex; align-items: center; gap: .57em; padding: .45em .57em; border-radius: .43em; font-size: .893em; color: #6B7280; white-space: nowrap; }
.wb-ri i { display: grid; place-items: center; flex: 0 0 1.14em; height: 1.14em; border-radius: 50%; border: 1px solid #D9D6CE; }
.wb-ri.is-blok i { border-color: #B42318; }
.wb-ri i svg.li { width: .7em; height: .7em; stroke-width: 3; opacity: 0; }
/* eindbeeld: alle vijf besloten */
.wb-ri { color: #45464D; }
.wb-ri i, .wb-ri.is-blok i { border-color: #15803D; background: #15803D; color: #fff; }
.wb-ri i svg.li { opacity: 1; }

.wb-stappen { display: flex; flex-direction: column; padding: 1.71em; }
.wb-stap { opacity: 0; }
.wb-stap.wb-s6 { opacity: 1; }
.wb-vraag { margin: .55em 0 0; font-family: var(--font-display); font-size: 1.5em; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.wb-uitleg { margin: .55em 0 0; max-width: 62ch; font-size: .964em; color: #45464D; line-height: 1.55; }
.wb-kaarten { display: grid; grid-template-columns: 1fr 1fr; gap: .86em; margin-top: 1.4em; }
.wb-kaarten > div { padding: 1.14em; border: 1px solid #EAE8E2; border-radius: .57em; background: #F9F7F2; }
.wb-kaarten > div.is-ajeto { border-color: #FCD5AD; background: #FEEBD6; }
.wb-kaarten .wb-boven { font-size: .75em; }
.wb-kaarten b { display: block; margin-top: .4em; font-size: 1.036em; font-weight: 600; line-height: 1.35; }
.wb-kaarten b.is-leeg { font-weight: 400; font-style: italic; color: #6B7280; }
.wb-besluiten { display: grid; grid-template-columns: 1fr 1fr; gap: .57em; margin-top: 1.4em; opacity: 0; }
.wb-b { position: relative; display: flex; flex-direction: column; gap: .15em; padding: .7em 1em; border: 1px solid #EAE8E2; border-radius: .57em; background: #FFFDF8; font-size: .857em; color: #6B7280; }
.wb-b b { display: flex; align-items: center; gap: .45em; font-size: 1.12em; font-weight: 600; color: #1E2A45; }
.wb-b kbd { padding: 0 .35em; border: 1px solid #D9D6CE; border-radius: .25em; font-family: var(--font-body); font-size: .7em; font-weight: 500; color: #6B7280; }
.wb-slot { display: flex; flex-direction: column; align-items: flex-start; gap: .7em; padding-top: .5em; }
.wb-slot__ic svg.li { width: 2.3em; height: 2.3em; color: #15803D; }
.wb-slot__t { margin: 0; font-family: var(--font-display); font-size: 1.43em; font-weight: 600; }
.wb-knop--terug { margin-top: .4em; }
.wb-wiz__voet { display: flex; align-items: center; gap: 1.14em; padding: 1.14em 1.71em; border-top: 1px solid #EAE8E2; }
.wb-wiz__voet .wb-knop { padding: .4em .85em; }
.wb-uit { opacity: .45; }
.wb-wiz__voortgang { flex: 1 1 auto; min-width: 0; }
.wb-voortgang { position: relative; display: block; height: .43em; border-radius: 999px; background: #EAE8E2; overflow: hidden; }
.wb-voortgang i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; background: #F57C00; }
.wb-wiz__tel { margin-top: .3em; font-size: .786em; color: #6B7280; font-variant-numeric: tabular-nums; }
.wb-wiz__tel > span { opacity: 0; }
.wb-wiz__tel > .wb-s6, .wb-wiz__titels > .wb-s6 { opacity: 1; }

/* de cursor en de golf; de punten zijn gemeten in het venster (%) */
.wb {
  --sx: 69.8%; --sy: 31.8%; --cx: 59.1%; --cy: 64.2%;
  --mx: 64.9%; --my: 58%; --ax: 47.9%; --ay: 58%;
  --tx: 43.9%; --ty: 49.2%; --kx: 91.6%; --ky: 35.4%;
}
.wb-muis { position: absolute; z-index: 7; left: 0; top: 0; width: 3.4em; height: 3.4em; margin: -.35em 0 0 -.64em; pointer-events: none; opacity: 0; filter: drop-shadow(0 .25em .45em rgba(15, 26, 45, .45)); }
.wb-golf { position: absolute; z-index: 6; left: 0; top: 0; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; border: .25em solid #F57C00; opacity: 0; pointer-events: none; }


/* ── de tijdlijn: 20 seconden ─────────────────────────────── *
   0      de offerte is uitgelezen, nog niet vergeleken
   2,2    klik op Vergelijking starten
   2,4    het venster Offertecontrole: de offerte naast het dossier
   5,6    klaar: 14 onderdelen, 3 blokkades (de pagina eronder ook)
   7,0    klik op Controle starten
   7,2    de controle: vijf onderdelen, elk een besluit
          9,2 en 10,4 Meerwerk, 11,6 / 12,6 / 13,6 Akkoord
   14,8   klik op Terug naar het project
   15,0   Klaar voor installatie; de blokkades klappen dicht
   17,0   klik op Akkoord bij het overdrachtspakket; Naar Oplevering  */
.pwin--wb.is-playing .wb-v--wacht { animation: wb-a 20s linear both; }
.pwin--wb.is-playing .wb-v--loopt { animation: wb-loopt 20s linear both; }
.pwin--wb.is-playing .wb-v--stop { animation: wb-b 20s linear both; }
.pwin--wb.is-playing .wb-v--go { animation: wb-c 20s linear both; }
.pwin--wb.is-playing .wb-draai { animation: ie-draai .9s linear infinite; }
.pwin--wb.is-playing .wb-balk i { animation: wb-schuif 1.4s ease-in-out infinite; }
.pwin--wb.is-playing .wb-klap--lijst { animation: wb-lijst 20s linear both; }
.pwin--wb.is-playing .wb-klap--open { animation: wb-dicht 20s linear both; }
.pwin--wb.is-playing .wb-klap--besloten { animation: wb-open 20s linear both; }
.pwin--wb.is-playing .wb-tel--b, .pwin--wb.is-playing .wb-knop--b { animation: wb-tot-c 20s linear both; }
.pwin--wb.is-playing .wb-tel--c, .pwin--wb.is-playing .wb-knop--c { animation: wb-vanaf-c 20s linear both; }
.pwin--wb.is-playing .wb-streep .m-blok { animation: wb-m-blok 20s linear both; }
.pwin--wb.is-playing .wb-streep .m-afw { animation: wb-m-afw 20s linear both; }
.pwin--wb.is-playing .wb-v--wacht .wb-knop--start { animation: wb-druk-start 20s linear both; }

.pwin--wb.is-playing .wb-open--2 { animation: wb-open2 20s linear both; }
.pwin--wb.is-playing .wb-open--1 { animation: wb-open1 20s linear both; }
.pwin--wb.is-playing .wb-klaarpil { animation: wb-d 20s linear both; }
.pwin--wb.is-playing .wb-stand--a { animation: wb-a 20s linear both; }
.pwin--wb.is-playing .wb-stand--b { animation: wb-loopt 20s linear both; }
.pwin--wb.is-playing .wb-stand--c { animation: wb-taak-c 20s linear both; }
.pwin--wb.is-playing .wb-stand--d { animation: wb-d 20s linear both; }
.pwin--wb.is-playing .wb-door { animation: wb-d 20s linear both; }
.pwin--wb.is-playing .wb-akkoord { animation: wb-druk-akkoord 20s linear both; }

.pwin--wb.is-playing .wb-dek { animation: wb-dek 20s linear both; }
.pwin--wb.is-playing .wb-rit { animation: wb-rit 20s cubic-bezier(.2, .8, .2, 1) both; }
.pwin--wb.is-playing .wb-rit__loopt { animation: wb-rit-loopt 20s linear both; }
.pwin--wb.is-playing .wb-rit__klaar { animation: wb-rit-klaar 20s linear both; }
.pwin--wb.is-playing .wb-sec > span:nth-child(1) { animation: wb-sec1 20s linear both; }
.pwin--wb.is-playing .wb-sec > span:nth-child(2) { animation: wb-sec2 20s linear both; }
.pwin--wb.is-playing .wb-sec > span:nth-child(3) { animation: wb-sec3 20s linear both; }
.pwin--wb.is-playing .wb-sec > span:nth-child(4) { animation: wb-sec4 20s linear both; }
.pwin--wb.is-playing .wb-knop--controle { animation: wb-druk-controle 20s linear both; }

.pwin--wb.is-playing .wb-wiz { animation: wb-wiz 20s cubic-bezier(.2, .8, .2, 1) both; }
.pwin--wb.is-playing .wb-s1 { animation: wb-s1 20s linear both; }
.pwin--wb.is-playing .wb-s2 { animation: wb-s2 20s linear both; }
.pwin--wb.is-playing .wb-s3 { animation: wb-s3 20s linear both; }
.pwin--wb.is-playing .wb-s4 { animation: wb-s4 20s linear both; }
.pwin--wb.is-playing .wb-s5 { animation: wb-s5 20s linear both; }
.pwin--wb.is-playing .wb-s6 { animation: wb-s6 20s linear both; }
.pwin--wb.is-playing .wb-besluiten { animation: wb-besluiten 20s linear both; }
.pwin--wb.is-playing .wb-b--meerwerk { animation: wb-kies-meer 20s linear both; }
.pwin--wb.is-playing .wb-b--akkoord { animation: wb-kies-akk 20s linear both; }
.pwin--wb.is-playing .wb-voortgang i { animation: wb-voortgang 20s linear both; }
.pwin--wb.is-playing .wb-ri--1 { animation: wb-nu1 20s linear both; }
.pwin--wb.is-playing .wb-ri--2 { animation: wb-nu2 20s linear both; }
.pwin--wb.is-playing .wb-ri--3 { animation: wb-nu3 20s linear both; }
.pwin--wb.is-playing .wb-ri--4 { animation: wb-nu4 20s linear both; }
.pwin--wb.is-playing .wb-ri--5 { animation: wb-nu5 20s linear both; }
.pwin--wb.is-playing .wb-ri--1 i { animation: wb-af1 20s linear both; }
.pwin--wb.is-playing .wb-ri--2 i { animation: wb-af2 20s linear both; }
.pwin--wb.is-playing .wb-ri--3 i { animation: wb-af3 20s linear both; }
.pwin--wb.is-playing .wb-ri--4 i { animation: wb-af4 20s linear both; }
.pwin--wb.is-playing .wb-ri--5 i { animation: wb-af5 20s linear both; }
.pwin--wb.is-playing .wb-ri--1 i svg.li { animation: wb-vink1 20s linear both; }
.pwin--wb.is-playing .wb-ri--2 i svg.li { animation: wb-vink2 20s linear both; }
.pwin--wb.is-playing .wb-ri--3 i svg.li { animation: wb-vink3 20s linear both; }
.pwin--wb.is-playing .wb-ri--4 i svg.li { animation: wb-vink4 20s linear both; }
.pwin--wb.is-playing .wb-ri--5 i svg.li { animation: wb-vink5 20s linear both; }
.pwin--wb.is-playing .wb-knop--terug { animation: wb-druk-terug 20s linear both; }

.pwin--wb.is-playing .wb-muis { animation: wb-muis 20s linear both; }
.pwin--wb.is-playing .wb-golf { animation: wb-golf 20s linear both; }

/* standen van de pagina: A 0–12, loopt 12–28, B 28–75, C 75–100 */
@keyframes wb-a { 0%, 12% { opacity: 1; visibility: visible; } 13.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes wb-loopt { 0%, 11.5% { opacity: 0; visibility: hidden; } 13%, 28% { opacity: 1; visibility: visible; } 29.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes wb-b { 0%, 27.5% { opacity: 0; visibility: hidden; } 29%, 75% { opacity: 1; visibility: visible; } 76.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes wb-c { 0%, 75% { opacity: 0; } 77%, 100% { opacity: 1; } }
@keyframes wb-schuif { from { left: -33%; } to { left: 100%; } }
@keyframes wb-lijst { 0%, 28% { grid-template-rows: 0fr; opacity: 0; } 31%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes wb-dicht { 0%, 28% { grid-template-rows: 0fr; } 29%, 76% { grid-template-rows: 1fr; opacity: 1; } 79.5%, 100% { grid-template-rows: 0fr; opacity: 0; } }
@keyframes wb-open { 0%, 76.5% { grid-template-rows: 0fr; opacity: 0; } 79.5%, 100% { grid-template-rows: 1fr; opacity: 1; } }
@keyframes wb-tot-c { 0%, 75% { opacity: 1; } 76.5%, 100% { opacity: 0; } }
@keyframes wb-vanaf-c { 0%, 75% { opacity: 0; } 76.5%, 100% { opacity: 1; } }
@keyframes wb-m-blok { 0%, 75% { background: #B42318; } 78%, 100% { background: #15803D; } }
@keyframes wb-m-afw { 0%, 75% { background: #F57C00; } 78%, 100% { background: #15803D; } }
@keyframes wb-druk-start { 0%, 10.8% { scale: 1; } 11% { scale: .95; } 11.6%, 100% { scale: 1; } }

/* de takenkolom: A, loopt, C vanaf 28, D vanaf 86 */
@keyframes wb-taak-c { 0%, 27.5% { opacity: 0; visibility: hidden; } 29%, 86% { opacity: 1; visibility: visible; } 87.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes wb-d { 0%, 86% { opacity: 0; } 88%, 100% { opacity: 1; } }
@keyframes wb-open2 { 0%, 28% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes wb-open1 { 0%, 28% { opacity: 0; } 29%, 86% { opacity: 1; } 87%, 100% { opacity: 0; } }
@keyframes wb-druk-akkoord { 0%, 84.8% { scale: 1; } 85% { scale: .94; background: rgba(46, 196, 182, .2); } 86%, 100% { scale: 1; } }

/* de dialogen */
@keyframes wb-dek { 0%, 12% { opacity: 0; } 13.5%, 74.5% { opacity: 1; } 76.5%, 100% { opacity: 0; } }
@keyframes wb-rit { 0%, 12.3% { opacity: 0; visibility: hidden; scale: .96; } 14%, 36% { opacity: 1; visibility: visible; scale: 1; } 37.5%, 100% { opacity: 0; visibility: hidden; scale: .98; } }
@keyframes wb-rit-loopt { 0%, 27.6% { opacity: 1; } 28.6%, 100% { opacity: 0; } }
@keyframes wb-rit-klaar { 0%, 28% { opacity: 0; } 29.2%, 100% { opacity: 1; } }
@keyframes wb-sec1 { 0%, 16% { opacity: 1; } 16.01%, 100% { opacity: 0; } }
@keyframes wb-sec2 { 0%, 16% { opacity: 0; } 16.01%, 20% { opacity: 1; } 20.01%, 100% { opacity: 0; } }
@keyframes wb-sec3 { 0%, 20% { opacity: 0; } 20.01%, 24% { opacity: 1; } 24.01%, 100% { opacity: 0; } }
@keyframes wb-sec4 { 0%, 24% { opacity: 0; } 24.01%, 100% { opacity: 1; } }
@keyframes wb-druk-controle { 0%, 34.8% { scale: 1; } 35% { scale: .95; } 35.6%, 100% { scale: 1; } }
@keyframes wb-wiz { 0%, 36.4% { opacity: 0; visibility: hidden; scale: .97; } 38%, 74.5% { opacity: 1; visibility: visible; scale: 1; } 76%, 100% { opacity: 0; visibility: hidden; scale: .98; } }

/* de stappen van de controle: s1 36–47, s2 –53, s3 –59, s4 –64, s5 –69, slot */
@keyframes wb-s1 { 0%, 46.8% { opacity: 1; } 47.6%, 100% { opacity: 0; } }
@keyframes wb-s2 { 0%, 46.8% { opacity: 0; } 47.6%, 52.8% { opacity: 1; } 53.6%, 100% { opacity: 0; } }
@keyframes wb-s3 { 0%, 52.8% { opacity: 0; } 53.6%, 58.8% { opacity: 1; } 59.6%, 100% { opacity: 0; } }
@keyframes wb-s4 { 0%, 58.8% { opacity: 0; } 59.6%, 63.8% { opacity: 1; } 64.6%, 100% { opacity: 0; } }
@keyframes wb-s5 { 0%, 63.8% { opacity: 0; } 64.6%, 68.8% { opacity: 1; } 69.6%, 100% { opacity: 0; } }
@keyframes wb-s6 { 0%, 68.8% { opacity: 0; } 69.6%, 100% { opacity: 1; } }
@keyframes wb-besluiten { 0%, 68.8% { opacity: 1; } 69.4%, 100% { opacity: 0; } }
@keyframes wb-kies-meer {
  0%, 45.8%, 47.4%, 51.8%, 53.4%, 100% { border-color: #EAE8E2; background: #FFFDF8; scale: 1; }
  46%, 46.9%, 52%, 52.9% { border-color: #F57C00; background: #FEEBD6; }
  46.2%, 52.2% { scale: .97; }
}
@keyframes wb-kies-akk {
  0%, 57.8%, 59.4%, 62.8%, 64.4%, 67.8%, 69.4%, 100% { border-color: #EAE8E2; background: #FFFDF8; scale: 1; }
  58%, 58.9%, 63%, 63.9%, 68%, 68.9% { border-color: #F57C00; background: #FEEBD6; }
  58.2%, 63.2%, 68.2% { scale: .97; }
}
@keyframes wb-voortgang { 0%, 46.6% { width: 0%; } 47.6%, 52.6% { width: 20%; } 53.6%, 58.6% { width: 40%; } 59.6%, 63.6% { width: 60%; } 64.6%, 68.6% { width: 80%; } 69.6%, 100% { width: 100%; } }
@keyframes wb-nu1 { 0%, 47% { background: #FEEBD6; color: #1E2A45; font-weight: 600; } 47.6%, 100% { background: transparent; color: #45464D; font-weight: 400; } }
@keyframes wb-nu2 { 0%, 47% { background: transparent; color: #6B7280; } 47.6%, 53% { background: #FEEBD6; color: #1E2A45; font-weight: 600; } 53.6%, 100% { background: transparent; color: #45464D; font-weight: 400; } }
@keyframes wb-nu3 { 0%, 53% { background: transparent; color: #6B7280; } 53.6%, 59% { background: #FEEBD6; color: #1E2A45; font-weight: 600; } 59.6%, 100% { background: transparent; color: #45464D; font-weight: 400; } }
@keyframes wb-nu4 { 0%, 59% { background: transparent; color: #6B7280; } 59.6%, 64% { background: #FEEBD6; color: #1E2A45; font-weight: 600; } 64.6%, 100% { background: transparent; color: #45464D; font-weight: 400; } }
@keyframes wb-nu5 { 0%, 64% { background: transparent; color: #6B7280; } 64.6%, 69% { background: #FEEBD6; color: #1E2A45; font-weight: 600; } 69.6%, 100% { background: transparent; color: #45464D; font-weight: 400; } }
@keyframes wb-af1 { 0%, 46.4% { background: transparent; border-color: #B42318; } 47%, 100% { background: #15803D; border-color: #15803D; } }
@keyframes wb-af2 { 0%, 52.4% { background: transparent; border-color: #B42318; } 53%, 100% { background: #15803D; border-color: #15803D; } }
@keyframes wb-af3 { 0%, 58.4% { background: transparent; border-color: #B42318; } 59%, 100% { background: #15803D; border-color: #15803D; } }
@keyframes wb-af4 { 0%, 63.4% { background: transparent; border-color: #D9D6CE; } 64%, 100% { background: #15803D; border-color: #15803D; } }
@keyframes wb-af5 { 0%, 68.4% { background: transparent; border-color: #D9D6CE; } 69%, 100% { background: #15803D; border-color: #15803D; } }
@keyframes wb-vink1 { 0%, 46.4% { opacity: 0; } 47%, 100% { opacity: 1; } }
@keyframes wb-vink2 { 0%, 52.4% { opacity: 0; } 53%, 100% { opacity: 1; } }
@keyframes wb-vink3 { 0%, 58.4% { opacity: 0; } 59%, 100% { opacity: 1; } }
@keyframes wb-vink4 { 0%, 63.4% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes wb-vink5 { 0%, 68.4% { opacity: 0; } 69%, 100% { opacity: 1; } }
@keyframes wb-druk-terug { 0%, 73.8% { scale: 1; } 74% { scale: .95; } 74.6%, 100% { scale: 1; } }

/* de cursor: start 11, controle 35, meerwerk 46 en 52, akkoord 58/63/68,
   terug 74, akkoord bij de taak 85 */
@keyframes wb-muis {
  0%, 4% { opacity: 0; translate: 0 0; left: 92%; top: 92%; }
  5% { opacity: 1; left: 92%; top: 92%; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  10.4% { left: var(--sx); top: var(--sy); scale: 1; }
  11% { left: var(--sx); top: var(--sy); scale: .82; }
  11.8% { left: var(--sx); top: var(--sy); scale: 1; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  /* na de klik opzij, zodat hij niet op Volgen blijft staan */
  16%, 29% { left: 84%; top: 86%; scale: 1; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  34.4% { left: var(--cx); top: var(--cy); scale: 1; }
  35% { left: var(--cx); top: var(--cy); scale: .82; }
  35.8%, 40% { left: var(--cx); top: var(--cy); scale: 1; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  45.4% { left: var(--mx); top: var(--my); scale: 1; }
  46% { scale: .82; }
  46.8%, 51.4% { left: var(--mx); top: var(--my); scale: 1; }
  52% { scale: .82; }
  52.8%, 53.6% { left: var(--mx); top: var(--my); scale: 1; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  57.4% { left: var(--ax); top: var(--ay); scale: 1; }
  58% { scale: .82; }
  58.8%, 62.4% { left: var(--ax); top: var(--ay); scale: 1; }
  63% { scale: .82; }
  63.8%, 67.4% { left: var(--ax); top: var(--ay); scale: 1; }
  68% { scale: .82; }
  68.8%, 70% { left: var(--ax); top: var(--ay); scale: 1; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  73.4% { left: var(--tx); top: var(--ty); scale: 1; }
  74% { left: var(--tx); top: var(--ty); scale: .82; }
  74.8%, 78% { left: var(--tx); top: var(--ty); scale: 1; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
  84.4% { left: var(--kx); top: var(--ky); scale: 1; opacity: 1; }
  85% { left: var(--kx); top: var(--ky); scale: .82; }
  85.8%, 93% { left: var(--kx); top: var(--ky); scale: 1; opacity: 1; }
  96%, 100% { left: var(--kx); top: var(--ky); opacity: 0; }
}
@keyframes wb-golf {
  0%, 10.9% { opacity: 0; scale: .3; left: var(--sx); top: var(--sy); }
  11.4% { opacity: .9; scale: .6; left: var(--sx); top: var(--sy); }
  13.5% { opacity: 0; scale: 1.8; left: var(--sx); top: var(--sy); }
  13.6%, 34.9% { opacity: 0; scale: .3; left: var(--cx); top: var(--cy); }
  35.4% { opacity: .9; scale: .6; left: var(--cx); top: var(--cy); }
  37.5% { opacity: 0; scale: 1.8; left: var(--cx); top: var(--cy); }
  37.6%, 45.9% { opacity: 0; scale: .3; left: var(--mx); top: var(--my); }
  46.4% { opacity: .9; scale: .6; left: var(--mx); top: var(--my); }
  48% { opacity: 0; scale: 1.8; left: var(--mx); top: var(--my); }
  48.1%, 51.9% { opacity: 0; scale: .3; left: var(--mx); top: var(--my); }
  52.4% { opacity: .9; scale: .6; left: var(--mx); top: var(--my); }
  54% { opacity: 0; scale: 1.8; left: var(--mx); top: var(--my); }
  54.1%, 57.9% { opacity: 0; scale: .3; left: var(--ax); top: var(--ay); }
  58.4% { opacity: .9; scale: .6; left: var(--ax); top: var(--ay); }
  60% { opacity: 0; scale: 1.8; left: var(--ax); top: var(--ay); }
  60.1%, 62.9% { opacity: 0; scale: .3; left: var(--ax); top: var(--ay); }
  63.4% { opacity: .9; scale: .6; left: var(--ax); top: var(--ay); }
  65% { opacity: 0; scale: 1.8; left: var(--ax); top: var(--ay); }
  65.1%, 67.9% { opacity: 0; scale: .3; left: var(--ax); top: var(--ay); }
  68.4% { opacity: .9; scale: .6; left: var(--ax); top: var(--ay); }
  70% { opacity: 0; scale: 1.8; left: var(--ax); top: var(--ay); }
  70.1%, 73.9% { opacity: 0; scale: .3; left: var(--tx); top: var(--ty); }
  74.4% { opacity: .9; scale: .6; left: var(--tx); top: var(--ty); }
  76.5% { opacity: 0; scale: 1.8; left: var(--tx); top: var(--ty); }
  76.6%, 84.9% { opacity: 0; scale: .3; left: var(--kx); top: var(--ky); }
  85.4% { opacity: .9; scale: .6; left: var(--kx); top: var(--ky); }
  87.5%, 100% { opacity: 0; scale: 1.8; left: var(--kx); top: var(--ky); }
}

@media (prefers-reduced-motion: reduce) {
  .pwin--wb.is-playing .wb *, .pwin--wb.is-playing .wb *::before { animation: none !important; }
}


/* ══ De beweging en het portaal (mock.css in ronde 9) ═══════════ */
/* ── De camera ────────────────────────────────────────────
   De camera van de telefoon, niet van Ajeto: zwart, het beeld van de
   camera schermvullend, onderin de sluiterknop. Bewust zonder knoppen of
   tekst van een merk telefoon. Maten in em, zoals de rest van het scherm. */
.cam {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.cam.is-aan { opacity: 1; }
.cam video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cam__balk {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8.5em;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .42);
}
.cam__knop {
  width: 4.7em;
  height: 4.7em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 .28em #000, 0 0 0 .55em rgba(255, 255, 255, .92);
}
.cam__flits {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
}
.cam.is-klik .cam__knop { animation: cam-knop .32s ease both; }
.cam.is-klik .cam__flits { animation: cam-flits .42s ease-out both; }
@keyframes cam-knop { 0% { scale: 1; } 40% { scale: .86; } 100% { scale: 1; } }
@keyframes cam-flits { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }


/* ── De plek ──────────────────────────────────────────────
   De plaat ligt in de grond achter de telefoon, met een waas erover zodat
   de telefoon het eerste is waar je naar kijkt. */
.pwin--phone .pph { position: relative; }
.pph__plek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pwin--phone .pph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 34% 62% at 50% 50%, rgba(15, 22, 38, .28), rgba(15, 22, 38, 0) 70%);
  pointer-events: none;
}
.pwin--phone .pph > .phone { position: relative; z-index: 2; }


/* ── De bus rijdt naar huis ───────────────────────────────
   De film ligt over de plaat. Bovenin laat hij de plaat zelf zien, want
   daar loopt de band over in de grond van de dag, en die naad is gemeten.
   Daarom is de film ook alleen het onderste deel van het beeld (vanaf
   34%, 1920 × 712): dat scheelt een derde van het bestand. Hij vloeit in
   tot 52% van de band, dus tot 27% van zijn eigen hoogte. */
.duskband__film {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 65.93%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 27.3%);
  mask-image: linear-gradient(180deg, transparent 0, #000 27.3%);
  pointer-events: none;
}


/* ── De klantuitvraag als verhaal: de mail en het versturen ──
   Tussenschermen in de telefoon (schermen.js, tussen()). Maten in em, zoals de
   rest van het scherm; kleuren uit de portal-tokens op .pph. */
.tus { position: absolute; inset: 0; z-index: 19; overflow: hidden; background: #F9F7F2; color: #1E2A45; font-size: 1em; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.tus.is-aan { opacity: 1; }
.tus.is-uit { opacity: 0; }
.tus .tap { position: absolute; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: rgba(245, 124, 0, .28); box-shadow: 0 0 0 .5em rgba(245, 124, 0, .16); opacity: 0; }

/* de mail-app van de telefoon: eerst de lijst, dan de mail */
.mail-in { position: absolute; inset: 0; padding: 3.2em 1.1em 1em; background: #FFFFFF; }
.mail-in__kop { margin: 0 0 .8em; font-size: 2em; font-weight: 700; letter-spacing: -.02em; }
.mail-in__rij { position: relative; display: flex; gap: .7em; padding: .85em 0; border-bottom: 1px solid #ECECEC; }
.mail-in__rij > i { flex: 0 0 .7em; height: .7em; margin-top: .45em; border-radius: 50%; background: #2F7BF6; }
.mail-in__rij p { margin: 0; }
.mail-in__rij p:first-child { display: flex; justify-content: space-between; font-size: 1.05em; }
.mail-in__rij p:first-child span { color: #8A8A8E; font-size: .85em; }
.mail-in__ond { font-size: .95em; font-weight: 600; margin-top: .15em !important; }
.mail-in__voor { font-size: .88em; color: #8A8A8E; margin-top: .15em !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mail-in__rij.is-oud { padding-left: 1.4em; opacity: .55; }
.tap--mail1 { left: 50%; top: 9.5em; }
.mail-lees { position: absolute; inset: 0; background: #EFEDE8; translate: 100% 0; }
.mail-lees__rol { padding: 0 0 2em; }
.mail-lees__kop { margin: 0; padding: 3.4em 1em 1.1em; background: #1E2A45; color: #FFFDF8; font-family: var(--font-display); font-weight: 700; font-size: 1.15em; text-align: center; }
.mail-lees__kaart { margin: -.4em .7em 0; padding: 1.3em 1.15em 1.4em; border-radius: .9em; background: #FFFFFF; font-size: .9em; line-height: 1.5; }
.mail-lees__kaart h4 { margin: 0 0 .8em; font-family: var(--font-display); font-size: 1.55em; line-height: 1.2; }
.mail-lees__kaart h4 span { display: block; font-size: .62em; font-weight: 500; color: #6B7280; margin-top: .2em; }
.mail-lees__kaart p { margin: 0 0 .7em; }
.mail-lees__tips { margin: .9em 0 1.1em; padding: .9em .9em .9em 1.9em; border-radius: .7em; background: #FEF3E6; font-size: .92em; display: grid; gap: .45em; }
.mail-lees__knop { position: relative; display: block; padding: .85em; border-radius: .6em; background: #F57C00; color: #fff; text-align: center; font-weight: 700; }
.mail-lees__knop .tap { left: 50%; top: 50%; }
.mail-lees__klein { margin: .7em 0 0 !important; font-size: .85em; color: #6B7280; text-align: center; }
.mail-lees__voet { margin: 1em 1.2em 0; font-size: .78em; color: #6B7280; text-align: center; line-height: 1.6; }

/* tijdlijn van de mail: 3,92 s (tot 26 oktober 5,6) */
.tus--mail.is-aan .mail-in__rij:not(.is-oud) { animation: mail-nieuw 3.92s ease both; }
.tus--mail.is-aan .tap--mail1 { animation: mail-tik1 3.92s linear both; }
.tus--mail.is-aan .mail-lees { animation: mail-open 3.92s cubic-bezier(.22, .8, .24, 1) both; }
.tus--mail.is-aan .mail-lees__rol { animation: mail-rol 3.92s ease-in-out both; }
.tus--mail.is-aan .tap--mail2 { animation: mail-tik2 3.92s linear both; }
.tus--mail.is-aan .mail-lees__knop { animation: mail-druk 3.92s linear both; }
@keyframes mail-nieuw { 0%, 8% { opacity: 0; translate: 0 -1.5em; max-height: 0; } 16%, 100% { opacity: 1; translate: 0 0; max-height: 9em; } }
@keyframes mail-tik1 { 0%, 26% { opacity: 0; scale: .4; } 29% { opacity: 1; scale: 1; } 33%, 100% { opacity: 0; scale: 1.5; } }
@keyframes mail-open { 0%, 31% { translate: 100% 0; } 38%, 100% { translate: 0 0; } }
@keyframes mail-rol { 0%, 46% { translate: 0 0; } 66%, 100% { translate: 0 -14em; } }
@keyframes mail-tik2 { 0%, 74% { opacity: 0; scale: .4; } 77% { opacity: 1; scale: 1; } 81%, 100% { opacity: 0; scale: 1.5; } }
@keyframes mail-druk { 0%, 75% { scale: 1; } 76.5% { scale: .97; } 78%, 100% { scale: 1; } }

/* het versturen: de laatste stap van de vragenlijst, dan het bedankscherm */
.stuur { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .7em; padding: 1.4em 1.3em 2.6em; }
.stuur__voortgang { margin: 0 0 auto; padding-top: 4em; font-family: var(--font-display); font-size: 1.3em; font-weight: 600; text-align: center; color: #0C7C6E; }
.stuur__knop { position: relative; display: block; padding: .95em; border-radius: .7em; background: #F57C00; color: #fff; text-align: center; font-weight: 700; }
.stuur__knop .tap { left: 50%; top: 50%; }
.stuur__terug { display: block; text-align: center; padding: .7em; color: #45464D; font-weight: 600; }
.stuur__toast { position: absolute; left: 1em; right: 1em; top: 2.6em; margin: 0; padding: .8em 1em; border-radius: .7em; background: #1E2A45; color: #FFFDF8; font-weight: 600; text-align: center; opacity: 0; }
.dank { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 2em 1.6em; text-align: center; background: #F9F7F2; opacity: 0; }
.dank__vink { display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #E9F8EC; color: #15803D; font-size: 1.4em; font-weight: 800; }
.dank h4 { margin: .3em 0 0; font-family: var(--font-display); font-size: 1.45em; }
.dank p { margin: 0; font-size: .95em; color: #45464D; line-height: 1.5; }
.dank .dank__sub { font-size: .85em; color: #6B7280; }
.dank__knop { margin-top: .6em; padding: .7em 1.1em; border: 1px solid #D9D6CE; border-radius: .6em; font-weight: 600; font-size: .9em; }
.tus--stuur.is-aan .tap--stuur { animation: stuur-tik 2.94s linear both; }
.tus--stuur.is-aan .stuur__knop { animation: stuur-druk 2.94s linear both; }
.tus--stuur.is-aan .stuur__toast { animation: stuur-toast 2.94s ease both; }
.tus--stuur.is-aan .dank { animation: stuur-dank 2.94s ease both; }
@keyframes stuur-tik { 0%, 14% { opacity: 0; scale: .4; } 18% { opacity: 1; scale: 1; } 23%, 100% { opacity: 0; scale: 1.5; } }
@keyframes stuur-druk { 0%, 16% { scale: 1; } 18% { scale: .97; } 20%, 100% { scale: 1; } }
@keyframes stuur-toast { 0%, 22% { opacity: 0; translate: 0 -.6em; } 27%, 44% { opacity: 1; translate: 0 0; } 50%, 100% { opacity: 0; } }
@keyframes stuur-dank { 0%, 44% { opacity: 0; } 52%, 100% { opacity: 1; } }

/* het welkomstscherm met de Street View van de woning */
.ml-hero-foto { overflow: hidden; padding: 0; }
.ml-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ── De demo als film ─────────────────────────────────────
   De tabs vulden zich als voortgangsbalk; Nathan, 8 oktober: "de
   laadlijntjes mogen weg". */

/* de zachte duw: onderin */
.demoduw {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 18px;
  border: 0;
  border-radius: 999px;
  background: #1E2A45;
  color: #FFFDF8;
  font: 600 14px/1.2 var(--font-body);
  box-shadow: 0 0 0 1px rgba(255, 253, 248, .22), 0 14px 32px -12px rgba(15, 26, 45, .55);
  cursor: pointer;
  animation: demoduw-in .35s cubic-bezier(.22, .8, .24, 1) both;
}
.demoduw[hidden] { display: none; }
.demoduw span { font-weight: 500; color: rgba(255, 253, 248, .66); font-size: 13px; }
.demoduw i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FC911D; color: #1B1205; font-size: 16px; }
@keyframes demoduw-in { from { opacity: 0; translate: -50% 12px; } }
@media (max-width: 600px) { .demoduw span { display: none; } }


/* ── Portaal: echt ───────────────────────────────────────────
   De live-stand van apps/portal, uit app/portal.css omgerekend naar em
   (1em is hier 14px van het product). */
#scr-klant .lang-opt.is-active { background: var(--pp-orange); color: #fff; }
#scr-klant .ml-hero-echt { position: relative; box-shadow: 0 6px 18px -8px rgba(30, 42, 69, .35); }
#scr-klant .ml-hero-echt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(30, 42, 69, .34), transparent 55%); pointer-events: none; }
#scr-klant .ml-hero-echt .pi, #scr-klant .ml-hero-echt svg { display: none; }

/* volgorde zoals portal.tsx: de taak onder de aanvraag en de stappen */
#scr-klant .sp-inner > .sp-todo { order: 0; }
/* de homepage centreert de demo; het portaal lijnt links uit */
#scr-klant .phone__scr { text-align: left; }
#scr-klant .journey-step .s { white-space: nowrap; }
/* de bewoner scrolt naar de taak (na het keuzevenster, vóór de tik op 3,54 s) */
#scr-klant .pwin--phone.is-playing .ps--2 .sp-inner { animation: pe-rol 7.7s linear both; }
#scr-klant .ps--4 .sp-inner { translate: 0 var(--rol, 0); }
@keyframes pe-rol { 0%, 33.6% { translate: 0 0; animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 41.8%, 100% { translate: 0 var(--rol, 0); } }

/* open vragen */
#scr-klant .mode-current { display: inline-flex; align-self: flex-start; align-items: center; gap: .57em; margin: .29em 0 1.14em; padding: .43em .71em .43em .86em; border-radius: 999px; background: var(--pp-paper); border: 1px solid var(--pp-line); max-width: 100%; }
#scr-klant .mode-current-lbl { font-size: .86em; color: var(--pp-muted); white-space: nowrap; }
#scr-klant .mode-current-lbl b { color: var(--pp-ink2); font-weight: 600; }
#scr-klant .mode-current-change { font-size: .86em; font-weight: 600; color: var(--pp-orange); padding: .14em .43em; }
#scr-klant .q-reqpill-row { display: flex; margin-bottom: .71em; }
#scr-klant .q-reqpill { display: inline-flex; align-items: center; font-size: .75em; font-weight: 700; letter-spacing: .02em; padding: .29em .86em; border-radius: 999px; line-height: 1; border: 1px solid; background: var(--pp-tint-soft); color: var(--pp-brand-ink); border-color: var(--pp-border); }
#scr-klant .q-wizard-nav { display: flex; align-items: center; justify-content: space-between; }
#scr-klant .q-wizard-nav .btn .pi { margin: 0 -.14em; }
#scr-klant .q-wizard-skip { font-size: .89em; font-weight: 500; color: var(--pp-muted); }
#scr-klant .upload-preview { position: relative; }
#scr-klant .upload-preview .rm { position: absolute; top: .21em; right: .21em; width: 1.86em; height: 1.86em; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .6); color: #fff; }

/* het keuzevenster en de vraag naar een offerte */
.tus--modus { background: transparent; }
.tus--modus .sheet-shell { position: absolute; inset: 0; background: rgba(21, 36, 58, .55); backdrop-filter: blur(2px); opacity: 0; }
.tus--modus .sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pp-off); border-radius: 1.43em 1.43em 0 0; padding: 1.29em 1.29em 1.57em; text-align: left; opacity: 0; }
.tus--modus .sheet h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.21em; letter-spacing: -.005em; margin: 0 2em .29em 0; color: var(--pp-ink); }
.tus--modus .sheet .sub { font-size: .86em; color: var(--pp-muted); margin-bottom: .86em; line-height: 1.45; }
.tus--modus .mode-x { position: absolute; top: 1em; right: 1em; width: 2em; height: 2em; border-radius: 999px; display: grid; place-items: center; background: var(--pp-paper); color: var(--pp-muted); }
.tus--modus .mode-opts { display: flex; flex-direction: column; gap: .57em; margin-top: .43em; }
.tus--modus .mode-opt { position: relative; display: flex; align-items: flex-start; gap: .86em; padding: .93em 1em; border: 1px solid var(--pp-line2); border-radius: .86em; background: var(--pp-paper); }
.tus--modus .mode-opt-ic { flex: none; width: 2.71em; height: 2.71em; border-radius: .57em; margin-top: .07em; display: grid; place-items: center; background: var(--pp-tint-soft); color: var(--pp-orange); }
.tus--modus .mode-opt-txt { display: flex; flex-direction: column; gap: .21em; min-width: 0; flex: 1; }
.tus--modus .mode-opt-head { display: flex; align-items: center; gap: .57em; flex-wrap: wrap; }
.tus--modus .mode-opt-t { font-family: var(--font-display); font-weight: 600; font-size: 1em; color: var(--pp-ink); }
.tus--modus .mode-opt-count { display: inline-flex; align-items: baseline; gap: .45em; font-size: .79em; font-weight: 700; line-height: 1; white-space: nowrap; padding: .27em .73em; border-radius: 999px; background: var(--pp-tint-soft); color: var(--pp-orange); }
.tus--modus .mode-opt-req { font-weight: 500; opacity: .72; }
.tus--modus .mode-opt-s { font-size: .86em; color: var(--pp-ink2); line-height: 1.4; }
.tus--modus .mode-opt-result { font-size: .82em; color: var(--pp-muted); line-height: 1.45; }
.tus--modus .mode-opt-result b { color: var(--pp-ink2); font-weight: 600; }
.tus--modus .mode-opt > .pi { flex: none; color: var(--pp-muted); margin-top: .71em; }
.tus--modus .mode-opt .tap { left: 50%; top: 50%; }
.tus--modus.is-aan .sheet-shell { animation: modus-schil 3.22s ease both; }
.tus--modus.is-aan .sheet--keuze { animation: modus-keuze 3.22s cubic-bezier(.34, 1.2, .64, 1) both; }
.tus--modus.is-aan .sheet--offerte { animation: modus-offerte 3.22s cubic-bezier(.34, 1.2, .64, 1) both; }
.tus--modus.is-aan .sheet--keuze .mode-opt:first-child { animation: modus-druk1 3.22s linear both; }
.tus--modus.is-aan .sheet--offerte .mode-opt:last-child { animation: modus-druk2 3.22s linear both; }
.tus--modus.is-aan .tap--zelf { animation: modus-tik1 3.22s linear both; }
.tus--modus.is-aan .tap--nee { animation: modus-tik2 3.22s linear both; }
@keyframes modus-schil { 0% { opacity: 0; } 5%, 86% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes modus-keuze { 0%, 2% { opacity: 0; translate: 0 20%; } 9%, 40% { opacity: 1; translate: 0 0; } 46%, 100% { opacity: 0; translate: 0 30%; } }
@keyframes modus-offerte { 0%, 44% { opacity: 0; translate: 0 20%; } 51%, 82% { opacity: 1; translate: 0 0; } 90%, 100% { opacity: 0; translate: 0 40%; } }
@keyframes modus-druk1 { 0%, 31% { background: var(--pp-paper); border-color: var(--pp-line2); scale: 1; } 33% { scale: .98; } 34%, 44% { background: var(--pp-tint-soft); border-color: var(--pp-border); scale: 1; } 100% { background: var(--pp-tint-soft); border-color: var(--pp-border); } }
@keyframes modus-druk2 { 0%, 72% { background: var(--pp-paper); border-color: var(--pp-line2); scale: 1; } 74% { scale: .98; } 75%, 100% { background: var(--pp-tint-soft); border-color: var(--pp-border); scale: 1; } }
@keyframes modus-tik1 { 0%, 30% { opacity: 0; scale: .4; } 33% { opacity: 1; scale: 1; } 38%, 100% { opacity: 0; scale: 1.5; } }
@keyframes modus-tik2 { 0%, 71% { opacity: 0; scale: .4; } 74% { opacity: 1; scale: 1; } 79%, 100% { opacity: 0; scale: 1.5; } }

/* versturen en bedankt, zoals vragen-tab.tsx */
.stuur--echt { display: block; padding: 4.6em 1.14em 1.4em; background: var(--pp-paper); text-align: left; }
.stuur--echt .mode-current { display: inline-flex; }
.stuur--echt .q-progress .label { display: flex; align-items: center; gap: .36em; flex-wrap: wrap; font-size: 1.07em; color: var(--pp-ink); }
.stuur--echt .q-progress .label .pi { color: var(--pp-ink); }
.stuur--echt .stuur__nog { margin-left: .4em; color: var(--pp-muted); font-weight: 400; font-family: var(--font-body); font-size: .87em; }
.stuur--echt .adviseur-optin { display: flex; align-items: center; gap: .57em; padding: .71em .86em; margin-bottom: .57em; border: 1px solid var(--pp-border); background: var(--pp-tint-soft); border-radius: .86em; font-size: .89em; color: var(--pp-ink2); line-height: 1.35; }
.stuur--echt .adviseur-optin b { color: var(--pp-orange); font-weight: 600; }
.stuur--echt .adviseur-optin > .pi:first-child { color: var(--pp-orange); }
.stuur--echt .adviseur-optin > span { flex: 1; }
.stuur--echt .adviseur-optin > .pi:last-child { color: var(--pp-muted); }
.stuur--echt > .adviseur-optin { margin-bottom: 1em; }
.stuur__open p { margin: .57em 0 .43em; font-size: .89em; color: var(--pp-muted); }
.stuur--echt .q-submit { display: flex; flex-direction: column; gap: .71em; margin-top: 1.29em; padding-top: 1.29em; border-top: 1px solid var(--pp-line); }
.stuur--echt .q-submit-note { margin: 0; font-size: .89em; line-height: 1.5; color: var(--pp-muted); text-align: center; }
.stuur--echt .btn { display: flex; align-items: center; justify-content: center; gap: .43em; width: 100%; padding: .93em 1.14em; font-size: 1em; font-weight: 600; border-radius: .57em; border: 1px solid var(--pp-line2); color: var(--pp-ink); background: var(--pp-off); }
.stuur--echt .btn-primary { position: relative; background: var(--pp-orange); border-color: var(--pp-orange); color: #fff; }
.stuur--echt .stuur__knop .tap { left: 50%; top: 50%; }
.dank--echt { display: block; padding: 0; background: var(--pp-paper); }
.dank--echt .q-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8em 1.43em 1.43em; }
.dank--echt .q-success-ic { width: 5.43em; height: 5.43em; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.57em; background: #E9F8EC; color: #15803D; box-shadow: 0 0 0 .57em rgba(21, 128, 61, .08); }
.dank--echt h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.36em; line-height: 1.37; letter-spacing: -.01em; color: var(--pp-ink); margin: 0 0 .53em; }
.dank--echt p { font-size: 1.21em; line-height: 1.53; color: var(--pp-ink2); margin: 0 0 .35em; }
.dank--echt .q-success-sub { font-size: .93em; color: var(--pp-muted); margin: .57em 0 1.71em; line-height: 1.55; }
.dank--echt .btn { display: inline-flex; align-items: center; justify-content: center; gap: .43em; min-width: 15.7em; padding: .79em 1.14em; font-weight: 600; font-size: .93em; border-radius: .57em; border: 1px solid var(--pp-line2); color: var(--pp-ink); background: var(--pp-off); }
.tus--stuur:has(.stuur--echt) { top: var(--paneel, 0); }
.tus--stuur .stuur--echt { padding-top: .29em; }
.tus--stuur .dank--echt .q-success { padding-top: 2.6em; }
/* de toast van het portaal: een navy pil onderin (portal.css .toast) */
.stuur--echt .stuur__toast { position: absolute; top: auto; bottom: 10.5em; left: 50%; right: auto; transform: translateX(-50%); width: max-content; padding: .71em 1.14em; border-radius: 999px; font-size: .89em; font-weight: 500; background: #1E2A45; color: #FFFDF8; box-shadow: 0 8px 20px -8px rgba(15, 23, 42, .4); }

/* ── Kader: alleen de inhoud ─────────────────────────────────
   Nathan, 8 oktober: "alleen dit deel van het scherm bij de demo". Bij het
   echte intakescherm en de werkvoorbereiding vallen de zijbalk (220px) en de
   topbalk weg. De pagina vult dan het venster: 1em blijft 14px van het
   product, maar op 1508 in plaats van 1728 breed, dus alles wordt groter. */
.ie-side,
.ie-top { display: none; }
.ie { font-size: calc(.81cqw * 1728 / 1508); }
/* de punten van de cursor in de werkvoorbereiding, opnieuw gemeten */
.wb {
  --sx: 65.4%; --sy: 29.7%; --cx: 61%; --cy: 67%;
  --mx: 67.6%; --my: 57.5%; --ax: 47.4%; --ay: 57.5%;
  --tx: 42.7%; --ty: 48.1%; --kx: 90.3%; --ky: 34.7%;
}