/* Opmaak van de blokken (cijfers, kaarten, tabel, lijstje, beeld).
   Wordt door de gewone pagina's en door de presentatie gebruikt. */

html, body.deck-body { height: 100%; }

.dk-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 9px; z-index: 40; }

.dk-dots a { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,35,57,.22); display: block; position: relative; }

.dk-dots a.on { background: var(--lime); transform: scale(1.35); }

.dk-dots a span {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 11.5px; font-family: 'IBM Plex Mono', monospace;
  color: var(--zinc-700); background: #fff; border: 1px solid rgba(0,0,0,.15);
  padding: 2px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .15s;
}

.dk-dots a:hover span { opacity: 1; }

.dk-counter { position: fixed; left: 22px; bottom: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--zinc-500); z-index: 40; }

.dk-hint { position: fixed; right: 22px; bottom: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--zinc-500); z-index: 40; }

@media (max-width: 800px) {
.dk-dots, .dk-hint { display: none; }
}

.rv > * { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }

.in .rv > * { opacity: 1; transform: none; }

.in .rv > *:nth-child(2) { transition-delay: .07s; }

.in .rv > *:nth-child(3) { transition-delay: .14s; }

.in .rv > *:nth-child(4) { transition-delay: .21s; }

.in .rv > *:nth-child(5) { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
.rv > * { opacity: 1; transform: none; transition: none; }
}

.dk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 8px 0 22px; }

@media (max-width: 900px) {
.dk-stats { grid-template-columns: 1fr 1fr !important; }
}

.dk-stat { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 16px 14px; box-shadow: var(--shadow-soft); text-align: left; }

.dk-stat .n { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 340; font-size: 34px; letter-spacing: -.03em; color: var(--navy); line-height: 1.05; display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.dk-stat span { font-size: 13px; color: var(--zinc-500); display: block; line-height: 1.35; }

.dk-foot { margin: 0 auto; font-size: 16px; }

.dk-cards { display: grid; gap: 18px; text-align: left; }

.dk-cols-3 { grid-template-columns: repeat(3, 1fr); }

.dk-cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 960px) {
.dk-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
.dk-cards { grid-template-columns: 1fr; }
}

.dk-card { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; padding: 18px; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 8px; }

.dk-card h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--ink); margin: 0; }

.dk-card p { margin: 0; font-size: 14px; color: var(--zinc-700); }

.dk-card .dk-shot { margin: -18px -18px 4px; border-radius: 12px 12px 0 0; border: 0; box-shadow: none; }

.dk-card .dk-shot img { border-radius: 12px 12px 0 0; }

.dk-two { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; align-items: start; text-align: left; }

.dk-two.dk-flip { grid-template-columns: 1.25fr 1fr; }

.dk-two.dk-flip .dk-col:first-child { order: 2; }

@media (max-width: 900px) {
.dk-two, .dk-two.dk-flip { grid-template-columns: 1fr; }
.dk-two.dk-flip .dk-col:first-child { order: 0; }
}

.dk-col p { font-size: 15.5px; color: var(--zinc-700); }

.dk-cap { font-size: 13px; color: var(--zinc-500); margin: 10px 0 0; }

.dk-shot { display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.14); box-shadow: 0 30px 60px -28px rgba(0,35,57,.45); background: #fff; }

.dk-shot img { display: block; width: 100%; height: auto; }

.dk-note { background: #FFF1D6; border: 1px solid #F1D59A; border-radius: 10px; padding: 12px 14px; font-size: 14px; color: #5B3A00; margin-top: 14px; }

.dk-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; text-align: left; }

@media (max-width: 1100px) {
.dk-chips { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
.dk-chips { grid-template-columns: repeat(2, 1fr); }
}

.dk-chip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1px 8px; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-weight: 500; color: var(--ink); }

.dk-chip span { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--zinc-500); font-weight: 400; }

