/* De homepage: de dinsdag van Kevin (prompts/website-vakman-omzetmachine, 03 en 08).
 *
 * Twee lagen. De basis hieronder is wat iedereen krijgt zonder JavaScript: alle scènes onder elkaar, met de tijd en
 * de foto bij elk moment, en bij "Straks" beide versies naast elkaar. Met JavaScript wordt elke dag een speler
 * (assets/js/dinsdag.js): een paneel met klok, foto, tekst en een tijdlijn die je zelf bedient.
 *
 * Stijl van lead-follow.nl (Koen, 12 oktober 2026: "de website zoals de stijl van lead-follow.nl, maar met het nieuwe
 * verhaal en interactief"): crème ondergrond, witte panelen met een rand en een zachte schaduw, donkere tekst, de
 * pil-schakelaar uit systeem.css. Geen foto's (Koen, 12 oktober 2026: "de bus is te veel AI"): de dinsdag is een
 * reeks kleine schermen, de hero de aanvraagstroom en Groeien een planbord, zoals de widgets van de vorige site.
 */

/* ------------------------------------------------------------------------------------------------------------ */
/* Basis */

main h1, main h2, main h3 { margin: 0; text-wrap: balance; }
main p { margin: 0; }
.serif { font-family: var(--font-ui); font-weight: 600; }

/* ------------------------------------------------------------------------------------------------------------ */
/* Scène 0 · Hero: tekst links, rechts het paneel met één aanvraag van begin tot eind (onderdelen.mjs, stroomPaneel),
   zoals de aanvraagstroom op de vorige site. De stappen lichten na elkaar op. */

.held { position: relative; }
.held-inhoud {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--r12);
  padding-top: 72px; padding-bottom: var(--r16); align-items: center;
}
.held-eyebrow {
  display: block; margin-bottom: var(--r6);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-txt);
}
.held h1 { font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.held-groot { display: block; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; }
@media (min-width: 861px) { .held-groot .zin { display: block; white-space: nowrap; } }
.held-rest { display: block; margin-top: 0.5em; max-width: 22ch; font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-2); }
.held-sub { margin: var(--r6) 0 var(--r8); max-width: 50ch; font-size: 1.16rem; line-height: 1.6; color: var(--ink-2); }
.held-beeld { position: relative; }
.held-scroll { margin-top: var(--r4); font-size: var(--t-klein); color: var(--ink-3); text-align: center; }
@media (max-width: 860px) {
  .held-inhoud { grid-template-columns: 1fr; gap: var(--r8); padding-top: 40px; padding-bottom: var(--r12); }
  .held-groot { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
  .held-rest { font-size: 1.32rem; }
  .held-sub { margin: var(--r6) 0; font-size: 1.02rem; }
}

/* Panelen in de stijl van lead-follow.nl: wit, rand, zachte schaduw, een kopregel met het merk en een label. */
.stroom, .planbord, html.js .speler {
  margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-float);
}
.stroom, .planbord { padding: 20px 22px 18px; }
.stroom-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.paneel-merk { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.9rem; }
.paneel-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--champagne-txt); background: var(--gold-tint); padding: 3px 9px; border-radius: var(--r-pill); }
.stroom-lijst { list-style: none; margin: 14px 0 0; padding: 0; position: relative; }
.stroom-lijst::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--line); }
.stroom-lijst li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; }
.stroom-stip { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--green-soft); }
.stroom-lijst li:nth-child(2) .stroom-stip, .stroom-lijst li:last-child .stroom-stip { background: var(--champagne); box-shadow: 0 0 0 1px var(--champagne); }
.stroom-tekst b { display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.stroom-tekst span { display: block; font-size: 0.82rem; color: var(--ink-2); line-height: 1.4; }
.stroom-lijst time { font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* Na elkaar oplichten: de tekst staat er meteen (leesbaar en met genoeg contrast); de bolletjes lichten een voor een op
   en de rij schuift een paar pixels mee. */
@media (prefers-reduced-motion: no-preference) {
  .stroom-lijst li { animation: stroom-aan 600ms var(--ease-calm) both; animation-delay: calc(500ms + var(--i) * 650ms); }
  .stroom-lijst li .stroom-stip { animation: stroom-stip 600ms var(--ease-calm) both; animation-delay: calc(500ms + var(--i) * 650ms); }
}
@keyframes stroom-aan { from { transform: translateY(5px); } to { transform: none; } }
@keyframes stroom-stip { from { transform: scale(0.5); background: var(--line); box-shadow: 0 0 0 1px var(--line-strong); } 60% { transform: scale(1.25); } to { transform: none; } }

/* De melding: zoals op een telefoon, in neutraal grijs, met een algemeen icoontje (geen logo's van anderen). */
.melding {
  display: flex; align-items: center; gap: var(--r3); min-height: 60px; padding: 11px 14px; max-width: 380px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: 0 8px 24px rgba(23, 32, 27, 0.10); font-size: 0.88rem; line-height: 1.35; list-style: none;
}
.melding-app { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--green-tint); color: var(--green); }
.melding-tekst { flex: 1; min-width: 0; }
.melding-tekst b { font-weight: 600; }

/* ------------------------------------------------------------------------------------------------------------ */
/* Scène 1 en 3 · De dinsdag. Basis: momenten onder elkaar. */

.dag { padding: var(--r12) 0 var(--r8); }
.dag .momenten { list-style: none; margin: 0 auto; padding: 0 24px; max-width: 1120px; display: grid; gap: var(--r12); }
.moment-tijd { display: block; font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; font-size: 2.4rem; line-height: 1; color: var(--champagne-txt); font-variant-numeric: tabular-nums; }
.moment-tekst { margin-top: var(--r3); max-width: 30ch; font-size: var(--t-moment); line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; }
.moment-klein { margin-top: var(--r3); max-width: 44ch; font-size: 0.98rem; line-height: 1.5; color: var(--ink-2); }
.moment-beeld { position: relative; margin-bottom: var(--r4); max-width: 560px; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; }
@media (max-width: 760px) { .moment-beeld { aspect-ratio: 1 / 1; } }

/* Meldingen in de basis: gewoon een lijstje. */
.meldingen { margin-top: var(--r6); }
.melding-stapel { margin: 0; padding: 0; display: grid; gap: var(--r2); }
.melding-weg {
  flex: 0 0 auto; min-height: 32px; padding: 4px 10px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(23, 32, 27, 0.06); color: #3A413D; font: inherit; font-size: 0.78rem; font-weight: 600;
}
.melding-weg:hover { background: rgba(23, 32, 27, 0.11); }
.meldingen-blijven { margin-top: var(--r3); font-family: var(--font-ui); font-weight: 600; font-size: 1.2rem; }

/* Straks: de rustige kaartjes. In de basis staat alleen de eindstand. */
.kaartjes { list-style: none; margin: var(--r6) 0 0; padding: 0; display: grid; gap: var(--r2); max-width: 380px; }
.kaartje { display: grid; }
.kaartje > * { grid-area: 1 / 1; }
.kaartje-voor { visibility: hidden; }
.kaartje-achter {
  display: flex; align-items: center; gap: var(--r3); min-height: 52px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-size: 0.94rem; font-weight: 500; color: var(--ink);
}
.kaartje-achter::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--success); }

