/* technische-seo: CSS van de secties op deze pagina (docs/prototype/technische-seo.html, inline <style>).
   Opvolgen staat in seo-shared.css, de snelheidstest in psi.css, het kruimelpad in styles.css. */
/* ---------- technische SEO: paginaspecifiek ---------- */
.hand{font-family:var(--font-hand)}
/* de doorlichting: röntgenfilm links, rapport rechts */
.ts-track{position:relative;height:300vh}
.ts-sticky{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;padding:76px 0 20px}
.ts-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center}
.ts-box{position:relative;background:#E9E3D7;border-radius:22px;padding:18px;box-shadow:var(--shadow-lift)}
.ts-box::before{content:"";position:absolute;left:50%;top:-10px;translate:-50% 0;width:90px;height:22px;border-radius:6px;background:linear-gradient(#C9C2B4,#B5AE9F);box-shadow:0 2px 0 rgb(0 0 0 / .08)}
.ts-film{position:relative;aspect-ratio:3/4;max-height:calc(100vh - 150px);margin:0 auto;border-radius:10px;overflow:hidden;container-type:inline-size;background:radial-gradient(120% 90% at 50% 40%,#22345E 0%,#132140 60%,#0C1630 100%);color:#CFE0FF}
.ts-film-in{position:absolute;inset:0;font-size:clamp(8px,2.6cqw,13px)}
.ts-film .lbl{position:absolute;left:4%;top:2.5%;font-family:var(--font-mono);font-size:.8em;letter-spacing:.1em;color:#8FA9D9}
.ts-film .lbl.r{left:auto;right:4%}
/* de pagina als doorschijnend skelet */
.ts-sk{position:absolute;left:8%;right:8%;border:1.5px solid rgb(190 214 255 / .55);border-radius:.5em}
.ts-sk.line{border:0;height:.55em;border-radius:1em;background:rgb(190 214 255 / .32)}
.ts-sk .t{position:absolute;left:.6em;top:.35em;font-family:var(--font-mono);font-size:.78em;color:rgb(190 214 255 / .8)}
.ts-sk.img{background:repeating-linear-gradient(135deg,rgb(190 214 255 / .12) 0 6px,transparent 6px 12px)}
.ts-sk.link{border:0;border-bottom:1.5px dashed rgb(190 214 255 / .7);border-radius:0;height:0}
/* de scanlijn */
.ts-scan{position:absolute;left:0;right:0;top:calc(var(--scan,0) * 100%);height:14%;transform:translateY(-100%);background:linear-gradient(to bottom,transparent,rgb(160 200 255 / .08) 70%,rgb(200 225 255 / .35));border-bottom:3px solid #E6F0FF;box-shadow:0 6px 14px -6px rgb(200 225 255 / .7);pointer-events:none}
/* bevindingen: rode cirkel met handgeschreven label */
.ts-find{position:absolute;opacity:0;transition:opacity .35s}
/* voorproef in de kop: de bovenste helft van de film, met drie bevindingen al omcirkeld */
.ts-peek .ts-box{rotate:2deg;padding:14px}
.ts-film-peek{aspect-ratio:4/3;max-height:none}
.ts-film-peek .ts-film-in{inset:0 0 -60% 0}
.ts-find.on{opacity:1}
.ts-find svg{position:absolute;inset:-18% -8%;width:116%;height:136%;overflow:visible}
.ts-find ellipse{fill:none;stroke:#FF7A66;stroke-width:2.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease}
.ts-find.on ellipse{stroke-dashoffset:0}
.ts-find .n{position:absolute;top:-.9em;right:-.9em;width:1.8em;height:1.8em;border-radius:50%;background:#FF7A66;color:#1A0E0B;font-weight:800;font-size:.85em;display:flex;align-items:center;justify-content:center}
/* het rapport */
.ts-report{background:#fff;border-radius:6px;box-shadow:0 30px 60px -28px rgb(25 23 20 / .4),0 0 0 1px rgb(25 23 20 / .06);padding:clamp(18px,2.4vw,30px);position:relative}
.ts-report::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--color-ink);border-radius:6px 6px 0 0}
.ts-rh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:2px solid var(--color-ink);padding-bottom:10px}
.ts-rh b{font-family:var(--font-serif);font-size:22px}
.ts-rh span{font-size:12px;color:var(--color-ink-3)}
.ts-rows{list-style:none;margin:0;padding:0}
.ts-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:8px 0;border-bottom:1px solid #EEE9DF;opacity:.18;transition:opacity .4s}
.ts-row.on{opacity:1}
.ts-row .n{width:22px;height:22px;border-radius:50%;background:var(--color-rule);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:background .3s,color .3s}
.ts-row.on .n{background:var(--color-accent);color:#fff}
.ts-row .c{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-ink-3)}
.ts-row .f{display:block;font-weight:600;font-size:14.5px;line-height:1.3;color:var(--color-ink)}
.ts-row .w{display:block;font-size:13px;line-height:1.4;color:var(--color-ink-2);margin-top:2px}
.ts-rf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:13px;color:var(--color-ink-3)}
.ts-stamp{font-weight:800;letter-spacing:.1em;font-size:13px;color:var(--color-ok);border:2px solid var(--color-ok);padding:3px 10px;border-radius:6px;rotate:-6deg;opacity:0;scale:1.25;margin-left:auto;transition:opacity .25s,scale .35s cubic-bezier(.3,1.6,.5,1)}
.ts-stamp.on{opacity:1;scale:1}
/* basiszaken */
.ts-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.ts-dl div{position:relative;padding:16px 0 16px 54px;border-top:1px solid var(--color-rule)}
.ts-ic{position:absolute;left:0;top:18px;width:40px;height:40px;padding:9px;border-radius:10px;background:var(--color-card);border:1px solid var(--color-rule);fill:none;stroke:var(--color-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ts-dl dt{font-family:var(--font-serif);font-size:20px;font-weight:600}
.ts-dl dd{margin:4px 0 0;color:var(--color-ink-2);font-size:15px}
@media (max-width:700px){
.ts-dl{grid-template-columns:minmax(0,1fr)}
}
/* checklist (Preline accordion) */
.ts-check .box{width:24px;height:24px;flex:none;border-radius:6px;border:2px solid var(--color-ink-3);display:flex;align-items:center;justify-content:center;color:transparent;font-weight:800;font-size:14px;transition:all .2s}
/* stappen */
.ts-steps{list-style:none;margin:0;padding:0;position:relative}
.ts-steps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--color-rule)}
.ts-steps li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding:0 0 26px}
.ts-steps li > span{width:36px;height:36px;border-radius:50%;background:var(--color-paper);border:2px solid var(--color-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-weight:700;position:relative;z-index:1}
.ts-steps b{display:block;font-family:var(--font-serif);font-size:21px;font-weight:600;line-height:1.2;margin-top:4px}
.ts-steps p{color:var(--color-ink-2);font-size:15.5px;margin-top:4px}
/* redirectkaart: van 404 naar doorverwezen */
.rd{background:#fff;border-radius:14px;box-shadow:0 30px 60px -24px rgb(25 23 20 / .28),0 0 0 1px rgb(25 23 20 / .06);overflow:hidden;font-size:13px}
.rd-h{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);gap:10px;padding:10px 16px;background:#F1EEE8;font-size:11px;font-weight:700;color:var(--color-ink-3);letter-spacing:.05em;text-transform:uppercase}
.rd-r{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);gap:10px;align-items:center;padding:11px 16px;border-top:1px solid #F0EDE7}
.rd-r code{font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere}
.rd-s{position:relative;height:22px}
.rd-s span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:999px;font-size:11px;font-weight:800;transition:opacity .35s var(--d,0s),transform .35s var(--d,0s)}
.rd-s .bad{background:#FBE3DC;color:#B03A2E}
.rd-s .good{background:var(--color-ok-soft);color:var(--color-ok);opacity:0;transform:scale(.6)}
.rd.in .rd-s .bad{opacity:0;transform:scale(.6)}
.rd.in .rd-s .good{opacity:1;transform:none}
.rd-new{opacity:0;transition:opacity .35s var(--d,0s)}
.rd.in .rd-new{opacity:1}
.rd-f{padding:10px 16px;border-top:1px solid var(--color-rule);font-size:12.5px;color:var(--color-ink-3)}
[role=tabpanel].hidden{display:none}
/* smalle schermen en minder beweging: geen vastgezette doorlichting */
.static .ts-track{height:auto}
.static .ts-sticky{position:relative;min-height:0;padding:64px 0 24px}
.static .ts-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.static .ts-scan{display:none}
@media (prefers-reduced-motion:reduce){
.ts-track{height:auto}
.ts-sticky{position:relative;min-height:0}
}
/* gsm: tekst in de illustratie leesbaar houden */
@media (max-width:640px){
.ts-film-in{font-size:max(10px,2.6cqw)}
}
/* dienstpagina's: overal dezelfde ruimte rond de hero. Kruimelpad tot de eerste tekst 32px (gsm) en 48px (desktop),
   laatste regel van de hero tot de titel van het volgende blok 112px en 144px. De marges hieronder corrigeren de
   eigen opbouw van deze hero naar die maten; in Wagtail wordt het één gedeelde instelling op de heroblokken. */
/* tekst en beeld bovenaan uitlijnen, niet centreren: anders zakt de H1 mee met de hoogte van het beeld en verschilt de afstand per schermbreedte */
.svc-hero-cols,.svc-hero .sa-sticky,.svc-hero .wl-sticky{align-items:start}
.svc-hero{margin-top:-8px;margin-bottom:-7px}
@media (min-width:768px) and (max-width:1023px){
.svc-hero{margin-top:-8px;margin-bottom:-7px}
}
@media (min-width:1024px){
.svc-hero{margin-top:0px;margin-bottom:-87px}
}
/* kleine desktop (1024 tot 1279px): de hero bouwt hier anders op, dus een eigen correctie */
@media (min-width:1024px) and (max-width:1279px){
.svc-hero{margin-top:0px;margin-bottom:-111px}
}

/* omzetting naar Wagtail: de snelheidstest (py) gevolgd door de checklist: geen dubbele witruimte, zoals in het prototype (pt) */
.psi-sec + .ts-check-sec{padding-top:0}
.ts-dl dd p + p{margin-top:.5em}
.ts-what-rt.rt p + p{margin-top:0}