.dk-table { background: #fff; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-soft); overflow: hidden; text-align: left; }

.dk-th, .dk-tr { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 16px; padding: 10px 18px; align-items: start; }

.dk-th { background: var(--navy); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.dk-tr { border-top: 1px solid var(--hairline); font-size: 13.5px; line-height: 1.45; }

.dk-tr:nth-child(even) { background: var(--cream); }

.dk-tr span:nth-child(2) { color: var(--ink); }

.dk-step { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 16px; color: var(--navy); }

.dk-step b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: 11px; color: #fff; background: var(--lime); border-radius: 999px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }

@media (max-width: 760px) {
.dk-th { display: none; }
.dk-tr { grid-template-columns: 1fr; gap: 4px; }
}

.dk-end { background: #0b1620; color: #fff; overflow: hidden; justify-content: center !important; }

.dk-end > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
/* Een donkere sluier onder de tekst: zonder deze valt een witte kop weg tegen
   een lichte gevel. */
.dk-end::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(120% 80% at 50% 55%, rgba(6,14,20,.72) 0%, rgba(6,14,20,.42) 45%, rgba(6,14,20,.18) 100%); }

.dk-end .wrap { position: relative; z-index: 2; }

.dk-end h1 { color: #fff; font-size: clamp(44px, 6vw, 78px); }

.dk-end p { color: #D6DEE4; font-size: 18px; }

@media print {
.dk-dots, .dk-counter, .dk-hint { display: none; }
.rv > * { opacity: 1; transform: none; }
.dk-end { color: var(--ink); }
.dk-end > img { display: none; }
.dk-end h1 { color: var(--navy); }
.dk-end p { color: var(--zinc-700); }
}
.dk-end h1 { text-shadow: 0 2px 28px rgba(0,0,0,.45); }
.dk-end p { text-shadow: 0 1px 16px rgba(0,0,0,.5); }
@media print { .dk-end::after { display: none; } }

/* Kerncijfers met daaronder een compacte tabel en de bronnen op één scherm. */
.dk-subkop{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A5B00;margin:34px 0 12px;text-align:left}
.dk-table-compact .dk-tr{padding:7px 14px;font-size:13px}
.dk-table-compact .dk-step{font-size:14px}
.dk-chips-compact{margin-top:0}
.dk-chips-compact .dk-chip{padding:8px 12px;font-size:12.5px}
@media(max-width:640px){.dk-chips{flex-wrap:wrap}.dk-chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}}
.dk-chips-compact .dk-chip span{font-size:10.5px}

/* Kaarten: een brede kaart onder de rij, een citaat, en opsommingen. */
.dk-card-breed{grid-column:1 / -1}
.dk-card-citaat blockquote{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-style:italic;font-size:19px;line-height:1.45;color:var(--navy);position:relative;padding-left:34px}
.dk-card-citaat blockquote::before{content:"\201C";position:absolute;left:-2px;top:-8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-style:normal;font-size:52px;line-height:1;color:var(--lime)}
.dk-punten{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.dk-punten li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5;color:var(--zinc-700)}
.dk-punten li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
/* Opsomming met groene vinkjes, zoals de voordelen op de homepage. Zet 'vinkjes'
   aan op de kaart in het control panel. */
.dk-card.dk-vinkjes .dk-punten li{padding-left:30px}
.dk-card.dk-vinkjes .dk-punten li::before{width:20px;height:20px;top:.1em;border-radius:50%;background:#DCFCE7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}
.dk-card-breed .dk-punten{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
@media(max-width:800px){.dk-card-breed .dk-punten{grid-template-columns:1fr}}
.dk-card .dk-shot img{border-radius:10px}

/* ===== het woord "auto" in de kop als keuzelijstje ===== */
.vt{display:inline}
.vt-anker{position:relative;display:inline-block}
.vt-pre{white-space:nowrap}
.vt-btn{font:inherit;color:inherit;letter-spacing:inherit;display:inline-flex;align-items:baseline;gap:.22em;
  background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.09);border-radius:.32em;
  padding:.04em .34em .1em;margin:0;cursor:pointer;box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}
.vt-btn:hover{background:#fff;border-color:rgba(0,0,0,.18);box-shadow:0 2px 10px -4px rgba(0,0,0,.25)}
.vt-btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.vt-pijl{width:.36em;height:.26em;flex:none;align-self:center;opacity:.55;transition:transform .15s ease}
@media(prefers-reduced-motion:no-preference){.vt-pijl{animation:vt-wenk 2.4s ease 1.2s 2}}
@keyframes vt-wenk{0%,100%{transform:translateY(0)}45%{transform:translateY(.12em)}}
.vt-btn[aria-expanded="true"] .vt-pijl{transform:rotate(180deg)}

.vt-menu{position:absolute;left:50%;top:calc(100% + .22em);z-index:40;
  transform:translateX(calc(-50% + var(--vt-schuif, 0px)));
  min-width:250px;background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  box-shadow:var(--shadow-soft);padding:6px;display:flex;flex-direction:column;
  font-family:Inter,sans-serif;font-weight:400;font-size:15px;line-height:1.35;letter-spacing:0;
  color:var(--ink);text-align:left;white-space:normal}
.vt-menu[hidden]{display:none}
.vt-optie{display:flex;align-items:center;gap:9px;width:100%;font:inherit;color:inherit;text-align:left;
  background:none;border:0;border-radius:9px;padding:8px 10px;cursor:pointer}
.vt-optie:hover{background:var(--sand)}
.vt-optie:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.vt-vink{flex:none;width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(0,0,0,.18)}
.vt-optie[aria-selected="true"]{font-weight:600}
.vt-optie[aria-selected="true"] .vt-vink{border-color:var(--lime);background:var(--lime);
  box-shadow:inset 0 0 0 3px #fff}
.vt-later{margin-left:auto;font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#4C3B94;background:#E7E3F5;
  border-radius:999px;padding:3px 8px}
.vt-nu{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-style:normal;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#15803D;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:999px;padding:2px 8px}
.vt-nu i{flex:none;width:6px;height:6px;border-radius:50%;background:#22C55E}
.vt-voet{border-top:1px solid var(--hairline);margin-top:4px;padding:9px 10px 5px;
  font-size:12.5px;line-height:1.45;color:var(--zinc-500)}
@media(max-width:640px){.vt-menu{min-width:0;width:min(86vw,268px);font-size:14.5px}
  .vt-optie{padding:9px 10px}
  .vt-nu{font-size:10px;letter-spacing:.03em;padding:2px 7px}}
.dk-card p.dk-card-slot{margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline);font-size:13.5px;color:var(--zinc-500)}
.dk-card p.dk-card-slot:first-child{margin-top:0;padding-top:0;border-top:0}
.dk-card blockquote.dk-card-slot{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--hairline);border-left:0}
.dk-slot-citaat{font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-style:italic;font-size:17px;
  line-height:1.45;color:var(--navy)}
.dk-slot-citaat{position:relative;padding-left:34px}
.dk-slot-citaat::before{content:"\201C";position:absolute;left:-2px;top:-8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-style:normal;font-size:52px;line-height:1;color:var(--lime)}

/* ===== bouwsteen: van advertentie naar oordeel (slider) ===== */
.sl{text-align:left}
.sl-stappen{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;justify-content:center}
.sl-stap{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:12.5px;
  font-weight:500;color:var(--zinc-700);background:#fff;border:1px solid var(--hairline);border-radius:999px;
  padding:6px 13px 6px 6px;cursor:pointer;transition:all .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.sl-stap i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:10.5px;width:20px;height:20px;
  border-radius:50%;background:var(--sand-2);color:var(--zinc-700);display:flex;align-items:center;justify-content:center}
.sl-stap:hover{border-color:rgba(0,0,0,.2)}
.sl-stap.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sl-stap.on i{background:var(--lime);color:var(--navy)}
.sl-stap:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.sl-scherm{position:relative;background:#fff;border:1px solid var(--hairline);border-radius:14px;
  box-shadow:var(--shadow-soft);padding:18px 54px 16px}
.sl-pane{display:none}
.sl-pane.on{display:block;animation:sl-in .25s ease}
@keyframes sl-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sl-pane.on{animation:none}}
.sl-beeld{height:400px;display:flex;align-items:center;justify-content:center;background:var(--sand);
  border:1px solid var(--hairline);border-radius:10px;overflow:hidden;cursor:zoom-in}
.sl-beeld img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.sl-cap{margin:0 2px 13px;display:flex;flex-direction:column;gap:4px;min-height:62px}
.sl-cap b{font-family:'Inter',sans-serif;font-weight:600;font-size:16px;color:var(--navy)}
.sl-cap span{font-size:13.5px;line-height:1.55;color:var(--zinc-700)}
.sl-cap a{color:#8A5B00;text-decoration:underline;text-underline-offset:2px}
.sl-cap a:hover{color:var(--navy)}

.sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hairline);background:#fff;color:var(--navy);font-size:22px;line-height:1;cursor:pointer;
  box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;padding-bottom:3px}
.sl-nav:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.sl-vorige{left:9px}
.sl-volgende{right:9px}
@media(max-width:800px){.sl-beeld{height:260px}.sl-scherm{padding:14px 14px 12px}.sl-nav{display:none}}

.mp-loep{position:fixed;inset:0;z-index:200;background:rgba(0,35,57,.88);display:flex;
  align-items:center;justify-content:center;padding:36px;cursor:zoom-out}
.mp-loep[hidden]{display:none}
.mp-loep img{max-width:min(1100px,92vw);max-height:90vh;width:auto;height:auto;border-radius:10px;
  box-shadow:0 30px 90px -20px rgba(0,0,0,.6);background:#fff}
.mp-sluit{position:absolute;top:18px;right:22px;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.mp-sluit:hover{background:rgba(255,255,255,.26)}

/* ===== bouwsteen: de suite, drie kolommen per rol ===== */
.su-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left;align-items:stretch}
.su-kolom{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;padding:20px 20px 18px;box-shadow:var(--shadow-soft)}
.su-lbl{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8A5B00;background:rgba(245,158,11,.14);border-radius:999px;padding:4px 11px;margin-bottom:12px}
.su-kolom h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:19px;line-height:1.24;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 14px;text-wrap:balance}
.su-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.su-lijst li{position:relative;padding-left:24px;font-size:13px;line-height:1.45;color:var(--zinc-700)}
.su-lijst li::before{content:"";position:absolute;left:0;top:.16em;width:15px;height:15px;border-radius:50%;
  background:rgba(115,214,53,.18);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.7 8.3 9.4 3.6' fill='none' stroke='%234E9A20' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px 11px}
.su-voet{margin:16px 0 0;margin-top:auto;padding-top:13px;border-top:1px solid var(--hairline);font-size:13px;
  line-height:1.5;color:var(--zinc-500)}

.su-uit{background:var(--navy);border-color:var(--navy);box-shadow:0 26px 60px -24px rgba(0,35,57,.55)}
.su-uit .su-lbl{color:var(--navy);background:var(--lime)}
.su-uit h3{color:#fff}
.su-uit .su-lijst li{color:rgba(255,255,255,.86)}
.su-uit .su-lijst li::before{background-color:rgba(245,158,11,.22);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.7 8.3 9.4 3.6' fill='none' stroke='%23F5B23F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.su-uit .su-voet{border-top-color:rgba(255,255,255,.16);color:#fff;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:300;font-style:italic;font-size:15px}
@media(max-width:1000px){.su-grid{grid-template-columns:1fr}}

.dk-vlag{display:block;width:17px;height:12px;border-radius:2px;background-size:cover;background-position:center;box-shadow:0 0 0 1px rgba(0,0,0,.10) inset}
.dk-chip b{font-weight:500;line-height:1.25}
.dk-chip span{grid-column:2;line-height:1.25}
.dk-vlag{grid-row:span 2}
.dk-card-breed{padding:22px 24px 24px}
.dk-card-breed .dk-punten{gap:12px 40px;margin-top:16px}
.dk-card-breed .dk-punten li{font-size:15px;line-height:1.5;padding-left:25px}
.dk-card-breed .dk-punten li::before{width:8px;height:8px;top:.52em}

.vl-de{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2014%22%3E%3Crect%20width=%2220%22%20height=%2214%22%20fill=%22#000%22/%3E%3Crect%20y=%224.67%22%20width=%2220%22%20height=%224.67%22%20fill=%22#D00%22/%3E%3Crect%20y=%229.33%22%20width=%2220%22%20height=%224.67%22%20fill=%22#FFCE00%22/%3E%3C/svg%3E")}
.vl-it{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2014%22%3E%3Crect%20width=%2220%22%20height=%2214%22%20fill=%22#fff%22/%3E%3Crect%20width=%226.67%22%20height=%2214%22%20fill=%22#008C45%22/%3E%3Crect%20x=%2213.33%22%20width=%226.67%22%20height=%2214%22%20fill=%22#CD212A%22/%3E%3C/svg%3E")}
.vl-nl{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2014%22%3E%3Crect%20width=%2220%22%20height=%2214%22%20fill=%22#fff%22/%3E%3Crect%20width=%2220%22%20height=%224.67%22%20fill=%22#AE1C28%22/%3E%3Crect%20y=%229.33%22%20width=%2220%22%20height=%224.67%22%20fill=%22#21468B%22/%3E%3C/svg%3E")}
.vl-es{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2014%22%3E%3Crect%20width=%2220%22%20height=%2214%22%20fill=%22#AA151B%22/%3E%3Crect%20y=%223.5%22%20width=%2220%22%20height=%227%22%20fill=%22#F1BF00%22/%3E%3C/svg%3E")}
.vl-se{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2014%22%3E%3Crect%20width=%2220%22%20height=%2214%22%20fill=%22#006AA7%22/%3E%3Crect%20x=%225.5%22%20width=%222.6%22%20height=%2214%22%20fill=%22#FECC00%22/%3E%3Crect%20y=%225.7%22%20width=%2220%22%20height=%222.6%22%20fill=%22#FECC00%22/%3E%3C/svg%3E")}

/* Het kerncijferscherm draagt tegels, tabel en bronnen; alles moet op één slide passen. */
.deck .dk-stats{grid-template-columns:repeat(6,1fr);gap:9px}
.deck .dk-stat{padding:10px 12px}
.deck .dk-stat .n{font-size:24px}
.deck .dk-stat span:last-child{font-size:11.5px;line-height:1.35}
.deck .dk-table-compact .dk-tr{padding:6px 12px;font-size:12.5px}
.deck .dk-chips-compact .dk-chip{padding:6px 9px;font-size:12px}
.deck .dk-chips-compact .dk-chip span{font-size:10px}
.deck .dk-subkop{margin:24px 0 10px}
.deck .dk-stats{margin-bottom:6px}
.vl-eu{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23003399%22%2F%3E%3Ccircle%20cx%3D%2210.00%22%20cy%3D%222.80%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%2212.10%22%20cy%3D%223.36%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%2213.64%22%20cy%3D%224.90%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%2214.20%22%20cy%3D%227.00%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%2213.64%22%20cy%3D%229.10%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%2212.10%22%20cy%3D%2210.64%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%2210.00%22%20cy%3D%2211.20%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%227.90%22%20cy%3D%2210.64%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%226.36%22%20cy%3D%229.10%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%225.80%22%20cy%3D%227.00%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%226.36%22%20cy%3D%224.90%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3Ccircle%20cx%3D%227.90%22%20cy%3D%223.36%22%20r%3D%22.8%22%20fill%3D%22%23FFCC00%22%2F%3E%3C%2Fsvg%3E")}
.vl-de{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20y%3D%224.67%22%20width%3D%2220%22%20height%3D%224.67%22%20fill%3D%22%23DD0000%22%2F%3E%3Crect%20y%3D%229.33%22%20width%3D%2220%22%20height%3D%224.67%22%20fill%3D%22%23FFCE00%22%2F%3E%3C%2Fsvg%3E")}
.vl-fr{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20width%3D%226.67%22%20height%3D%2214%22%20fill%3D%22%23002395%22%2F%3E%3Crect%20x%3D%2213.33%22%20width%3D%226.67%22%20height%3D%2214%22%20fill%3D%22%23ED2939%22%2F%3E%3C%2Fsvg%3E")}
.vl-it{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20width%3D%226.67%22%20height%3D%2214%22%20fill%3D%22%23008C45%22%2F%3E%3Crect%20x%3D%2213.33%22%20width%3D%226.67%22%20height%3D%2214%22%20fill%3D%22%23CD212A%22%2F%3E%3C%2Fsvg%3E")}
.vl-be{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23FFD90C%22%2F%3E%3Crect%20width%3D%226.67%22%20height%3D%2214%22%20fill%3D%22%23000000%22%2F%3E%3Crect%20x%3D%2213.33%22%20width%3D%226.67%22%20height%3D%2214%22%20fill%3D%22%23F31830%22%2F%3E%3C%2Fsvg%3E")}
.vl-nl{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%224.67%22%20fill%3D%22%23AE1C28%22%2F%3E%3Crect%20y%3D%229.33%22%20width%3D%2220%22%20height%3D%224.67%22%20fill%3D%22%2321468B%22%2F%3E%3C%2Fsvg%3E")}
.vl-at{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%224.67%22%20fill%3D%22%23ED2939%22%2F%3E%3Crect%20y%3D%229.33%22%20width%3D%2220%22%20height%3D%224.67%22%20fill%3D%22%23ED2939%22%2F%3E%3C%2Fsvg%3E")}
.vl-es{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23AA151B%22%2F%3E%3Crect%20y%3D%223.5%22%20width%3D%2220%22%20height%3D%227%22%20fill%3D%22%23F1BF00%22%2F%3E%3C%2Fsvg%3E")}
.vl-ch{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23D52B1E%22%2F%3E%3Crect%20x%3D%228.6%22%20y%3D%223%22%20width%3D%222.8%22%20height%3D%228%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%225.6%22%20width%3D%228%22%20height%3D%222.8%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E")}
.vl-se{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23006AA7%22%2F%3E%3Crect%20x%3D%225.5%22%20width%3D%222.6%22%20height%3D%2214%22%20fill%3D%22%23FECC00%22%2F%3E%3Crect%20y%3D%225.7%22%20width%3D%2220%22%20height%3D%222.6%22%20fill%3D%22%23FECC00%22%2F%3E%3C%2Fsvg%3E")}
.vl-dk{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2014%22%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20fill%3D%22%23C8102E%22%2F%3E%3Crect%20x%3D%225.5%22%20width%3D%222.6%22%20height%3D%2214%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20y%3D%225.7%22%20width%3D%2220%22%20height%3D%222.6%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E")}

/* In de presentatie moet een kaart met foto binnen de slide blijven. */
.deck .dk-card .dk-shot{max-height:230px;overflow:hidden}
.deck .dk-card .dk-shot img{width:100%;height:230px;object-fit:cover;object-position:center 42%}
.deck .dk-card-breed .dk-punten{grid-template-columns:repeat(3,1fr);gap:10px 30px;margin-top:14px}
.deck .dk-card-breed .dk-punten li{font-size:14px}
@media(max-width:1000px){.deck .dk-card-breed .dk-punten{grid-template-columns:1fr}}
.dk-endbtn{margin-top:26px;gap:9px;background-image:none;background:var(--lime);color:var(--navy);font-weight:600;
  padding:15px 30px;box-shadow:0 14px 34px -12px rgba(245,158,11,.75)}
.dk-endbtn:hover{background:#ffb524;transform:translateY(-1px)}
.dk-endbtn svg{width:14px;height:14px;flex:none}
@media print{.dk-endbtn{background:none;color:var(--navy);box-shadow:none;border:1px solid var(--navy)}}
.dk-tr-4{grid-template-columns:120px 1fr 1fr 1fr}
@media(max-width:800px){.dk-tr-4{grid-template-columns:1fr}}

/* ===== bouwsteen: van vraagprijs naar landed cost ===== */
.lc-auto{margin:0 0 11px;text-align:center;font-size:13.5px;color:var(--zinc-500)}
.lc-auto b{color:var(--ink);font-weight:600}
.lc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;text-align:left;align-items:stretch}
.lc-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;padding:15px 18px 14px;box-shadow:var(--shadow-soft)}
.lc-lbl{align-self:flex-start;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8A5B00;background:rgba(245,158,11,.14);border-radius:999px;padding:4px 10px;margin-bottom:10px}
.lc-kaart h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:17px;line-height:1.22;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 10px;text-wrap:balance}
.lc-in{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--zinc-500)}
.lc-opties{display:flex;flex-direction:column;gap:6px}
.lc-optie{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:9px;padding:7px 9px;
  background:var(--sand);border-radius:8px;font-size:12.5px;color:var(--zinc-700)}
.lc-optie i{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--navy);
  background:#fff;border-radius:5px;padding:2px 0;text-align:center}
.lc-optie b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lc-optie-meer{background:none;color:var(--zinc-500)}
.lc-optie-meer i{background:var(--sand-2)}
.lc-som{display:flex;flex-direction:column}
.lc-rij{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;
  border-bottom:1px dashed var(--border-soft);font-size:13px;color:var(--zinc-700)}
.lc-rij span{display:flex;flex-direction:column;line-height:1.3}
.lc-rij em{font-style:normal;font-size:11px;color:var(--zinc-500);margin-top:2px}
.lc-rij b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500;white-space:nowrap}
.lc-start b{font-weight:600}
.lc-op{color:#2F8F2F}
.lc-neer{color:#C4483C}
.lc-tot{border-bottom:1px solid var(--navy)}
.lc-tot span,.lc-tot b{font-weight:600;color:var(--navy)}
.lc-uit{border-bottom:0;padding-top:11px}
.lc-uit span{font-weight:600;color:var(--navy)}
.lc-uit b{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:22px}
.lc-kop2{margin:16px 0 9px;padding-top:13px;border-top:1px solid var(--hairline);
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#8A5B00}
.lc-markten{display:flex;flex-direction:column;gap:8px}
.lc-markt{display:grid;grid-template-columns:86px 1fr 82px;align-items:center;gap:10px}
.lc-land{font-size:12.5px;font-weight:500;color:var(--ink);display:flex;flex-direction:column;line-height:1.2}
.lc-land em{font-style:normal;font-size:10px;font-weight:400;color:var(--zinc-500)}
.lc-balk{height:9px;border-radius:999px;background:var(--sand-2);overflow:hidden}
.lc-balk i{display:block;height:100%;border-radius:999px;background:#57B84B}
.lc-markt b{justify-self:end;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.lc-fijn{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--hairline);font-size:11.5px;
  line-height:1.5;color:var(--zinc-500)}
.lc-kaart .lc-fijn:last-child{margin-top:auto}
@media(max-width:1000px){.lc-grid{grid-template-columns:1fr}}

/* ===== bouwsteen: wat er nog aan komt ===== */
.rm2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;text-align:left}
.rm2-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:13px;padding:17px 18px 16px;box-shadow:var(--shadow-soft)}
.rm2-tag{align-self:flex-start;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);
  background:var(--purple-light);border-radius:999px;padding:3px 9px;margin-bottom:10px}
.rm2-kaart h3{font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;letter-spacing:0;
  color:var(--ink);margin:0 0 7px}
.rm2-kaart p{margin:0;font-size:13px;line-height:1.5;color:var(--zinc-700)}
.rm2-fase{margin-top:18px;display:flex;align-items:center;gap:20px;background:var(--navy);border-radius:14px;
  padding:18px 24px;box-shadow:0 26px 60px -24px rgba(0,35,57,.55);text-align:left}
.rm2-fase-lbl{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  background:var(--lime);border-radius:999px;padding:5px 12px}
.rm2-fase p{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:17px;
  line-height:1.45;color:#fff}
.rm2-fase p b{font-weight:600;color:var(--lime)}
@media(max-width:1000px){.rm2-grid{grid-template-columns:1fr}.rm2-fase{flex-direction:column;align-items:flex-start;gap:12px}}
.dk-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;align-self:flex-start;
  font-size:13px;font-weight:500;color:#8A5B00;text-decoration:underline;text-underline-offset:3px}
.dk-card-link:hover{color:var(--navy)}
.dk-card-link svg{width:12px;height:12px;flex:none}

/* ===== bouwsteen: wat Spott is, om en om ===== */
.st{display:flex;flex-direction:column;text-align:left}
.st-rij{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  padding:11px 0;border-top:1px solid var(--hairline)}
.st-rij:first-child{border-top:0;padding-top:0}
.st-beeld{position:relative;height:116px;background:var(--sand);border:1px solid var(--hairline);border-radius:12px;
  padding:10px 12px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px);background-size:14px 14px}
.st-beeld .mini{max-width:100%;max-height:100%;font-size:9px;overflow:hidden}
.st-rij:nth-child(even) .st-beeld{order:2}
.st-tekst h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:19px;line-height:1.2;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 8px;text-wrap:balance}
.st-tekst p{margin:0;font-size:13.5px;line-height:1.55;color:var(--zinc-500)}
@media(max-width:900px){.st-rij{grid-template-columns:1fr;gap:14px}.st-rij:nth-child(even) .st-beeld{order:0}}
.st-beeld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(246,245,241,0),rgba(246,245,241,.92))}

/* ===== walkthrough: echte schermen in de panelen ===== */
.wk-shot{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.wk-shot img{max-width:100%;max-height:100%;width:auto;height:auto;display:block;border-radius:8px;
  border:1px solid var(--hairline);box-shadow:0 10px 30px -14px rgba(0,0,0,.35);background:#fff}
.wk-lang img{max-height:340px}
.wk-duo{display:flex;gap:14px;align-items:flex-start;max-width:100%;max-height:100%}
.wk-duo .wk-shot{flex:1;min-width:0}
.wk-iphone{position:relative;flex:none;padding:7px;border-radius:30px;background:#0b1620;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.55)}
.wk-iphone img{display:block;width:auto;max-height:300px;border-radius:24px}
@media(max-width:900px){.wk-duo{flex-direction:column}.wk-iphone img{max-height:240px}}

/* ===== knop onder het grote scherm in de hero ===== */
.hero-knop{display:flex;justify-content:center;margin-top:26px}
.deck .dk-heroslide .hero-knop{margin-top:22px}
/* In de presentatie mag het scherm naast de stappen breder en hoger. */
.deck .walk{grid-template-columns:.78fr 1.42fr;gap:22px;padding:18px}
.deck .walk-home .walk-screen{min-height:520px}
.deck .walk-pane{inset:20px}
.wk-iphone{width:206px}
.wk-iphone img{width:100%;height:auto;max-height:none}

/* ===== bouwsteen: de Spott-journey in zes stappen ===== */
.hw{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;text-align:left}
.hw-stap{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  opacity:.45;transition:opacity .45s ease;cursor:pointer}
.hw-stap.gedaan,.hw-stap.nu{opacity:1}
.hw-stap::after{content:"";position:absolute;top:29px;left:68px;right:-18px;height:2px;
  background:repeating-linear-gradient(90deg,var(--sand-2) 0 7px,transparent 7px 14px)}
.hw-stap:last-child::after{display:none}
.hw-vul{position:absolute;top:29px;left:68px;right:-18px;height:2px;overflow:hidden}
.hw-vul::before{content:"";position:absolute;inset:0;width:0;background:var(--lime);border-radius:2px;
  transition:width 1.9s cubic-bezier(.4,0,.2,1)}
.hw-stap.gedaan .hw-vul::before{width:100%;transition:none}
.hw-stap.nu .hw-vul::before{width:100%}
.hw-stap:last-child .hw-vul{display:none}
.hw-ic{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;background:#fff;
  border:1px solid var(--hairline);box-shadow:var(--shadow-soft);display:flex;align-items:center;
  justify-content:center;color:var(--navy);margin-bottom:13px;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1),border-color .35s ease,box-shadow .35s ease}
.hw-ic svg{width:26px;height:26px}
.hw-stap.nu .hw-ic{transform:translateY(-4px);border-color:var(--lime);
  box-shadow:0 0 0 5px rgba(245,158,11,.16),0 14px 30px -12px rgba(0,0,0,.28)}
.hw-stap.gedaan .hw-ic{border-color:rgba(245,158,11,.5)}
.hw-n{position:absolute;z-index:2;top:-4px;left:44px;width:22px;height:22px;border-radius:50%;
  background:var(--sand-2);color:var(--zinc-700);font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  display:flex;align-items:center;justify-content:center;transition:all .35s ease}
.hw-stap.nu .hw-n,.hw-stap.gedaan .hw-n{background:var(--lime);color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.18)}
.hw-stap h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:16.5px;line-height:1.2;
  letter-spacing:-.01em;color:var(--navy);margin:0}

/* de echte inbox eronder, die per stap oplicht waar het gebeurt */
.jb-tekst{display:grid;margin:20px auto 16px;max-width:760px;text-align:center}
.jr-p{grid-area:1/1;margin:0;font-size:15px;line-height:1.6;color:var(--zinc-500);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.jr-p.nu{opacity:1;transform:none}
.jr-p b{color:var(--navy);font-weight:600}

.jb-raam{position:relative;height:440px;overflow:hidden;border-radius:16px}
.jb .appwin{margin:0}
.jb-raam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.75) 55%,rgba(255,255,255,.98) 100%)}
.jb .rail,.jb .list2,.jb .detail2{transition:opacity .45s ease,filter .45s ease}
.jb[data-stap="1"] .rail,.jb[data-stap="1"] .detail2,
.jb[data-stap="2"] .rail,.jb[data-stap="2"] .detail2,
.jb[data-stap="3"] .rail,.jb[data-stap="3"] .list2,
.jb[data-stap="4"] .rail,.jb[data-stap="4"] .list2,
.jb[data-stap="5"] .rail,.jb[data-stap="5"] .list2{opacity:.3;filter:saturate(.25)}
.jb[data-stap="1"] .list2,.jb[data-stap="2"] .list2,
.jb[data-stap="3"] .detail2,.jb[data-stap="4"] .detail2,.jb[data-stap="5"] .detail2{
  position:relative;z-index:2;box-shadow:0 0 0 2px var(--lime),0 18px 40px -16px rgba(0,0,0,.4);border-radius:10px}
/* Stap 1 gaat over het zoekprofiel, en dat is een eigen scherm. De velden
   volgen het profielscherm van het platform; de opmaak leent de onderdelen
   van de filterkolom, zodat het één familie blijft. */
.profwin{display:none;background:#fff;border-radius:12px;overflow:hidden;
  border:1px solid #E4E4E7;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.jb[data-stap="0"] .profwin{display:block}
.jb[data-stap="0"] .appwin{display:none}
.pf{padding:12px 16px 14px}
.pf-kop{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:10px;
  border-bottom:1px solid #F4F4F5}
.pf-naam{font-size:14px;font-weight:600;color:#18181B}
.pf-badge{font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:#3F3F46;
  background:#F4F4F5;border-radius:999px;padding:3px 8px}
.pf-bewaar{margin-left:auto;font-size:10.5px;font-weight:500;color:#fff;background:var(--navy);
  border-radius:7px;padding:6px 11px}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.pf .f-lbl{font-size:10.5px}
.pf .f-dd{padding:6px 9px}
.pf .f-range span{padding:5px 8px}
.pf .f-chips span{padding:2px 5px}
.pf-veld{display:flex;flex-direction:column;gap:5px}
.pf-veld .f-lbl{margin-top:0}
.pf-grid .f-chips span.on{background:#ECFDF5;color:#15803D;box-shadow:inset 0 0 0 1px #A7F3D0}
.pf-landen span{font-size:9.5px}
.pf-voet{display:flex;align-items:baseline;gap:9px;margin-top:11px;padding-top:9px;
  border-top:1px solid #F4F4F5;flex-wrap:wrap}
.pf-voet b{font-size:11px;color:#18181B}
.pf-voet em{font-style:normal;font-size:10.5px;color:#A1A1AA}
@media(max-width:560px){.pf{padding:10px 12px 12px}.pf-grid{gap:7px 10px}
  .pf-kort{display:none}
  .pf-landen span:nth-child(n+5){display:none}
  .pf-naam{font-size:12.5px}.pf-badge{display:none}.pf-bewaar{padding:5px 9px}
  .pf-voet{display:none}}
.jb[data-stap="1"] .card2{opacity:0;transform:translateY(10px);animation:jr-op .5s ease forwards}
.jb[data-stap="1"] .card2:nth-of-type(1){animation-delay:.1s}
.jb[data-stap="1"] .card2:nth-of-type(2){animation-delay:.35s}
.jb[data-stap="1"] .card2:nth-of-type(3){animation-delay:.6s}
.jb[data-stap="1"] .card2:nth-of-type(4){animation-delay:.85s}
@keyframes jr-op{to{opacity:1;transform:none}}

.jb-over{position:absolute;inset:0;z-index:4;pointer-events:none}
.jb-laag{position:absolute;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.jb-laag.nu{opacity:1;transform:none}
.jb-laag[data-i="2"]{top:16px;left:50%;transform:translate(-50%,10px);width:min(430px,62%)}
.jb-laag[data-i="2"].nu{transform:translate(-50%,0)}
.jb-laag[data-i="3"],.jb-laag[data-i="4"],.jb-laag[data-i="5"]{top:62px;right:22px;width:min(300px,34%)}

.jb-toast{display:flex;align-items:flex-start;gap:10px;background:var(--navy);color:#fff;border-radius:11px;
  padding:11px 14px;box-shadow:0 20px 44px -16px rgba(0,35,57,.75)}
.jb-bel{color:var(--lime);font-size:11px;line-height:1.5}
.jb-toast div{display:flex;flex-direction:column;line-height:1.35}
.jb-toast b{font-size:11.5px;font-weight:600;color:var(--lime)}
.jb-toast small{font-size:12.5px;color:#fff}
.jb-kaart{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:13px 15px;
  box-shadow:0 22px 46px -18px rgba(0,0,0,.45);text-align:left}
.jb-kaart>b{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:'Inter',sans-serif;
  font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:7px;padding-bottom:7px;
  border-bottom:1px solid var(--border-soft)}
.jb-vink{width:20px;height:20px;border-radius:50%;background:#57B84B;color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center}
.jb-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:3px 0;
  font-size:12px;color:var(--zinc-500)}
.jb-r b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.jb-r em{font-style:normal;font-size:10.5px;margin-left:4px}
.jb-rood{color:#C4483C}
.jb-groen{color:#2F8F2F}
.jb-tip{margin-top:8px;background:rgba(245,158,11,.14);border-radius:7px;padding:7px 9px;
  font-size:11px;line-height:1.4;color:#8A5B00}

.hw-slot{margin:6px 0 0;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;
  font-style:italic;font-size:16px;line-height:1.45;color:var(--navy)}
@media(prefers-reduced-motion:reduce){.hw-stap{opacity:1}
  .hw-vul::before,.jb .card2,.jb-laag{transition:none;animation:none}}
@media(max-width:1000px){.hw{grid-template-columns:repeat(3,1fr);gap:22px 16px}
  .hw-stap::after,.hw-vul{display:none}.hw-stap{opacity:1}.jb-raam{height:320px}}
@media(max-width:640px){.hw{grid-template-columns:1fr 1fr}.jb-raam{display:none}}
.deck .dk-heroslide .hero{padding-bottom:72px}
.deck .dk-heroslide .hero-knop{margin-top:26px}

/* ===== bouwsteen: de meetlat van de waardering ===== */
.ml-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left}
.ml-kaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;padding:18px 20px 16px;box-shadow:var(--shadow-soft)}
.ml-lbl{align-self:flex-start;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#2F8F2F;background:rgba(87,184,75,.14);border-radius:999px;padding:4px 10px;margin-bottom:10px}
.ml-zwak .ml-lbl{color:#8A5B00;background:rgba(245,158,11,.16)}
.ml-kaart h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:20px;line-height:1.2;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 12px}
.ml-rij{display:grid;grid-template-columns:62px 58px 66px 1fr;align-items:center;gap:10px;padding:6px 0;
  border-top:1px solid var(--hairline);font-size:13px;color:var(--zinc-700)}
.ml-rij span{font-weight:600;color:var(--ink)}
.ml-rij em{font-style:normal;font-size:11.5px;color:var(--zinc-500);font-variant-numeric:tabular-nums}
.ml-rij b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.ml-rij i{font-style:normal;position:relative;display:flex;align-items:center;gap:8px;font-size:11.5px;
  color:var(--zinc-500);font-variant-numeric:tabular-nums}
.ml-rij u{flex:1;max-width:120px;height:7px;border-radius:999px;background:#57B84B;text-decoration:none;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.05)}
.ml-zwak .ml-rij u{background:#E0A34A}
.ml-kop{border-top:0;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--zinc-500);padding-bottom:2px}
.ml-kop span,.ml-kop b{font-weight:500;color:var(--zinc-500);font-size:10.5px}
.ml-kop u{display:none}
.ml-fijn{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hairline);font-size:12px;
  line-height:1.5;color:var(--zinc-500)}
.ml-balk{margin-top:16px;display:flex;align-items:center;gap:20px;background:var(--navy);border-radius:14px;
  padding:18px 24px;box-shadow:0 26px 60px -24px rgba(0,35,57,.55);text-align:left}
.ml-balk-lbl{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  background:var(--lime);border-radius:999px;padding:5px 12px}
.ml-balk p{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-size:18px;
  line-height:1.45;color:#fff}
.ml-balk b{font-weight:600;color:var(--lime)}
@media(max-width:1000px){.ml-grid{grid-template-columns:1fr}.ml-balk{flex-direction:column;align-items:flex-start;gap:12px}}

/* ===== bouwsteen: de klassieker ===== */
.kl-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kl-c{background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;
  box-shadow:var(--shadow-soft);text-align:left}
.kl-c b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:340;font-size:30px;
  letter-spacing:-.03em;color:var(--navy);line-height:1.05;margin-bottom:3px;font-variant-numeric:tabular-nums}
.kl-c span{font-size:12.5px;line-height:1.35;color:var(--zinc-500)}
.kl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.kl-kaart{position:relative;background:#fff;border:1px solid var(--hairline);border-radius:14px;
  padding:20px 22px 18px;box-shadow:var(--shadow-soft)}
.kl-n{position:absolute;top:18px;right:20px;font-size:11px;letter-spacing:.1em;color:var(--sand-2)}
.kl-kaart h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;font-size:19px;line-height:1.22;
  letter-spacing:-.01em;color:var(--navy);margin:0 0 9px;padding-right:28px;text-wrap:balance}
.kl-kaart p{margin:0;font-size:13.5px;line-height:1.6;color:var(--zinc-700)}
.kl-kaart p b{font-weight:600;color:var(--ink)}
.kl-open{background:var(--navy);border-color:var(--navy);box-shadow:0 26px 60px -24px rgba(0,35,57,.55)}
.kl-open h3{color:#fff}
.kl-open p{color:rgba(255,255,255,.86)}
.kl-open p b{color:var(--lime)}
.kl-open .kl-n{color:rgba(255,255,255,.25)}
@media(max-width:1000px){.kl-cijfers{grid-template-columns:1fr 1fr}.kl-grid{grid-template-columns:1fr}}

/* ===== bouwsteen: het partnervoorstel ===== */
.pt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left;align-items:stretch}
.pt-kolom{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hairline);
  border-radius:14px;padding:20px 22px 18px;box-shadow:var(--shadow-soft)}
.pt-lbl{align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#8A5B00;background:rgba(245,158,11,.14);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.pt-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.pt-lijst li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--zinc-700)}
.pt-lijst li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;
  background:var(--lime)}
.pt-uit{background:var(--navy);border-color:var(--navy);box-shadow:0 26px 60px -24px rgba(0,35,57,.55)}
.pt-uit .pt-lbl{color:var(--navy);background:var(--lime)}
.pt-uit .pt-lijst li{color:rgba(255,255,255,.9)}
.pt-uit .pt-lijst li::before{background:var(--lime)}
.pt-balk{margin-top:16px;display:flex;align-items:center;gap:20px;background:var(--lime);border-radius:14px;
  padding:16px 24px;text-align:left;box-shadow:0 22px 46px -22px rgba(245,158,11,.8)}
.pt-balk-lbl{flex:none;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);
  background:var(--navy);border-radius:999px;padding:5px 12px}
.pt-balk p{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:400;font-size:18px;
  line-height:1.45;color:var(--navy)}
@media(max-width:1000px){.pt-grid{grid-template-columns:1fr}.pt-balk{flex-direction:column;align-items:flex-start;gap:12px}}
/* Badge boven de kop: alleen in de presentatie, niet op de site. */
.hero-badge{display:none}
.deck .hero-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--navy);border:0;border-radius:999px;
  padding:9px 18px 9px 15px;box-shadow:0 14px 30px -12px rgba(0,35,57,.55)}
.deck .hero-badge i{width:9px;height:9px;border-radius:50%;background:var(--pink);flex:none;
  box-shadow:0 0 0 0 rgba(255,38,158,.6)}
@media(prefers-reduced-motion:no-preference){
  .deck .hero-badge i{animation:hb-knipper 1.6s ease-in-out infinite}}
@keyframes hb-knipper{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,38,158,.55)}
  45%{opacity:.35;box-shadow:0 0 0 7px rgba(255,38,158,0)}
  70%{opacity:1;box-shadow:0 0 0 0 rgba(255,38,158,0)}}

.pt-slot{margin:20px 0 0;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;
  font-style:italic;font-size:17px;line-height:1.45;color:var(--navy)}

/* ===== tijdelijke voorpagina: het openingsscherm met contact eronder ===== */
.kale-pagina{margin:0;background:var(--sand)}
.ph-page .hero{min-height:100vh;padding-top:96px;padding-bottom:64px}
.ph-page .hero-badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;background:var(--navy);border:0;border-radius:999px;
  padding:9px 18px 9px 15px;box-shadow:0 14px 30px -12px rgba(0,35,57,.55)}
.ph-page .hero-badge i{width:9px;height:9px;border-radius:50%;background:var(--pink);flex:none}
@media(prefers-reduced-motion:no-preference){.ph-page .hero-badge i{animation:hb-knipper 1.6s ease-in-out infinite}}

/* de knop hoort bij de presentatie, het contactblok bij de voorpagina */
.hero-contact{display:none}
.ph-page .hero-knop{display:none}
.ph-page .hero-contact{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:30px}
.hero-mail{background-image:none;background:var(--lime);color:var(--navy);font-weight:600;padding:15px 32px;
  box-shadow:0 14px 34px -12px rgba(245,158,11,.75)}
.hero-mail:hover{background:#ffb524}
.hero-toegang{font-size:14.5px;font-weight:500;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.hero-toegang:hover{color:#8A5B00}
.hero-toegang span{text-decoration:none;display:inline-block;margin-left:2px}
.hero-fijn{margin:2px 0 0;font-size:12.5px;color:var(--zinc-500)}
/* Rechtsboven staan de taalkeuze en de ingang naar de inbox naast elkaar. */
.ph-page .ph-top{position:absolute;top:46px;right:28px;transform:translateY(-50%);z-index:9;
  display:flex;align-items:center;gap:10px}
.ph-page .ph-lang{margin:0;
  background:rgba(255,255,255,.72);border-color:rgba(0,0,0,.09);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.18)}
@media(max-width:900px){.ph-page .ph-top{top:38px}}
@media(max-width:700px){.ph-page .ph-top{top:32px;right:16px}}
/* De inbox is besloten; het slotje zegt dat vooraf, zodat niemand voor een
   dichte deur komt te staan. */
.ph-login,.nav-login{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:500;color:var(--navy);text-decoration:none;white-space:nowrap;
  padding:7px 13px 7px 11px;border-radius:999px;background:rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.09);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 10px -4px rgba(0,0,0,.18)}
.ph-login svg,.nav-login svg{width:13px;height:13px;flex:none}
.ph-login:hover,.nav-login:hover{background:#fff;border-color:rgba(0,35,57,.28);color:var(--navy)}
.is-nacht .ph-login{color:#fff;background:rgba(12,28,46,.55);border-color:rgba(255,255,255,.3)}
.is-nacht .ph-login:hover{background:rgba(12,28,46,.8);border-color:rgba(255,255,255,.55);color:#fff}
@media(max-width:700px){.ph-page .ph-top{gap:8px}.ph-login span{display:none}.ph-login{padding:7px 10px}}

/* Het merk linksboven, tegenhanger van de taalkeuze rechtsboven. */
.ph-page .ph-logo{position:absolute;left:40px;top:46px;transform:translateY(-50%);z-index:9;display:block;line-height:0}
.ph-page .ph-logo img{height:40px;display:block}
@media(max-width:900px){.ph-page .ph-logo{left:24px;top:38px}.ph-page .ph-logo img{height:32px}}
@media(max-width:700px){.ph-page .ph-logo{left:16px;top:32px}.ph-page .ph-logo img{height:27px}}


/* ===== landingspagina: de blokken onder het openingsscherm ===== */
.ld-blok{background:var(--sand)}
.ld-blok.on-cream{background:var(--cream)}
.ld-blok.on-navy{background:var(--navy)}
.ld-kop{max-width:1120px;margin:0 auto;padding:96px 24px 36px}
.ld-kop.center{text-align:center}
.ld-kop .kicker{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#B45309;margin-bottom:14px}
.ld-kop h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.02em;line-height:1.12;color:var(--navy);margin:0 0 16px;text-wrap:balance}
.ld-kop .sub{font-size:18px;line-height:1.55;color:var(--zinc-500);max-width:680px;margin:0}
.ld-kop.center .sub{margin:0 auto}
.ld-kop + section{padding-top:0}
.ld-blok.on-navy .ld-kop h2{color:#fff}
.ld-blok.on-navy .ld-kop .sub{color:#C7D2DB}
@media(max-width:700px){.ld-kop{padding:56px 18px 24px}}

/* Waarom Spott: verhaal en probleem naast elkaar, de oplossing als donker blok met tegels. */
.wa-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
@media(max-width:800px){.wa-grid{grid-template-columns:1fr;gap:36px}}
/* De drie blokken hangen aan één gestippelde lijn: van de aanleiding naar het
   probleem, en van daar naar de oplossing. Zelfde taal als de wegmarkering en
   de radarringen in het openingsscherm, met een stip op het knooppunt. */
.wa-verhaal{position:relative}
.wa-verhaal::after{content:"";position:absolute;top:50%;right:-26px;width:26px;height:0;
  border-top:1.5px dashed #CBB79A}
.wa-verhaal::before{content:"";position:absolute;top:50%;right:-17px;margin-top:-4px;
  width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--sand)}
@media(max-width:800px){
  .wa-verhaal::after{top:auto;right:auto;left:50%;bottom:-36px;width:0;height:36px;
    border-top:0;border-left:1.5px dashed #CBB79A}
  .wa-verhaal::before{top:auto;right:auto;bottom:-22px;left:50%;margin:0 0 0 -4px}
}
.wa-kaart{background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;text-align:left}
.wa-kaart h3{font-family:'Inter',sans-serif;font-weight:600;font-size:16px;color:var(--ink);margin:0 0 10px}
.wa-kaart p{margin:0 0 12px;font-size:14.5px;line-height:1.6;color:var(--zinc-700)}
.wa-foto{display:block;margin:-22px -24px 18px;border-radius:14px 14px 0 0;overflow:hidden}
.wa-foto img{width:100%;aspect-ratio:1600/1054;height:auto;object-fit:cover;object-position:center;display:block}
.wa-link{font-size:14px;font-weight:500;color:var(--navy);text-decoration:underline;text-underline-offset:3px;margin-top:auto}
.wa-kaart p.wa-slot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hairline);font-size:12.5px;color:var(--zinc-500)}
.wa-min{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.wa-min li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--zinc-700)}
.wa-min li::before{content:"";position:absolute;left:6px;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--lime)}
/* Slotzin onder de problemen als uitgelicht citaat: groot aanhalingsteken, cursief, geen vlak of balk. */
.wa-slotq{position:relative;margin:22px 0 0;padding:6px 0 0 34px;font-family:'Bricolage Grotesque',sans-serif;font-weight:300;font-style:italic;font-size:19px;line-height:1.45;letter-spacing:-.005em;color:var(--navy)}
.wa-slotq::before{content:"\201C";position:absolute;left:-2px;top:-8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-style:normal;font-size:52px;line-height:1;color:var(--lime)}
@media(max-width:640px){.wa-slotq{font-size:17.5px;padding-left:30px}.wa-slotq::before{font-size:46px}}
.wa-oplossing{position:relative;margin-top:26px;background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:28px 28px 24px;box-shadow:var(--shadow-soft);text-align:left}
.wa-oplossing::before{content:"";position:absolute;left:calc(75% + 6px);top:-26px;width:0;height:26px;
  border-left:1.5px dashed #CBB79A}
.wa-oplossing::after{content:"";position:absolute;left:calc(75% + 6px);top:-17px;margin-left:-4px;
  width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--sand)}
@media(max-width:800px){.wa-oplossing{margin-top:36px}
  .wa-oplossing::before{left:50%;top:-36px;height:36px}
  .wa-oplossing::after{left:50%;top:-22px}}
.wa-oplossing-kop{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;align-items:baseline;margin-bottom:22px}
.wa-oplossing-kop h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:24px;letter-spacing:-.02em;margin:0;color:var(--navy)}
.wa-oplossing-kop p{margin:0;font-size:15px;line-height:1.55;color:var(--zinc-700);max-width:680px}
.wa-tegels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px}
@media(max-width:900px){.wa-tegels{grid-template-columns:1fr 1fr}.wa-oplossing-kop{grid-template-columns:1fr}}
@media(max-width:560px){.wa-tegels{grid-template-columns:1fr;gap:2px}.wa-oplossing{padding:22px 20px 18px}.wa-tegel:first-child{padding-top:4px}}
/* Geen kaartje in een kaartje: de punten zijn een opsomming, gescheiden door een haarlijn. */
.wa-tegel{padding:14px 0 2px}
@media(min-width:561px){.wa-tegel{padding:0 4px 2px}}
.wa-tegel h4{font-family:'Inter',sans-serif;font-weight:600;font-size:15.5px;margin:0 0 6px;color:var(--navy);display:flex;align-items:center;gap:10px}
.wa-tegel h4::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:#DCFCE7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2315803D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/13px no-repeat}
.wa-tegel p{margin:0 0 0 32px;font-size:14px;line-height:1.5;color:var(--zinc-700)}

/* Exclusive pilot: badge, één alinea en de focus in chips, vlak boven het productblok. */
.ld-pilot section.pi{padding-bottom:28px}
.ld-pilot + .ld-vragen section{padding-top:0}
.pi .wrap{max-width:760px}
.ph-page .pi-badge{margin-bottom:18px}
.pi-tekst{font-size:17px;line-height:1.6;color:var(--zinc-700);margin:0 0 16px}
.pi-tekst b{color:var(--navy);font-weight:600}
.pi-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pi-chips span{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--hairline);color:var(--navy)}

/* Voettekst met alleen openbare links. */
.voet-ld .vl-boven{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px}
.voet-ld .vl-boven img{height:28px}
.voet-ld .vl-payoff{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;color:#fff;margin:0}
.voet-ld .vl-links{display:flex;flex-wrap:wrap;gap:8px 26px;margin-bottom:30px}
.voet-ld .vl-links a{color:var(--lime);text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.03em}
.voet-ld .vl-links a:hover{text-decoration:underline}

/* Badge-tekst is een aparte regel (b) zodat hij per pagina te vertalen is; niet vet. */
.hero-badge b{font-weight:inherit}
/* Op de landingspagina geen knipperende badge boven de kop (Peter, 19/9). */
.ld-page .hero-badge{display:none}
/* Op de landingspagina geen contactblok onder de inbox; de vragen onderaan doen dat werk. */
.ld-page .hero-contact{display:none}


/* ===== landingspagina: rijkere inbox in het openingsscherm (alleen daar) ===== */
.ld-x{display:none}
.ld-page .hero .filt .ld-x{display:block}
.ld-page .hero .filt .f-chips.ld-x{display:flex}
.ld-page .hero .app2 .d-val{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;padding:5px 0;border-top:1px solid #F4F4F5;font-size:10.5px}
.ld-page .hero .app2 .d-val span{color:#71717A;flex:1 1 100%}
.ld-page .hero .app2 .d-val b{font-size:13px;color:#18181B}
.ld-page .hero .app2 .d-val em{font-style:normal;color:#71717A}
.ld-page .hero .app2 .d-val.hi b{color:#15803D}
.ld-page .hero .app2 .d-opts{display:flex;flex-wrap:wrap;gap:4px;padding:6px 0}
.ld-page .hero .app2 .d-opts span{font-size:9.5px;padding:2px 7px;border-radius:999px;background:#F4F4F5;color:#3F3F46}
.ld-page .hero .app2 .d-tl{font-size:10px;color:#71717A;padding:4px 0 6px;border-top:1px solid #F4F4F5}
.ld-page .hero .app2 .d-rep{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid #E4E4E7;border-radius:8px;background:#FAFAF9;margin:4px 0 6px}
.ld-page .hero .app2 .d-rep b{font-size:11px;color:#002339}
.ld-page .hero .app2 .d-rep span{font-size:9.5px;color:#71717A}
.ld-page .hero .app2 .d-kv:nth-of-type(n+7){display:none}
/* Verse vangst, in dezelfde vorm als in het platform zelf: per auto wanneer
   hij geplaatst is (groene agenda), wanneer we hem voor het laatst zagen
   (blauw oog) en hoe lang hij te koop staat (paarse klok). */
.ld-page .hero .app2 .c-foot{display:flex}
.ld-page .hero .app2 .c-tag{display:none}
.ld-page .hero .app2 .c-tijd,.ld-page .hero .app2 .p-tijd{display:inline-flex;align-items:center;gap:9px;font-style:normal}
.ld-page .hero .app2 .c-tijd b,.ld-page .hero .app2 .p-tijd b{display:inline-flex;align-items:center;gap:3px;font-weight:500;color:#52525B}
.ld-page .hero .app2 .ic-dag,.ld-page .hero .app2 .ic-oog,.ld-page .hero .app2 .ic-klok{
  width:10px;height:10px;flex:none;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.ld-page .hero .app2 .ic-dag{color:#22C55E;
  -webkit-mask-image:var(--ic-dag);mask-image:var(--ic-dag)}
.ld-page .hero .app2 .ic-oog{color:#3B82F6;
  -webkit-mask-image:var(--ic-oog);mask-image:var(--ic-oog)}
.ld-page .hero .app2 .ic-klok{color:#8B5CF6;
  -webkit-mask-image:var(--ic-klok);mask-image:var(--ic-klok)}
.ld-page .hero .app2{
  --ic-dag:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>");
  --ic-oog:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M2 12s3.6-6 10-6 10 6 10 6-3.6 6-10 6-10-6-10-6Z'/><circle cx='12' cy='12' r='2.6'/></svg>");
  --ic-klok:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")}
/* De fototegel: merkje linksboven en dezelfde regel onder de specificaties. */
.ld-page .hero .app2 .p-ph{position:relative}
.ld-page .hero .app2 .p-ph .new{position:absolute;left:6px;top:6px;z-index:2}
.ld-page .hero .app2 .p-s{flex-wrap:wrap}
/* De gebruiker rechtsboven in de titelbalk, zoals in het platform zelf.
   Geldt voor beide mock-ups op de pagina: het openingsscherm en "zo werkt het". */
.ld-page .hero .app2 .app2-user,.ld-page .jb .app2 .app2-user{display:inline-flex;margin-left:auto}
/* Het vernieuw-wiel naast Select, zoals in de kop van het platform. */
.ld-page .hero .app2 .l-right{display:inline-flex;align-items:center;gap:8px}
.ld-page .hero .app2 .l-wiel{width:13px;height:13px;flex:none;background:#52525B;
  -webkit-mask:var(--ic-wiel) no-repeat center/contain;mask:var(--ic-wiel) no-repeat center/contain}
.ld-page .hero .app2 .l-caret{color:#A1A1AA}
.ld-page .hero .app2{--ic-wiel:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M20 11a8 8 0 0 0-13.7-5.3L3 9'/><path d='M4 13a8 8 0 0 0 13.7 5.3L21 15'/><path d='M3 4v5h5M21 20v-5h-5'/></svg>")}
.ld-page .hero .app2 .d-for{display:none}

/* ===== onder de motorkap, in gewone woorden ===== */
.kr-kaart{max-width:860px;margin:0 auto;background:#fff;border:1px solid var(--hairline);border-radius:16px;padding:34px 40px 30px;box-shadow:var(--shadow-soft);text-align:left}
.kr-intro{margin:0 0 22px;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;line-height:1.4;color:var(--navy)}
.kr-feiten{list-style:none;margin:0;padding:0;counter-reset:feit;display:flex;flex-direction:column;gap:0}
.kr-feiten li:first-child{border-top:0;padding-top:4px}
.kr-feiten li:first-child::before{top:6px}
.kr-feiten li{counter-increment:feit;position:relative;padding:16px 0 16px 56px;border-top:1px solid var(--hairline);font-size:15.5px;line-height:1.6;color:var(--zinc-700)}
.kr-feiten li::before{content:counter(feit,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;color:#B45309}
.kr-feiten li b{display:block;font-family:'Inter',sans-serif;font-weight:600;color:var(--navy);margin-bottom:2px}
.kr-slot{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--hairline);font-family:'Bricolage Grotesque',sans-serif;font-style:italic;font-size:17px;line-height:1.5;color:var(--navy)}
@media(max-width:700px){.kr-kaart{padding:24px 20px 22px}.kr-feiten li{padding-left:40px}.kr-intro{font-size:19px}}

/* ===== voor strategische partijen: drie routes en één knop ===== */
.pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
@media(max-width:900px){.pa-grid{grid-template-columns:1fr}}
.pa-kaart{background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-soft)}
.pa-lbl{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B45309;background:#FEF3C7;border-radius:999px;padding:4px 10px;margin-bottom:12px}
.pa-kaart h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.01em;line-height:1.25;color:var(--navy);margin:0 0 10px}
.pa-kaart p{margin:0;font-size:14.5px;line-height:1.6;color:var(--zinc-700)}
.pa-actie{margin-top:26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.pa-fijn{margin:0;font-size:13.5px;color:var(--zinc-500)}

/* ===== contactpagina ===== */
.ld-frm{padding-top:0}
.ld-frm .wrap{max-width:720px}

/* ===== de kaart van de laatste 24 uur: kaart met paneel ===== */
.ka-vlak{position:relative}
.ka-doek{height:600px;border-radius:14px;overflow:hidden;border:1px solid var(--hairline);box-shadow:var(--shadow-soft);background:#DCE7EC}
.ka-doek .maplibregl-popup-content{font-family:'Inter',sans-serif;font-size:12.5px;padding:7px 10px;border-radius:8px;color:var(--ink)}
.ka-paneel{position:absolute;left:16px;top:16px;width:250px;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;box-shadow:0 12px 30px -16px rgba(0,35,57,.4);text-align:left;z-index:2}
/* De klok boven de kaart: hoe laat het is bij de auto's die nu opkomen, en
   hoeveel van de dag er nog te gaan is. */
.ka-tijdbalk{display:flex;align-items:center;gap:16px;margin:0 0 12px;padding:10px 16px;
  background:#fff;border:1px solid var(--hairline);border-radius:12px}
.ka-digitaal{flex:none;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:26px;
  letter-spacing:.02em;color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.1}
.ka-tijdmidden{flex:1;min-width:0}
.ka-rest{flex:none;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--zinc-500);
  font-variant-numeric:tabular-nums}
.ka-klok-lbl{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--zinc-500);margin-bottom:4px}
.ka-balk{display:block;height:4px;border-radius:999px;background:var(--sand-2);overflow:hidden}
.ka-balk b{display:block;height:100%;width:0;background:var(--lime);border-radius:999px;transition:width .12s linear}
.ka-tellers{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-bottom:12px}
.ka-telblok{display:flex;flex-direction:column;gap:2px}
.ka-tel{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:34px;letter-spacing:-.03em;line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.ka-telblok.weg .ka-tel{color:#52525B}
.ka-telblok.prijs .ka-tel{color:#B45309}
.ka-telblok.scam .ka-tel{color:#52525B}
.ka-tellers .ka-tel{font-size:28px}
.ka-telblok span{font-size:12px;line-height:1.3;color:var(--zinc-500)}
.ka-legenda{list-style:none;margin:0 0 12px;padding:10px 0 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr 1fr;gap:5px 10px}
.ka-legenda li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--zinc-700)}
.ka-legenda li i{width:10px;height:10px;border-radius:50%;flex:none;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ka-legenda li b{margin-left:auto;font-weight:500;color:var(--zinc-500);font-variant-numeric:tabular-nums}
.ka-opnieuw{display:none;width:100%;font:500 13px 'Inter',sans-serif;padding:8px 12px;border-radius:8px;border:1px solid var(--hairline);background:#fff;color:var(--navy);cursor:pointer}
.ka-klaar .ka-opnieuw{display:block}
.ka-opnieuw:hover{background:var(--sand)}
.ka-fijn{margin:12px 0 0;font-size:13px;color:var(--zinc-500)}
@media(max-width:800px){.ka-tijdbalk{gap:12px;padding:9px 13px}.ka-vlak{display:flex;flex-direction:column}.ka-paneel{position:static;order:-1;width:auto;margin-bottom:12px;backdrop-filter:none}.ka-doek{height:420px}.ka-digitaal{font-size:22px}.ka-tel{font-size:28px}}

/* Vierde kaart in de lijst van het openingsscherm (op de landingspagina). */
.ld-page .hero .app2:not([data-view="photo"]):not([data-view="map"]):not([data-view="report"]) .card2:nth-of-type(6){display:grid}

/* ===== knoppen onder het openingsscherm, alleen op de landingspagina ===== */
.hero-ld-ctas{display:none}
/* het keuzelijstje in de kop moet over de mock-up heen vallen; de mock-up
   (.stage) staat hoger en komt later in de HTML, dus de tekstkolom erboven */
.ld-page .hero>.wrap:not(.stage){z-index:7}
.ld-page .hero-ld-ctas{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px;position:relative;z-index:5}
.hero-ld-knoppen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero-ld-ctas .btn.hollow,.nf-sec .btn.hollow{background:rgba(255,255,255,.7);background-image:none;color:var(--navy);border:1.5px solid rgba(0,35,57,.35);box-shadow:none;font-weight:500}
.hero-ld-ctas .btn.hollow:hover,.nf-sec .btn.hollow:hover{background:#fff;border-color:var(--navy)}
@media(max-width:700px){.hero-ld-knoppen{flex-direction:column;width:100%;padding:0 18px}.hero-ld-knoppen .btn{width:100%;justify-content:center}}

/* ===== onder de motorkap, in de vorm van de notitie aan de marktplaatsen ===== */
.ld-kracht .mkt-note .kicker{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8A5B00;margin-bottom:12px}
.ld-kracht .mkt-note h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(26px,3vw,36px);letter-spacing:-.02em;line-height:1.15;color:var(--navy);margin:0 0 16px;text-align:left}
.ld-kracht .mkt-note{text-align:left}
.ld-kracht .steps3{text-align:left}

/* Tijdlijn: de omschrijving is een eigen regel, zodat hij te vertalen is. */
.tl i{font-style:normal}

/* Leeggemaakte regels (bewust weggehaald in het CMS) verdwijnen ook op de landingspagina. */
[data-leeg]{display:none!important}
/* Tijdlijn: wat nog komt, licht gemarkeerd. */
.tl .tl-next{background:#FFFBEB}
.tl .tl-next .dt{color:#B45309}

/* ===== wat de afgelopen 24 uur waard waren ===== */
.ka-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
@media(max-width:1000px){.ka-kpi{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ka-kpi{grid-template-columns:1fr}}
.ka-kpi-tegel{background:#fff;border:1px solid var(--hairline);border-radius:14px;padding:18px 20px 16px;box-shadow:var(--shadow-soft);text-align:left;display:flex;flex-direction:column;gap:4px}
.ka-kpi-tegel.hi{background:var(--navy);border-color:var(--navy)}
.ka-kpi-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(28px,3vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--navy);font-variant-numeric:tabular-nums}
.ka-kpi-tegel.hi .ka-kpi-n{color:var(--lime)}
.ka-kpi-lbl{font-size:14px;line-height:1.35;color:var(--zinc-700)}
.ka-kpi-tegel.hi .ka-kpi-lbl{color:#fff}
.ka-kpi-sub{font-size:12px;color:var(--zinc-500);margin-top:4px}
.ka-kpi-tegel.hi .ka-kpi-sub{color:#C7D2DB}
.ka-kpi-fijn{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--zinc-500);max-width:820px}

/* ===== dag en nacht in de scene: na zonsondergang maan, sterren en koplampen ===== */
.scene .maan{opacity:0;transition:opacity 1.2s ease}
.scene .zon{transition:opacity 1.2s ease}
.scene #sky stop,.scene #hillA stop,.scene #hillB stop{transition:stop-color 1.2s ease}
.scene .wolken,.scene .weg,.scene .wegstreep{transition:fill 1.2s ease,stroke 1.2s ease,opacity 1.2s ease}
.scene .bundel{fill:url(#lamplicht);opacity:0;transition:opacity 1.2s ease}
.is-nacht .scene .zon{opacity:0}
.is-nacht .scene .maan{opacity:1}
@media(prefers-reduced-motion:no-preference){.is-nacht .scene .sterren circle{animation:ster 3.2s ease-in-out infinite}.is-nacht .scene .sterren circle:nth-child(3n){animation-delay:1.1s}.is-nacht .scene .sterren circle:nth-child(3n+1){animation-delay:2.2s}}
@keyframes ster{0%,100%{opacity:.55}50%{opacity:1}}
/* ===== de pagina eindigt als de avond =====
   De laatste sectie begint in de papierkleur van de pagina, gaat door de lucht
   van het openingsscherm en landt precies op de kleur van de footer. De
   vragenkaarten zijn wit, dus die blijven op elke hoogte leesbaar. */
.ld-page #vragen{position:relative;overflow:hidden;padding-bottom:170px;
  background:linear-gradient(180deg,var(--sand) 0%,#DCE6EE 26%,#A8BED2 48%,#3B5573 74%,#1B2A3C 90%,#191A1B 100%)}
.ld-page #vragen>.wrap{position:relative;z-index:1}
.ld-page #vragen .vr-ringen{position:absolute;left:50%;bottom:-760px;width:1500px;height:1500px;
  transform:translateX(-50%);opacity:.45;pointer-events:none}
@media(max-width:700px){.ld-page #vragen{padding-bottom:120px}
  .ld-page #vragen .vr-ringen{width:1100px;height:1100px;bottom:-620px}}
/* ===== het openingsscherm leeft =====
   Alleen op de landingspagina en alleen als de bezoeker beweging wil zien.
   Drie lagen, alle drie dunne lijnen in het bovenste deel van het beeld, zodat
   ze dwars door de tekst heen lopen en ook op een telefoon te zien zijn: de
   streepjes van de gestippelde ring stromen, er dijen twee ringen uit vanuit
   het radarhart, en er trekt een lichtspoor over de gestippelde ring.
   Bewust op de achtergrond: zachte dekking en een trage ronde. */
.ld-page .scene .puls{transform-box:view-box;transform-origin:720px 700px;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .ld-page .scene .radar .stip{animation:sc-stroom 26s linear infinite}
  /* Twee ringen achter elkaar: een rustige hartslag van dertien seconden. */
  .ld-page .scene .puls{animation:sc-puls 13s cubic-bezier(.22,.6,.3,1) infinite}
  .ld-page .scene .puls-na{animation-delay:1.8s}
}
.ld-page .scene .spoor{--spoorkleur:#FFFFFF}
.ld-page .scene .spoor-lijn{stroke:var(--spoorkleur)}
.ld-page .scene .spoor-gloed{stroke:var(--spoorkleur)}
/* De omtrek van de ring is 2*pi*450 = 2827. Het lichtspoor reist alleen over
   het stuk dat in beeld staat: van 64% tot 86% van de omtrek is links-boven
   naar rechts-boven. Op een telefoon is daar de top van in beeld. */
.ld-page .scene .spoor circle{stroke-dasharray:260 2567;stroke-dashoffset:-1809;opacity:0}
@media(prefers-reduced-motion:no-preference){
  .ld-page .scene .spoor-lijn{animation:sc-lijn 13s ease-in-out infinite}
  .ld-page .scene .spoor-gloed{animation:sc-gloed 13s ease-in-out infinite}
}
@keyframes sc-lijn{
  0%{stroke-dashoffset:-1809;opacity:0}
  12%{opacity:.42}
  52%{stroke-dashoffset:-2431;opacity:.42}
  60%,100%{stroke-dashoffset:-2431;opacity:0}}
@keyframes sc-gloed{
  0%{stroke-dashoffset:-1809;opacity:0}
  12%{opacity:.11}
  52%{stroke-dashoffset:-2431;opacity:.11}
  60%,100%{stroke-dashoffset:-2431;opacity:0}}
@media(prefers-reduced-motion:reduce){.ld-page .scene .spoor{display:none}}
@keyframes sc-stroom{to{stroke-dashoffset:-220}}
@keyframes sc-puls{0%{opacity:0;transform:scale(1)}12%{opacity:.15}55%{opacity:0;transform:scale(5.2)}100%{opacity:0;transform:scale(5.2)}}
.is-nacht .scene .puls circle{stroke:#FFF3B8}
.is-nacht .scene .spoor{--spoorkleur:#FFF3B8}
.is-nacht .scene #sky stop:nth-child(1){stop-color:#0F2238}
.is-nacht .scene #sky stop:nth-child(2){stop-color:#274161}
.is-nacht .scene #sky stop:nth-child(3){stop-color:#8FA3B7}
.is-nacht .scene #hillA stop:nth-child(1){stop-color:#4B5E6E}
.is-nacht .scene #hillA stop:nth-child(2){stop-color:#3A4B59}
.is-nacht .scene #hillB stop:nth-child(1){stop-color:#2F3F4B}
.is-nacht .scene #hillB stop:nth-child(2){stop-color:#232F39}
.is-nacht .scene .wolken{fill:#4A5D72;opacity:.8}
.is-nacht .scene .radar{opacity:.2}
.is-nacht .scene .sweep{opacity:.35}
.is-nacht .scene .weg{stroke:#4E5B67}
.is-nacht .scene .wegstreep{stroke:#97A4AF}
.is-nacht .scene .convoy{--lamp:#FFF7C2}
.is-nacht .scene .bundel{opacity:1}
.is-nacht .hero h1,.is-nacht .hero .beats{color:#fff}
.is-nacht .hero h1>em{color:var(--lime)}
.is-nacht .hero .beats span{color:#E6EBF0}
.is-nacht .hero .beats i{background:var(--lime)}
.is-nacht .hero .lead{color:#B9C6D2}
.is-nacht .hero .lead strong{color:#fff}
.is-nacht .hero-badge{background:#fff;color:var(--navy);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.is-nacht .ph-logo img{content:url(/img/logo-white.png)}
/* Pagina's zonder openingsscherm (het formulier) beginnen meteen met een kop.
   De overgang naar het zand zit helemaal in de onderste marge, zodat geen
   letter op het lichte deel van het verloop valt. */
.is-nacht .ld-top .ld-kop{max-width:none;padding-bottom:156px;
  padding-left:max(24px,(100% - 1072px)/2);padding-right:max(24px,(100% - 1072px)/2);
  background:linear-gradient(0deg,var(--sand) 0,#DEDCD4 26px,#B3BBC1 54px,#7D91A4 86px,#4A6480 116px,#22395A 142px,#0F2238 164px,#0F2238 100%)}
.is-nacht .ld-top .ld-frm{padding-top:10px}
@media(max-width:700px){.is-nacht .ld-top .ld-kop{padding-bottom:104px;
  background:linear-gradient(0deg,var(--sand) 0,#DEDCD4 18px,#B3BBC1 38px,#7D91A4 60px,#4A6480 80px,#22395A 98px,#0F2238 112px,#0F2238 100%)}}
.is-nacht .ld-top .ld-kop h2{color:#fff}
.is-nacht .ld-top .ld-kop h2 em{color:var(--lime)}
.is-nacht .ld-top .ld-kop .sub{color:#C7D3DF}
.is-nacht .ld-top .ld-kop .kicker{color:#FFD79A}
/* Pagina's zonder de tekening (over, contact, voorwaarden) dragen 's avonds
   dezelfde nachtklasse. Hun kopsectie krijgt daarom dezelfde donkere lucht als
   het openingsscherm; zonder dat stond het witte logo op een licht vlak.
   De rest van de pagina blijft licht, net als op de homepage. */
.is-nacht .subhero{background:linear-gradient(180deg,#0F2238 0%,#274161 55%,#8FA3B7 100%)}
.is-nacht .subhero h1{color:#fff}
.is-nacht .subhero h1>em{color:var(--lime)}
.is-nacht .subhero .lead{color:#C7D3DF}
.is-nacht .subhero .kicker{color:#FFD79A;background:rgba(10,24,40,.55)}
.is-nacht .subhero .rings{opacity:.35}
.is-nacht .subhero .btn.hollow{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.45)}

/* ===== het dossier als vierde tabblad in de inbox van het openingsscherm ===== */
.ld-page .hero .l-views .vw .ld-x{display:inline-block}
.v-report{display:none}
.app2[data-view="report"] .card2,.app2[data-view="report"] .detail2{display:none}
.hero .app2[data-view="report"] .app2-body{grid-template-columns:176px 1fr}
.hero .app2[data-view="report"] .v-report{display:flex;flex-direction:column;flex:1;min-height:0}
.rp-top{display:flex;align-items:center;gap:12px;font-size:10.5px;color:#3F3F46;margin:2px 0 8px}
.rp-top b{font-weight:600;color:#18181B}
.rp-top em{margin-left:auto;font-style:normal;color:#0444AC}
.rp-body{display:grid;grid-template-columns:150px 1fr;gap:12px;flex:1;min-height:0}
.rp-pages{display:flex;flex-direction:column;gap:6px}
.rp-pg{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #E4E4E7;border-radius:8px;font-size:10.5px;color:#3F3F46;background:#FAFAF9}
.rp-pg i{font-style:normal;width:18px;height:22px;border:1px solid #D4D4D8;border-radius:2px;background:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;color:#71717A;flex:none}
.rp-pg.on{border-color:#002339;background:#fff;color:#18181B;font-weight:600}
.rp-page{border:1px solid #E4E4E7;border-radius:10px;background:#fff;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.06);overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:0}
.rp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:1px solid #F4F4F5;padding-bottom:10px}
.rp-head small{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#71717A;margin-bottom:3px}
.rp-head b{display:block;font-size:14px;color:#18181B}
.rp-head span{font-size:10.5px;color:#71717A}
.rp-stamp{font-style:normal;flex:none;font-size:10px;font-weight:600;color:#15803D;background:#ECFDF5;border:1px solid #A7F3D0;border-radius:999px;padding:3px 9px}
.rp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rp-stats>div{border:1px solid #F4F4F5;border-radius:8px;padding:8px 10px;background:#FAFAF9;display:flex;flex-direction:column;gap:1px;min-width:0}
.rp-stats span{font-size:9.5px;color:#71717A}
.rp-stats b{font-size:13px;color:#18181B;white-space:nowrap}
.rp-stats em{font-style:normal;font-size:9.5px;color:#71717A}
.rp-stats .hi b{color:#15803D}
.rp-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:10.5px;color:#3F3F46}
.rp-sec b{display:block;font-size:10.5px;color:#18181B;margin-bottom:4px}
.rp-sec ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:3px}
.rp-sec li{padding-left:14px;position:relative;line-height:1.35}
.rp-sec li::before{content:'·';position:absolute;left:3px;color:#A1A1AA}
.rp-sec li.ok::before{content:'✓';color:#15803D;left:0}
.rp-sec li.at::before{content:'!';color:#B45309;left:2px;font-weight:700}
@media(max-width:1000px){.hero .app2[data-view="report"] .app2-body{grid-template-columns:1fr}}
@media(max-width:700px){.rp-body{grid-template-columns:1fr}.rp-pages{display:none}.rp-stats{grid-template-columns:1fr 1fr}.rp-cols{grid-template-columns:1fr}.rp-top span{display:none}.rp-page{padding:12px 14px}}

/* ===== kaart: legenda als filter en het drukste uur ===== */
.ka-legenda li[data-gen]{cursor:pointer;border-radius:6px;padding:2px 5px;margin:-2px -5px;transition:background .15s ease,opacity .2s ease}
.ka-legenda li[data-gen]:hover{background:var(--sand)}
.ka-legenda li.on{background:var(--sand)}
.ka-legenda.ka-filter li:not(.on){opacity:.35}
.ka-hint{font-size:11px;color:var(--zinc-500);margin:-6px 0 10px}
.ka-feit{margin:8px 0 0;font-size:13.5px;color:var(--zinc-700)}
.ka-feit b{font-weight:600;color:var(--navy)}

/* ===== 404 in de stijl van de landingspagina ===== */
.nf-sec{min-height:78vh;display:flex;align-items:center;padding:140px 0 80px}
.nf-sec .nf{padding:0}
.nf-sec .nf .big{color:#E8E2D3}
.nf-sec h1{font-size:clamp(34px,4.6vw,52px)}
.nf-sec .sub{max-width:520px;margin:0 auto 26px}
.nf-sec .hero-ld-knoppen{justify-content:center}

/* 's Nachts blijft het keuzewoord in de kop leesbaar. */
.is-nacht .hero .vt-btn{color:var(--navy);background:rgba(255,255,255,.92)}

/* ===== hoe het werkt op de telefoon: één rij stappen, de uitleg, en de inbox met de kaarten erover ===== */
@media(max-width:640px){
  .hw{grid-template-columns:repeat(6,1fr);gap:6px;margin:0 2px}
  .hw-stap{align-items:center;opacity:.45}
  .hw-stap.gedaan,.hw-stap.nu{opacity:1}
  .hw-stap h3{display:none}
  .hw-ic{width:42px;height:42px;margin-bottom:0}
  .hw-ic svg{width:19px;height:19px}
  .hw-stap.nu .hw-ic{transform:translateY(-3px)}
  .hw-n{left:calc(50% + 8px);top:-6px;width:18px;height:18px;font-size:9.5px}
  .hw-stap::after,.hw-vul{display:block;top:20px;left:calc(50% + 22px);right:calc(-50% + 22px)}
  .hw-stap:last-child::after,.hw-stap:last-child .hw-vul{display:none}
  .jb-tekst{margin:18px auto 14px}
  .jr-p{font-size:14.5px}
  .jb-raam{display:block;height:300px;border:1px solid var(--hairline);box-shadow:var(--shadow-soft)}
  .jb .app2-body{min-height:0}
  .jb .l-views{display:none}
  .jb-laag[data-i="2"]{top:10px;width:92%}
  .jb-laag[data-i="3"],.jb-laag[data-i="4"],.jb-laag[data-i="5"]{top:auto;bottom:14px;right:10px;left:10px;width:auto}
  .jb-kaart{padding:11px 13px}
  .hw-slot{font-size:15px;margin-top:12px}
}