/* Nu en Straks naast elkaar (basis). */
html:not(.js) .dag-straks .moment { display: grid; grid-template-columns: auto 1fr 1fr; gap: var(--r3) var(--r8); align-items: start; }
html:not(.js) .dag-straks .moment-tijd { grid-row: span 2; }
.v-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.dag-straks .v-straks .v-label { color: var(--success); }
.dag-straks .moment-tekst { margin-top: var(--r2); font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.dag-straks .v-nu .moment-tekst { color: var(--ink-2); }
@media (max-width: 760px) {
  html:not(.js) .dag-straks .moment { grid-template-columns: 1fr; }
  html:not(.js) .dag-straks .moment-tijd { grid-row: auto; }
}
.dag-kop { padding-bottom: 0; }
.dag-kop h2 { font-size: var(--t-kop); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
.dag-slotzin { margin-top: var(--r8); font-family: var(--font-ui); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-2); font-size: clamp(1.1rem, 1.8vw, 1.35rem); line-height: 1.25; max-width: 1120px; text-wrap: balance; }

/* Avonden aantikken: een wit paneel met zeven tegels. Een aangetikte avond wordt donker met een warm lampje, als een
   raam dat 's avonds nog aan is. */
.avonden { margin-top: var(--r16); }
.avonden-vraag { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; max-width: 22ch; }
.avonden-paneel { margin-top: var(--r6); padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-float); }
.avonden-label { display: block; margin-bottom: 14px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.avonden-knoppen { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.avond {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  height: 76px; padding: 0 0 10px; border-radius: 14px; cursor: pointer; border: 1px solid var(--line); background: var(--ground);
  color: var(--ink-2); font: inherit; font-size: 0.86rem; font-weight: 600;
  transition: background 260ms var(--ease-calm), color 260ms var(--ease-calm), border-color 260ms var(--ease-calm), transform 100ms ease-out;
}
.avond::before { content: ""; width: 18px; height: 14px; border-radius: 3px; border: 1.5px solid var(--line-strong); background: transparent; transition: background 260ms var(--ease-calm), border-color 260ms var(--ease-calm), box-shadow 260ms var(--ease-calm); }
.avond:hover { border-color: var(--line-strong); }
.avond:active { transform: scale(0.96); }
.avond[aria-pressed="true"] { background: #16231D; border-color: #16231D; color: rgba(232, 236, 231, 0.85); }
.avond[aria-pressed="true"]::before { background: #F2D27E; border-color: #F2D27E; box-shadow: 0 0 14px 3px rgba(242, 210, 126, 0.35); }
.avonden-antwoord:not(:empty) { margin-top: 16px; }
.avonden-antwoord { margin: 0;  font-weight: 600; font-size: 1.05rem; color: var(--ink); }
@media (max-width: 520px) { .avonden-paneel { padding: 16px 14px; } .avonden-knoppen { gap: 5px; } .avond { height: 64px; border-radius: 12px; font-size: 0.78rem; } }

/* ------------------------------------------------------------------------------------------------------------ */
/* De dinsdag als speler (scène 1 en 3). Een wit paneel zoals de widgets op lead-follow.nl: bovenin de klok (en bij de
   andere avond de schakelaar Nu · Straks), in het midden de foto van dat moment met de tekst ernaast, onderin de
   tijdlijn van de dag. Je sleept de knop over de tijdlijn of tikt een tijdstip aan; de klok telt mee. In beeld loopt
   hij vanzelf door tot je hem aanraakt (dinsdag.js). Zonder JavaScript staat de basis hierboven: alle momenten onder
   elkaar. */

.speler-wrap { padding-top: 0; }
.speler .momenten { padding: 0; max-width: none; }
.dag-kop + .speler-wrap { padding-top: var(--r8); }
.speler-kop, .speler-onder { display: none; }
html.js .speler { padding: 18px 20px 16px; }
html.js .speler-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0 4px 12px; }
.speler-merk { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
html.js .speler .klok {
  font-family: var(--font-ui); font-weight: 600; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Het podium: alle momenten op dezelfde plek, alleen het actieve is zichtbaar. Het vorige vloeit weg ("weg"), de
   buren staan onzichtbaar klaar zodat hun foto alvast laadt ("buur"), maar pas als de speler bijna in beeld is
   ("dichtbij"): anders laadt de homepage foto's van ver onder de vouw. */
html.js .speler .momenten { position: relative; display: grid; margin: 0; padding: 0; max-width: none; gap: 0; }
html.js .speler .moment { grid-area: 1 / 1; display: none; }
html.js .speler:not(.klaar) .moment:first-child,
html.js .speler .moment.actief, html.js .speler .moment.weg, html.js .speler.dichtbij .moment.buur { display: grid; }
html.js .speler .moment.buur { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
html.js .speler .moment.weg { position: absolute; inset: 0; z-index: 0; visibility: visible; pointer-events: none; animation: speler-uit 420ms var(--ease-calm) forwards; }
html.js .speler .moment.actief { position: relative; z-index: 1; }
html.js .speler.klaar .moment.actief { animation: speler-in 460ms var(--ease-calm); }
html.js .speler.sleept .moment.actief { animation: none; }
@keyframes speler-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes speler-uit { from { opacity: 1; } to { opacity: 0; } }

/* Eén moment: scherm links, tekst rechts. Bij de andere avond is dat per versie (.v), de schakelaar kiest welke. */
html.js .dag:not(.dag-straks) .speler .moment,
html.js .dag-straks .speler .v {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: var(--r12); align-items: start;
}
html.js .dag-straks .speler .moment.actief, html.js .dag-straks .speler .moment.weg, html.js .dag-straks .speler.dichtbij .moment.buur,
html.js .dag-straks .speler:not(.klaar) .moment:first-child { display: block; }
html.js .dag-straks .speler .v { display: none; position: relative; }
html.js .speler[data-stand="nu"] .v-nu, html.js .speler[data-stand="straks"] .v-straks { display: grid; }
/* De andere versie van het actieve moment staat onzichtbaar klaar, zodat de schakelaar meteen iets laat zien. */
html.js .speler.dichtbij[data-stand="nu"] .moment.actief .v-straks, html.js .speler.dichtbij[data-stand="straks"] .moment.actief .v-nu {
  display: grid; position: absolute; inset: 0; visibility: hidden; pointer-events: none;
}
html.js .speler[data-stand] .moment.actief .v.weg { display: grid; position: absolute; inset: 0; visibility: visible; z-index: 2; pointer-events: none; animation: speler-uit 420ms var(--ease-calm) forwards; }
/* Bij het wisselen vloeit alleen het beeld over; de oude tekst verdwijnt meteen en de nieuwe komt zacht op, anders
   schemeren twee zinnen door elkaar. */
html.js .speler .moment.weg :is(.moment-tekst, .moment-klein, .meldingen, .kaartjes),
html.js .speler[data-stand] .moment.actief .v.weg :is(.moment-tekst, .moment-klein, .meldingen, .kaartjes) { visibility: hidden; }
html.js .speler .v.kom :is(.moment-tekst, .moment-klein, .kaartjes, .meldingen) { animation: speler-in 420ms var(--ease-calm); }
html.js .speler .v-label, html.js .speler .moment-tijd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

html.js .speler .moment-beeld { grid-column: 1; grid-row: 1 / -1; margin: 0; max-width: none; position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: hidden; }
html.js .speler .moment-tekst { grid-column: 2; grid-row: 2; margin: 0; max-width: 18ch; font-size: clamp(1.5rem, 2.5vw, 2.15rem); line-height: 1.2; color: var(--ink); }
html.js .speler .moment-klein { grid-column: 2; grid-row: 3; }
html.js .dag-straks .speler .moment-tekst { margin: 0; }
html.js .dag-straks .speler .v-nu .moment-tekst { color: var(--ink); }

/* Meldingen (Nu) en kaartjes (Straks) liggen over het scherm, onderaan. */
html.js .speler .meldingen, html.js .speler .kaartjes {
  grid-column: 1; grid-row: 1 / -1; align-self: end; z-index: 2; margin: 0 18px 18px; width: auto; max-width: 400px;
}
html.js .speler .meldingen-blijven { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 8px 24px rgba(23, 32, 27, 0.10); font-size: 1rem; color: var(--ink); opacity: 0; transition: opacity 400ms ease; }
html.js .speler .meldingen-blijven.zichtbaar { opacity: 1; }
html.js .speler .melding-stapel .melding { touch-action: pan-y; user-select: none; cursor: grab; will-change: transform; }
/* Eén vaste hoogte per melding (maximaal twee regels), zodat de stapel altijd netjes onder elkaar valt. */
html.js .speler .melding-stapel .melding { height: 62px; min-height: 0; box-sizing: border-box; }
html.js .speler .melding-tekst { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.js .speler .melding-stapel .melding.sleept { cursor: grabbing; }
.melding.nieuw { animation: melding-in 260ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both; }
/* Op translate, scale en rotate in plaats van transform: die tellen op bij de transform waarmee de stapel elke
   melding op zijn plek zet (dinsdag.js), in plaats van hem te overschrijven. */
@keyframes melding-in {
  0% { opacity: 0; translate: 0 -14px; scale: 0.96; }
  60% { opacity: 1; translate: 0 2px; rotate: -0.6deg; scale: 1; }
  80% { translate: 0 -1px; rotate: 0.4deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
html.js .speler .kaartje-achter { box-shadow: 0 8px 24px rgba(23, 32, 27, 0.10); }
html.js .speler .kaartje-voor, html.js .speler .kaartje-achter { visibility: visible; transition: opacity 520ms var(--ease-calm), transform 700ms var(--ease-calm); }
html.js .speler .kaartje .kaartje-voor { opacity: 0; transform: translateY(-8px); }
html.js .speler .kaartje .kaartje-achter { opacity: 0; transform: perspective(600px) rotateX(-70deg); transform-origin: top; }
html.js .speler .kaartje.binnen .kaartje-voor { opacity: 1; transform: none; }
html.js .speler .kaartje.om .kaartje-voor { opacity: 0; transform: perspective(600px) rotateX(70deg); transform-origin: bottom; }
html.js .speler .kaartje.om .kaartje-achter { opacity: 1; transform: none; }

/* De schermen (onderdelen.mjs, scherm): bij Nu wat er op je telefoon en laptop gebeurt, grijs met rode tellers; bij
   Straks wat LeadFollow deed, in het groen van het merk; 23:04 is donker. Rijen als de kaarten op de vorige site. */
.scherm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 16px; font-size: 0.86rem; line-height: 1.35; color: var(--ink); overflow: hidden; }
/* De achtergrond: het stippenraster van de vorige site over een zacht verloop, met een fijne binnenrand. Nu warm grijs
   en wat onrustig, Straks zachtgroen met een gouden gloed in de hoek, 23:04 een nachthemel met een paar lichtjes. */
.scherm { box-shadow: inset 0 0 0 1px rgba(23, 32, 27, 0.06); }
.scherm-nu {
  background:
    radial-gradient(circle at 1px 1px, rgba(23, 32, 27, 0.13) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(90% 70% at 100% 0%, rgba(162, 54, 30, 0.07), transparent 70%),
    linear-gradient(160deg, #F2F0EA 0%, #E7E9E4 55%, #DCE0DA 100%);
}
.scherm-straks {
  background:
    radial-gradient(circle at 1px 1px, rgba(14, 59, 46, 0.14) 1px, transparent 1.5px) 0 0 / 16px 16px,
    radial-gradient(80% 70% at 100% 0%, rgba(194, 161, 94, 0.22), transparent 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(60, 107, 87, 0.16), transparent 70%),
    linear-gradient(160deg, #EEF4EF 0%, #E1EBE3 60%, #D7E5DB 100%);
}
.scherm-nacht {
  color: #E8ECE7;
  background:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, 0.55), transparent 2px),
    radial-gradient(1px 1px at 72% 14%, rgba(255, 255, 255, 0.45), transparent 2px),
    radial-gradient(1.5px 1.5px at 86% 38%, rgba(255, 255, 255, 0.35), transparent 2px),
    radial-gradient(1px 1px at 40% 8%, rgba(255, 255, 255, 0.4), transparent 2px),
    radial-gradient(60% 50% at 50% 42%, rgba(194, 161, 94, 0.16), transparent 70%),
    linear-gradient(180deg, #1C2E26 0%, #121E19 100%);
}
.s-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 2px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3); }
.s-kop > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.s-kop b { color: var(--ink); font-weight: 600; letter-spacing: 0; }
.scherm-nacht .s-kop, .scherm-nacht .s-kop b { color: rgba(232, 236, 231, 0.7); }
.s-rij { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid rgba(23, 32, 27, 0.06); border-radius: 12px; box-shadow: 0 2px 8px rgba(23, 32, 27, 0.05); }
.s-ico { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #DCE0DB; color: #3A413D; }
.scherm-straks .s-ico { background: var(--green-tint); color: var(--green); }
.s-letter { font-weight: 700; font-size: 0.85rem; }
.s-tekst { flex: 1; min-width: 0; }
.s-tekst b { display: block; font-weight: 600; font-size: 0.86rem; }
.s-tekst span { display: block; color: var(--ink-2); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-meta { flex: 0 0 auto; font-size: 0.74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.s-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--critical); color: #FFF; font-size: 0.74rem; font-weight: 700; }
.s-ok { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-weight: 600; }
.s-ok svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--success-tint); }
.s-chip { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--warning-tint); color: var(--warning); }
.s-knop { font-size: 0.74rem; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill); background: var(--green); color: #FFF; }
.s-rij-dim { opacity: 0.6; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; color: #E8ECE7; }
.s-rij-dim .s-ico { background: rgba(255, 255, 255, 0.1); color: #E8ECE7; }
.s-rij-dim .s-tekst span { color: rgba(232, 236, 231, 0.7); }
/* Een telefoon die trilt (09:40, onder de meldingen). */
.s-trilt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0.35; }
.s-trilt span { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
/* Route (16:10 en 17:15). */
.s-route { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 12px; padding: 12px 14px; background: var(--surface); border-radius: 12px; border: 1px solid rgba(23, 32, 27, 0.06); color: var(--ink-3); }
.s-route svg { grid-column: 1 / -1; width: 100%; height: auto; max-height: 92px; margin-bottom: 6px; }
.s-route-van { fill: var(--ink-3); }
.s-route-naar { fill: var(--critical); }
.s-route b { font-size: 1.2rem; color: var(--ink); }
.s-route span { font-size: 0.78rem; text-align: right; }
.s-bubbel { align-self: flex-start; max-width: 86%; padding: 10px 14px; background: var(--surface); border-radius: 4px 16px 16px 16px; box-shadow: 0 2px 8px rgba(23, 32, 27, 0.06); font-size: 0.92rem; }
/* Laptopvenster met offertes (21:40). */
.s-venster { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; background: rgba(246, 247, 245, 0.92); box-shadow: 0 10px 30px rgba(23, 32, 27, 0.10); border-radius: 12px; border: 1px solid rgba(23, 32, 27, 0.08); }
.s-titelbalk { display: flex; align-items: center; gap: 6px; padding: 10px 0 4px; font-size: 0.74rem; font-weight: 600; color: var(--ink-3); }
.s-titelbalk i { width: 9px; height: 9px; border-radius: 50%; background: #D6D9D4; }
.s-titelbalk span { margin-left: 8px; }
.s-voet { margin-top: auto; font-size: 0.74rem; color: var(--ink-3); text-align: right; }
/* Groot getal (de wekker om 23:04). */
.s-groot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.s-groot svg { width: 28px; height: 28px; opacity: 0.6; }
.s-groot b { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; font-size: 3rem; line-height: 1; }
.s-groot span { font-size: 0.78rem; opacity: 0.7; }
/* Emma is bezig (09:40 Straks). */
.s-live { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface); font-weight: 600; font-size: 0.8rem; color: var(--green); }
.s-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(27, 110, 75, 0.5); animation: s-puls 1.6s ease-out infinite; }
@keyframes s-puls { to { box-shadow: 0 0 0 8px rgba(27, 110, 75, 0); } }
/* Lege, rustige staat (12:30 en 21:40 Straks). */
.s-leeg { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; background: var(--surface); border-radius: 12px; padding: 14px; }
.s-leeg .s-ok svg { width: 40px; height: 40px; padding: 9px; }
.s-leeg b { font-size: 1.05rem; }
.s-leeg span { font-size: 0.82rem; color: var(--ink-2); }
/* De afspraak met wat Emma vooraf vroeg (16:10 Straks). */
.s-kaart { padding: 14px 16px; background: var(--surface); border-radius: 12px; }
.s-kaart b { display: block; font-size: 0.98rem; }
.s-kaart > span { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--champagne-txt); }
.s-kaart ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.s-kaart li { position: relative; padding-left: 20px; font-size: 0.86rem; color: var(--ink-2); }
.s-kaart li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--green-soft); background: var(--green-tint); }
/* De agenda van de dag (17:15 Straks). */
.s-dag { display: grid; gap: 6px; }
.s-dag div { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface); border-radius: 10px; box-shadow: inset 3px 0 0 var(--green-soft); }
.s-dag time { font-size: 0.76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.s-dag span { font-weight: 600; font-size: 0.86rem; }
.s-dag .s-klaar { box-shadow: inset 3px 0 0 var(--champagne); background: var(--gold-tint); }
/* De kopregel blijft bovenaan; de rest staat midden in het scherm, zodat er geen lege onderhelft is. */
.scherm > .s-kop + * { margin-top: auto; }
.scherm > :last-child { margin-bottom: auto; }
.scherm > .s-kop:only-child { margin-bottom: auto; }
/* Om 09:40 liggen de meldingen of kaartjes onderin; het label "Emma is in gesprek" hoort dan direct onder de kop. */
.scherm > .s-kop + .s-live { margin-top: 2px; }
@media (min-width: 1024px) {
  .scherm { padding: 20px; gap: 12px; font-size: 0.92rem; }
  .s-rij { padding: 12px 14px; gap: 12px; }
  .s-ico { flex-basis: 36px; height: 36px; }
  .s-tekst b { font-size: 0.95rem; }
  .s-tekst span { font-size: 0.84rem; }
}
@media (max-width: 760px) {
  .scherm { padding: 12px; gap: 8px; }
  .s-rij { padding: 8px 10px; }
  .s-groot b { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .s-live i { animation: none; } }

/* De tijdlijn: een spoor met een stip per moment, een knop die je pakt en sleept (1-op-1 met je vinger), en de
   tijden eronder. Daarnaast vorige, de teller, volgende en pauze. */
html.js .speler-onder { display: flex; align-items: center; gap: var(--r6); margin-top: 18px; padding: 6px 4px 0; }
.tijdlijn { position: relative; flex: 1; height: 56px; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; border-radius: var(--r-s); }
.tijdlijn.sleept { cursor: grabbing; }
.tijdlijn:focus-visible { outline: 2px solid var(--green-soft); outline-offset: 4px; }
.tijdlijn-spoor { position: absolute; left: 11px; right: 11px; top: 16px; height: 4px; border-radius: 4px; background: var(--line); }
.tijdlijn-vul { position: absolute; inset: 0; border-radius: 4px; background: var(--green-soft); transform-origin: left; transform: scaleX(var(--f, 0)); }
.tijdlijn-stop { position: absolute; top: 12px; width: 12px; margin-left: -6px; text-align: center; pointer-events: none; }
.tijdlijn-stop i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color 200ms var(--ease-calm), background 200ms var(--ease-calm); }
.tijdlijn-stop.voorbij i { border-color: var(--green-soft); background: var(--green-soft); }
.tijdlijn-stop b { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 0.74rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 200ms var(--ease-calm); }
.tijdlijn-stop.nu b { color: var(--ink); font-weight: 600; }
.tijdlijn-duim {
  position: absolute; top: 6px; left: 11px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: var(--green); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--green), 0 4px 12px rgba(23, 32, 27, 0.22);
  transform: translateX(var(--x, 0px)); pointer-events: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Vastgepakt: iets groter, en hij volgt je vinger zonder vertraging. Schalen in dezelfde transform, anders telt de
   vergroting ook mee bij de verschuiving. */
.tijdlijn.sleept .tijdlijn-duim { transition: none; transform: translateX(var(--x, 0px)) scale(1.15); }
.tijdlijn.sleept .tijdlijn-vul { transition: none; }
.tijdlijn-vul { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Vanzelf afspelen: de knop glijdt gelijkmatig mee (dinsdag.js, plan), dus geen eigen overgang erbovenop. */
.tijdlijn.glijdt .tijdlijn-duim, .tijdlijn.glijdt .tijdlijn-vul { transition: none; }
.speler-knoppen { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.speler-knop {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  transition: background 200ms var(--ease-calm), border-color 200ms var(--ease-calm), transform 100ms ease-out;
}
.speler-knop:hover { border-color: var(--ink-3); }
.speler-knop:active { transform: scale(0.94); }
.speler-knop:disabled { opacity: 0.35; cursor: default; transform: none; }
.speler-teller { min-width: 3.4em; text-align: center; font-size: 0.86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.speler-pauze { margin-left: 6px; }
.speler-pauze .i-speel, .speler.gepauzeerd .speler-pauze .i-pauze { display: none; }
.speler.gepauzeerd .speler-pauze .i-speel { display: block; }

/* De schakelaar Nu · Straks: de segmentknop van lead-follow.nl. */
.schakelaar {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
}
html:not(.js) .schakelaar { display: none; }
.schakel {
  position: relative; z-index: 1; min-width: 84px; min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: transparent; color: var(--ink-2); font: inherit; font-size: 0.9rem; font-weight: 500;
  transition: color 200ms var(--ease-calm), transform 100ms ease-out;
}
.schakel:hover { color: var(--ink); }
.schakel:active { transform: scale(0.97); }
.schakel[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.schakel-duim {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill);
  background: var(--surface); box-shadow: 0 1px 3px rgba(23, 32, 27, 0.12);
  transition: transform 420ms cubic-bezier(0.3, 1.3, 0.5, 1);
}
.speler[data-stand="straks"] .schakel-duim { transform: translateX(100%); }

@media (max-width: 760px) {
  html.js .speler { padding: 12px 12px 10px; border-radius: var(--r-l); }
  html.js .speler-kop { min-height: 52px; padding: 0 2px 10px; }
  html.js .speler .klok { font-size: 2.3rem; }
  .speler-merk { font-size: 0.82rem; }
  html.js .dag:not(.dag-straks) .speler .moment,
  html.js .dag-straks .speler .v { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px; }
  html.js .speler .moment-beeld { grid-row: 1; aspect-ratio: 5 / 4; border-radius: var(--r-m); }
  html.js .speler .moment-tekst { grid-column: 1; grid-row: 2; min-height: 3.6em; max-width: none; padding: 0 4px; font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
  html.js .speler .moment-klein { grid-column: 1; grid-row: 3; margin-top: -6px; padding: 0 4px; font-size: 0.92rem; }
  html.js .speler .moment-tekst:has(+ .moment-klein) { min-height: 0; }
  html.js .speler .meldingen, html.js .speler .kaartjes { grid-row: 1; margin: 0 10px 10px; }
  html.js .speler .melding { padding: 8px 10px; font-size: 0.82rem; }
  html.js .speler .melding-stapel .melding { height: 58px; }
  html.js .speler .meldingen-blijven { font-size: 1.05rem; }
  html.js .speler-onder { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; padding: 0; }
  .tijdlijn { flex: none; height: 52px; }
  .tijdlijn-stop b { opacity: 0; }
  .tijdlijn-stop.nu b { opacity: 1; }
  .speler-knoppen { justify-content: center; }
  .schakel { min-width: 64px; min-height: 36px; padding: 0 12px; font-size: 0.86rem; }
}
/* Op smalle telefoons wordt Wegdoen een kruisje, zodat de melding zelf leesbaar blijft. De tekst blijft de naam
   van de knop voor schermlezers. */
@media (max-width: 420px) {
  html.js .speler .melding-weg { width: 32px; height: 32px; padding: 0; font-size: 0; display: grid; place-items: center; }
  html.js .speler .melding-weg::before { content: "\00D7"; font-size: 1.15rem; line-height: 1; font-weight: 500; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .speler .moment.actief, html.js .speler .moment.weg, html.js .speler .v.weg { animation: none; }
  html.js .speler .moment.weg, html.js .speler .v.weg { display: none; }
  .tijdlijn-duim, .tijdlijn-vul { transition: none; }
}

/* ------------------------------------------------------------------------------------------------------------ */
/* Scène 2 · Die ene klus: één aanvraag een week lang, in een wit paneel. Bovenin de dagen ma tot vr, daaronder het
   verloop als berichten. "Zoals nu" eindigt bij een ander, "Met LeadFollow" bij de opdracht. dinsdag.js speelt het af
   zodra het in beeld komt; zonder JavaScript staat alles er meteen. */
.klus { padding-top: var(--r24); }
.klus h2 { font-size: var(--t-kop); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; max-width: 20ch; }
.week { margin-top: var(--r8); padding: 20px 22px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-float); }
.week-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.week-schakelaar { position: relative; }
.week[data-stand="straks"] .schakel-duim { transform: translateX(100%); }
html:not(.js) .week-schakelaar, html:not(.js) .week-opnieuw { display: none; }
.week-dagen { list-style: none; margin: 18px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.week-dagen::before { content: ""; position: absolute; left: 10%; right: 10%; top: 31px; height: 2px; background: var(--line); }
.week-dagen li { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.week-dagen b { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); transition: color 260ms var(--ease-calm); }
.week-dagen i { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); transition: background 300ms var(--ease-calm), border-color 300ms var(--ease-calm), transform 300ms var(--ease-calm); }
.week-dagen li.voorbij i { background: var(--ink-3); border-color: var(--ink-3); }
.week[data-stand="straks"] .week-dagen li.voorbij i { background: var(--green-soft); border-color: var(--green-soft); }
.week-dagen li.nu b { color: var(--ink); }
.week-dagen li.nu i { transform: scale(1.3); }
.week-draad { margin-top: 10px; }
.wk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html.js .week[data-stand="nu"] .wk-straks, html.js .week[data-stand="straks"] .wk-nu { display: none; }
html:not(.js) .wk-straks { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.wk-ev { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; }
.wk-wanneer { padding-top: 11px; font-size: 0.78rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.wk-bericht { justify-self: start; max-width: 520px; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--ground); border: 1px solid var(--line); font-size: 0.94rem; line-height: 1.45; color: var(--ink); }
.wk-bericht small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--ink-3); }
.wk-uit .wk-bericht { background: var(--surface); border-radius: 16px 4px 16px 16px; }
.wk-emma .wk-bericht { background: var(--green-tint); border-color: transparent; color: var(--green); font-weight: 600; }
.wk-emma .wk-bericht small { color: var(--green-soft); font-weight: 500; }
.wk-stil .wk-bericht { background: transparent; border-style: dashed; color: var(--ink-3); }
.wk-uitkomst { justify-self: start; margin: 6px 0 0 90px; padding: 6px 14px; border-radius: var(--r-pill); font-size: 0.82rem; font-weight: 600; }
.wk-verloren { background: rgba(162, 54, 30, 0.08); color: var(--critical); }
.wk-gewonnen { background: var(--success-tint); color: var(--success); }
html.js .week .wk-lijst > li { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-calm), transform 520ms var(--ease-calm); }
html.js .week .wk-lijst > li.te-zien { opacity: 1; transform: none; }
.week-opnieuw { margin-top: 14px; padding: 8px 0; border: 0; background: none; color: var(--green-soft); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.week-opnieuw:hover { text-decoration: underline; text-underline-offset: 3px; }
.klus-bron { margin-top: var(--r4); max-width: 70ch; font-size: 0.8rem; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 600px) {
  .week { padding: 16px 14px 14px; border-radius: var(--r-l); }
  .week-kop .paneel-merk { font-size: 0.84rem; }
  .wk-ev { grid-template-columns: 1fr; gap: 4px; }
  .wk-wanneer { padding-top: 0; }
  .wk-uitkomst { margin-left: 0; }
  .wk-uit .wk-bericht { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { html.js .week .wk-lijst > li { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------------------------------------------------------ */
/* Het kleine kopje boven elk blok, zoals elders op lead-follow.nl: zo leest de homepage als één verhaal. */
.sectie-label { display: block; margin-bottom: var(--r4); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-txt); }

/* Scène 4 · Groeien */

.groeien { padding-top: var(--r24); }
/* Tekst links, de agenda rechts; op een telefoon de tekst eerst. */
.groeien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--r16); align-items: center; }
.groeien-beeld { position: relative; }
@media (max-width: 960px) { .groeien { grid-template-columns: 1fr; gap: var(--r12); } }

/* De agenda (onderdelen.mjs, planbord): twee kolommen, een per bus, met afspraakkaartjes zoals de rest van de site.
   Bus 1 met een groene rand, de nieuwe Bus 2 met champagne. */
.pb-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.pb-kolom { padding: 12px; border-radius: var(--r-l); background: var(--ground); }
.pb-kolom-2 { background: linear-gradient(180deg, var(--gold-tint), var(--ground) 70%); }
.pb-kolomkop { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.pb-kolomkop b { font-size: 0.95rem; }
.pb-kolomkop em { font-style: normal; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--champagne-txt); background: var(--surface); padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--champagne) 45%, transparent); }
.pb-kolomkop span { margin-left: auto; font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; }
.pb-kolomkop b { white-space: nowrap; }
@media (max-width: 1180px) { .pb-kolomkop span { display: none; } }
.pb-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-afspraak {
  display: grid; gap: 2px; padding: 11px 13px 11px 15px; background: var(--surface); border-radius: 12px;
  box-shadow: inset 3px 0 0 var(--green-soft), 0 2px 8px rgba(23, 32, 27, 0.05);
}
.pb-kolom-2 .pb-afspraak { box-shadow: inset 3px 0 0 var(--champagne), 0 2px 8px rgba(23, 32, 27, 0.05); }
.pb-afspraak time { font-size: 0.74rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pb-afspraak b { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.pb-afspraak span { font-size: 0.76rem; color: var(--ink-3); }
.pb-afspraak .pb-emma { display: inline-flex; align-items: center; color: var(--success); font-weight: 600; }
.pb-afspraak .pb-emma::before { margin-right: 6px; }
.pb-afspraak .pb-emma > span { color: inherit; font-size: inherit; margin-right: 0.28em; }
.pb-afspraak .pb-emma::before, .pb-stip { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.planbord figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; font-size: 0.82rem; color: var(--ink-2); }
.pb-stip { display: inline-block; flex: 0 0 6px; transform: translateY(-2px); }
.pb-kort { display: none; }
html.js .planbord .pb-afspraak { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--ease-calm), transform 520ms cubic-bezier(0.3, 1.3, 0.5, 1); transition-delay: calc(var(--i) * 140ms); }
html.js .planbord.zichtbaar .pb-afspraak { opacity: 1; transform: none; }
@media (max-width: 520px) {
  .planbord { padding: 16px 14px 14px; }
  .pb-kolommen { gap: 8px; }
  .pb-kolom { padding: 8px; }
  .pb-kolomkop { flex-wrap: wrap; gap: 4px 6px; padding: 2px 2px 8px; }
  .pb-kolomkop span { display: none; }
  .pb-afspraak { padding: 9px 10px 9px 12px; }
  .pb-afspraak b { font-size: 0.84rem; }
  .pb-afspraak .pb-emma { font-size: 0.72rem; }
  .pb-lang { display: none; }
  .pb-kort { display: inline; }
}
@media (prefers-reduced-motion: reduce) { html.js .planbord .pb-afspraak { opacity: 1; transform: none; transition: none; } }
.groeien-regels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r2); }
.groeien-regels li { font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
.groeien-regels li:last-child { color: var(--ink-2); font-weight: 500; }
.groeien-aanloop { margin: var(--r8) 0 var(--r4); font-size: var(--t-groot); color: var(--ink-2); }

/* Scène 5 · Hoe het kan */
.hoe { padding-top: var(--r24); }
.hoe-avonden { margin-bottom: var(--r4); font-family: var(--font-ui); font-weight: 500; font-size: 1.1rem; color: var(--ink-2); }
.hoe h2 { font-size: var(--t-kop); line-height: 1.12; letter-spacing: -0.025em; font-weight: 600; }
/* Drie stappen in één rustig paneel, zoals de aanvraagstroom: een klein genummerd rondje, een korte titel en één regel
   uitleg. Naast elkaar op een breed scherm, onder elkaar met een lijntje op een telefoon. */
.hoe-lijst {
  list-style: none; margin: var(--r8) 0 0; padding: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-float); position: relative;
}
.hoe-lijst li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; position: relative; }
.hoe-nr { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--green-tint); color: var(--green); font-weight: 600; font-size: 0.95rem; }
.hoe-lijst li:last-child .hoe-nr { background: var(--green); color: var(--green-ink); }
.hoe-lijst p { margin: 0; padding-top: 4px; }
.hoe-lijst p b { display: block; font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.hoe-lijst p span { display: block; margin-top: 4px; font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 760px) {
  .hoe-lijst { grid-template-columns: 1fr; gap: 0; padding: 18px 18px 6px; border-radius: var(--r-l); }
  .hoe-lijst li { padding-bottom: 18px; }
  .hoe-lijst li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--line); }
}
.hoe-link { margin: var(--r6) 0 0; }
.hoe-link a { padding: 8px 0; color: var(--green-soft); font-weight: 600; text-decoration: none; }
.hoe-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hoe-garantie { margin: calc(var(--r8) * -1) 0 var(--r12); color: var(--ink-2); }

/* Scène 6 · Oprichters */
.oprichters { padding-top: var(--r24); }
/* Het citaat van de oprichters: rustig, in de lettergrootte van een tussenkop, met hun beginletters als avatars. */
.oprichters-citaat { margin: 0; padding: 0 0 0 20px; max-width: 46rem; box-shadow: inset 3px 0 0 var(--champagne); }
.oprichters-citaat blockquote { margin: 0; }
.oprichters-citaat p { font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); }
.oprichters-citaat figcaption { display: flex; align-items: center; gap: 12px; margin-top: var(--r6); }
.opr-letters { display: inline-flex; }
.opr-letters i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--green-ink); font-style: normal; font-weight: 600; font-size: 0.95rem; border: 2px solid var(--ground); }
.opr-letters i + i { margin-left: -10px; background: var(--green-soft); }
.oprichters-citaat figcaption b { display: block; font-size: 0.95rem; }
.oprichters-citaat figcaption span span { display: block; font-size: 0.84rem; color: var(--ink-3); }
.oprichters-kop { margin: var(--r16) 0 var(--r6); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne-txt); }
.oprichters-meer { margin-top: var(--r6); }
.oprichters-meer a { padding: 8px 0; color: var(--green-soft); font-weight: 600; text-decoration: none; }

/* Scène 7 · Slot */
/* Het slot: een afgerond donkergroen paneel binnen de rand, zoals "Die ene klus", met alles in het midden. */
.slotscene { margin: var(--r24) auto var(--r16); padding: 0 24px; max-width: 1120px; }
.slotscene-binnen { padding: var(--r16) var(--r12); background: var(--green); color: var(--green-ink); border-radius: var(--r-xl); text-align: center; }
.slotscene h2 { margin: 0 auto; max-width: 22ch; font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -0.025em; color: #FFFFFF; }
.slotscene h2 span { display: block; }
.slotscene h2 span:first-child { font-size: 0.62em; font-weight: 500; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.75); margin-bottom: 0.25em; }
.slot-groot { color: #FFFFFF; }
.slotscene .groei-actie { margin-top: var(--r8); align-items: center; }
.slotscene .groei-micro { color: rgba(255, 255, 255, 0.72); }
.slot-eigendom { display: inline-flex; align-items: center; gap: 8px; margin: var(--r6) 0 0; font-size: 0.84rem; color: rgba(255, 255, 255, 0.7); }
.slot-eigendom::before { content: ""; width: 14px; height: 8px; border-left: 2px solid var(--champagne); border-bottom: 2px solid var(--champagne); transform: rotate(-45deg) translateY(-2px); }
main + .voet { margin-top: 0; }

@media (max-width: 700px) {
  .groeien, .hoe, .oprichters { padding-top: 72px; }
  .groeien-regels li { font-size: 1.55rem; }
  .slotscene { margin-top: var(--r16); margin-bottom: var(--r12); padding: 0 16px; }
  .slotscene-binnen { padding: var(--r12) var(--r6); border-radius: var(--r-l); }
  .slotscene .groei-actie { align-items: stretch; }
  .slot-eigendom { text-align: left; }
  .dag { padding: var(--r8) 0 var(--r6); }
  .held-inhoud { padding-bottom: var(--r8); }
}

@media (prefers-reduced-motion: reduce) {
  .avond, .avond::before, .schakel-duim { transition: none; }
  .melding.nieuw { animation: none; }
}

/* Zonder JavaScript doen deze knoppen niets; dan staan ze er ook niet. De vraag naar de avonden blijft staan. */
html:not(.js) .melding-weg, html:not(.js) .avonden-knoppen, html:not(.js) .avonden-antwoord { display: none; }

/* De regel over eigendom onder de hero (prompt 07). */
.held-onder { grid-column: 1 / -1; }
.eigendom-regel { margin: 0; font-size: 0.86rem; color: var(--ink-3); }

/* ---- Eén dinsdag: zoals nu en met LeadFollow (14 oktober 2026) ----
   Het verschil moet in één oogopslag te zien zijn: met LeadFollow kleurt de speler groen op, de schakelaar is groter,
   en aan het eind van de dag "zoals nu" springt een knop naar dezelfde dag met LeadFollow. */
.schakelaar-groot .schakel { min-height: 44px; padding: 0 18px; font-size: 0.95rem; white-space: nowrap; }
@media (max-width: 760px) { .schakelaar-groot .schakel { padding: 0 14px; font-size: 0.9rem; } }
/* Op een telefoon krijgt de schakelaar een eigen regel onder de klok, over de hele breedte: dan past "Met LeadFollow". */
@media (max-width: 480px) {
  html.js .speler-kop:has(.schakelaar-groot) { flex-wrap: wrap; row-gap: 10px; }
  .schakelaar-groot { flex: 1 1 100%; }
}
.speler[data-stand="straks"] .schakelaar-groot .schakel-duim { background: var(--green); }
.speler[data-stand="straks"] .schakelaar-groot .schakel[data-zet="straks"] { color: var(--green-ink); }
.speler { transition: box-shadow 400ms var(--ease-calm); }
.speler[data-stand="straks"] { box-shadow: 0 0 0 2px var(--green-soft), 0 18px 50px -20px color-mix(in srgb, var(--green) 45%, transparent); }
.dag-straks .v-nu .v-label { color: var(--ink-3); }
.dag-straks .v-straks .v-label { font-weight: 600; }
.speler-wissel {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px auto 4px; min-height: 48px;
  padding: 0 24px; border: 0; border-radius: var(--r-pill); background: var(--green); color: var(--green-ink);
  font: inherit; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: var(--shadow-float);
  animation: wisselIn 420ms var(--ease-calm) both;
}
.speler-wissel[hidden] { display: none; }
.speler-wissel:active { transform: scale(0.97); }
@keyframes wisselIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .speler-wissel { animation: none; } .speler { transition: none; } }

/* De dinsdag loopt door tot woensdag 08:14: daar zie je hoe de lekkage van 09:40 afloopt (15 oktober 2026). */
html.js .speler .klok { display: inline-flex; align-items: baseline; gap: 8px; }
.klok-dag { font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--champagne-txt); text-transform: uppercase; }
.klok-dag[hidden] { display: none; }
.s-uitkomst { align-self: stretch; margin-top: auto; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; text-align: center; }
.s-uitkomst-weg { background: rgba(162, 54, 30, 0.1); color: var(--critical); }
.s-uitkomst-binnen { background: var(--success-tint); color: var(--success); }
.dag-bron { margin-top: var(--r4); }
/* Het laatste label (wo 08:14) is langer: rechts uitlijnen, anders loopt het op de telefoon over de rand. */
.tijdlijn-stop:last-child b { left: auto; right: -2px; transform: none; }