/* sno.tdgdigital.com — "Jij & je ___." Het &-teken uit het logo van Snoek & Schepman is het scharnier van de site.
   Kleuren uit het logo (blauw #2A3C92, grijs #8C9091) + hun oranje (#F37920); beeld = hun kleurvlak-fotografie. */
@font-face{font-family:"Rozha";src:url(/fonts/display.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Albert";src:url(/fonts/tekst.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{
  --blauw:#2a3c92;--inkt:#17205a;--grijs:#8c9091;--oranje:#f37920;--oranje-d:#c95a08;
  --papier:#f7f4ee;--papier2:#efe9df;--wit:#fff;--lijn:#d9d2c5;
  --rand:clamp(1.25rem,4.5vw,4.5rem);--kop:4.6rem;
  --serif:"Rozha",Georgia,"Times New Roman",serif;--sans:"Albert",system-ui,sans-serif;
  --vlak:#4f9fba;--vlak-inkt:#fff;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--kop) + 1rem)}
@media (min-width:1440px){html{font-size:clamp(100%,1.1111vw,200%)}:where(button,input,select,textarea){font-size:.8333rem}}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;overflow-x:clip}
img,video,svg{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
p,li,dd,td{hyphens:auto;overflow-wrap:break-word}
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance;font-family:var(--serif);font-weight:400;line-height:1.02;margin:0;letter-spacing:-.01em}
a{color:inherit}
::selection{background:var(--oranje);color:#fff}
:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
a[href^=mailto],a[href^=tel]{hyphens:none;overflow-wrap:anywhere}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--papier);padding:.5rem 1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.en{display:inline-block;width:.86em;height:.82em;vertical-align:-.06em}
.en path{fill:currentColor}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;gap:.6em;min-height:3rem;padding:.75em 1.35em;border-radius:999px;border:2px solid var(--oranje);
  background:var(--oranje);color:#fff;font:700 1rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.knop:hover{background:var(--oranje-d);border-color:var(--oranje-d)}
.knop:active{transform:translateY(1px)}
.knop-rand{background:transparent;color:currentColor;border-color:currentColor}
.knop-rand:hover{background:currentColor;border-color:currentColor}
.knop-rand:hover>span{color:var(--papier)}
.knop-blauw{background:var(--blauw);border-color:var(--blauw)}
.knop-blauw:hover{background:var(--inkt);border-color:var(--inkt)}
.pijl::after{content:"";width:.9em;height:.9em;background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z"/></svg>') center/contain no-repeat}
.tekstlink{font-weight:700;color:var(--blauw);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.tekstlink:hover{color:var(--oranje-d)}

/* ---------- kop ---------- */
.kop{position:sticky;top:0;z-index:50;height:var(--kop);display:flex;align-items:center;gap:1.5rem;padding:0 var(--rand);
  background:rgba(247,244,238,.94);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.kop.gescrold{border-bottom-color:var(--lijn)}
.kop-logo{flex:0 0 auto;display:block;width:clamp(11rem,17vw,15rem)}
.kop-logo img{width:100%;height:auto}
.kop-nav{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.kop-nav a{padding:.55rem .75rem;border-radius:.4rem;font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap}
.kop-nav a:hover,.kop-nav a[aria-current]{color:var(--blauw);background:rgba(42,60,146,.07)}
.kop-nav a.kop-schade{color:var(--oranje-d)}
.kop-bel{display:flex;flex-direction:column;align-items:flex-end;text-decoration:none;line-height:1.15;padding-left:1rem;border-left:1px solid var(--lijn)}
.kop-bel b{font-size:1.02rem;white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:.45em;font-size:.82rem;color:#5d6062}
.status::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--grijs)}
.status.open::before{background:#2fa35a;box-shadow:0 0 0 .2em rgba(47,163,90,.18)}
.menuknop{display:none;margin-left:auto;flex-shrink:0;width:3rem;height:3rem;border:0;border-radius:50%;background:var(--blauw);color:#fff;cursor:pointer}
.menuknop span,.menuknop span::before,.menuknop span::after{display:block;width:1.2rem;height:2px;background:currentColor;margin:auto;position:relative;transition:transform .25s}
.menuknop span::before,.menuknop span::after{content:"";position:absolute;left:0}
.menuknop span::before{top:-6px}.menuknop span::after{top:6px}
.menu-open .menuknop span{background:transparent}
.menu-open .menuknop span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menuknop span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1100px){
  .kop-nav{position:fixed;inset:var(--kop) 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:1rem var(--rand) 2rem;background:var(--papier);
    overflow-y:auto;transform:translateY(-.5rem);opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s}
  .menu-open .kop-nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s}
  .kop-nav a{font:400 clamp(1.8rem,7vw,2.6rem)/1.15 var(--serif);padding:.55rem 0;border-bottom:1px solid var(--lijn);border-radius:0}
  .kop-nav a:hover{background:none}
  .kop-bel{border:0;padding:1.2rem 0 0;align-items:flex-start}
  .kop-bel b{font:800 1.4rem var(--sans)}
  .menuknop{display:block}
}

/* ---------- hero: de &-wisselaar ---------- */
.held{position:relative;height:calc(100svh - var(--kop));min-height:34rem;max-height:62rem;background:var(--vlak);color:var(--vlak-inkt);
  overflow:hidden;transition:background-color .8s ease,color .5s}
.held-film{position:absolute;inset:0 0 0 40%}
.held-film video,.held-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transition:opacity .7s ease}
.held-film video:not(.aan){opacity:0}
.held-film::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--vlak) 0%,color-mix(in srgb,var(--vlak) 75%,transparent) 8%,transparent 24%);transition:background .8s}
.held-tekst{position:absolute;z-index:3;left:var(--rand);bottom:clamp(6.5rem,14vh,8.5rem);width:min(50rem,56%)}
.held-zin{margin:0;font:400 clamp(3.4rem,7.4vw,8.6rem)/.9 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.held-woord{display:block}
.held-zin .en{color:var(--blauw);width:.9em;height:.86em;margin:0 .04em;vertical-align:-.08em;transition:color .6s}
.held[data-donker] .held-zin .en{color:#fff}
.held-woord{display:block;position:relative}
.held-woord span{display:inline-block}
.held-sub{hyphens:manual;margin:1.3rem 0 1.6rem;max-width:30rem;font-size:clamp(1.02rem,1.25vw,1.2rem);font-weight:500;line-height:1.45}
.held-knoppen{display:flex;flex-wrap:wrap;gap:.7rem}
.held .knop-rand{color:inherit}
.held-keus{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;gap:0;padding:0 var(--rand);border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);
  background:color-mix(in srgb,var(--vlak) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .8s}
.held-keus button{flex:1 1 0;min-width:0;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:1rem .9rem 1.05rem 0;border:0;background:none;color:inherit;
  font:600 .95rem/1.2 var(--sans);text-align:left;cursor:pointer;opacity:.72;transition:opacity .2s}
.held-keus button small{font-size:.74rem;font-weight:500;opacity:.8}
.held-keus button:hover,.held-keus button[aria-pressed=true]{opacity:1}
.held-keus button::before{content:"";position:absolute;left:0;right:.9rem;top:-1px;height:3px;background:currentColor;transform-origin:left;transform:scaleX(0)}
.held-keus button[aria-pressed=true]::before{animation:balk var(--duur,6s) linear forwards}
.held.gepauzeerd .held-keus button[aria-pressed=true]::before{animation-play-state:paused}
@keyframes balk{to{transform:scaleX(1)}}
.held-pauze{position:absolute;z-index:4;right:var(--rand);top:1.1rem;width:2.75rem;height:2.75rem;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.75}
.held-pauze:hover{opacity:1}
.held-pauze::before,.held-pauze::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:.9rem;background:currentColor;transform:translate(-160%,-50%)}
.held-pauze::after{transform:translate(60%,-50%)}
.held.gepauzeerd .held-pauze::before{width:0;height:0;background:none;border-style:solid;border-width:.45rem 0 .45rem .75rem;border-color:transparent transparent transparent currentColor;transform:translate(-35%,-50%)}
.held.gepauzeerd .held-pauze::after{display:none}

/* opening: het echte logo, de namen wijken, het & blijft staan */
.opening{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:var(--papier);transition:background-color .55s ease .1s}
.opening-logo{position:relative;width:min(80vw,52rem)}
.opening-logo img{width:100%;transition:opacity .45s ease,filter .45s,transform .6s cubic-bezier(.6,0,.3,1)}
.opening-en{position:absolute;left:26.22%;top:1.66%;width:18.24%;height:96.68%;color:var(--blauw);transform-origin:0 0}
.opening-en svg{width:100%;height:100%}
.opening.weg-namen .opening-logo img{opacity:0;filter:blur(6px);transform:scale(.97)}
.opening.weg{background:transparent;pointer-events:none}
.opening-slaover{position:absolute;right:var(--rand);bottom:1.2rem;border:0;background:none;color:var(--grijs);font:600 .85rem var(--sans);cursor:pointer;padding:.6rem}
.held.opent .held-tekst,.held.opent .held-keus,.held.opent .held-pauze{opacity:0}
.held .held-tekst,.held .held-keus,.held .held-pauze{transition:opacity .6s ease}
.held.opent .held-zin .en{opacity:0}

@media (max-width:820px){
  .held{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column}
  .held-film{position:relative;inset:auto;order:1;height:min(calc(100svh - var(--kop) - 21rem),30rem);min-height:13rem;flex:0 0 auto}
  .held-film::before{background:linear-gradient(0deg,var(--vlak) 0%,transparent 22%)}
  .held-tekst{position:relative;order:2;left:auto;bottom:auto;width:auto;padding:0 var(--rand) 1.1rem;margin-top:-2.6rem}
  .held-sub{margin:.7rem 0 1rem;font-size:.98rem}
  .held-knoppen .knop{min-height:2.85rem;padding:.6em 1.1em}
  .held-zin{font-size:clamp(2.5rem,12vw,4.4rem);white-space:normal}
  .held-zin .held-jij{display:inline}
  .held-woord{display:block}
  .held-keus{position:relative;order:3;overflow-x:auto;scrollbar-width:none;padding:0;gap:0}
  .held-keus::-webkit-scrollbar{display:none}
  .held-keus button{flex:0 0 auto;padding:1rem 1.1rem 1.05rem;min-height:3.2rem}
  .held-keus button::before{left:1.1rem;right:1.1rem}
  .held-pauze{top:.8rem}
  .opening-logo{width:88vw}
}
@media (max-width:820px) and (orientation:landscape) and (max-height:500px){
  .held{flex-direction:row;flex-wrap:wrap}
  .held-film{order:2;width:50%;height:calc(100svh - var(--kop) - 3.2rem)}
  .held-film::before{background:linear-gradient(90deg,var(--vlak) 0%,transparent 30%)}
  .held-tekst{order:1;width:50%;margin:0;padding:1.2rem var(--rand) 1rem;align-self:center}
  .held-zin{font-size:clamp(2.2rem,7vw,3.4rem)}
  .held-sub{margin:.6rem 0 .8rem;font-size:.95rem}
  .held-keus{width:100%}
}

/* ---------- secties ---------- */
.sectie{padding:clamp(4rem,9vw,8.5rem) var(--rand);position:relative}
.sectie-papier2{background:var(--papier2)}
.sectie-blauw{background:var(--blauw);color:#fff}
.sectie-inkt{background:var(--inkt);color:#fff}
.sectie-oranje{background:var(--oranje);color:#fff}
.label{display:block;margin-bottom:1rem;font:700 .92rem/1.2 var(--sans);color:var(--oranje-d)}
.sectie-blauw .label,.sectie-inkt .label,.sectie-oranje .label{color:rgba(255,255,255,.78)}
.h-groot{font-size:clamp(2.6rem,6.2vw,6.4rem)}
.h-mid{font-size:clamp(2.1rem,4.4vw,4.2rem)}
.h-klein{font-size:clamp(1.6rem,2.6vw,2.4rem)}
.lead{font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5;font-weight:500}
.leeskolom{max-width:42rem}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,7rem);align-items:start}
@media (max-width:900px){.twee{grid-template-columns:1fr}}

/* intro: wij & 12 verzekeraars */
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2.5rem,7vw,8rem);align-items:end}
.intro h2{font-size:clamp(2.8rem,6vw,6.2rem)}
.intro p{margin:1.4rem 0 0;max-width:36rem}
.namen{margin:0;padding:0;list-style:none;font:700 clamp(1.25rem,2.1vw,2rem)/1.42 var(--sans);letter-spacing:-.01em;color:var(--inkt)}
.namen li{display:inline;white-space:nowrap;hyphens:none}
.namen li+li::before{content:" & ";font:400 1.15em var(--serif);color:var(--oranje)}
.namen-uitleg{margin-top:1.4rem!important;color:#5b5f66;font-size:.98rem}
@media (max-width:900px){.intro{grid-template-columns:1fr;align-items:start}}

/* drie deuren */
.deur{display:grid;grid-template-columns:1fr 1fr;min-height:min(42rem,86svh)}
.deur:nth-child(even) .deur-beeld{order:2}
.deur-beeld{position:relative;overflow:hidden;background:var(--d,#ccc)}
.deur-beeld img,.deur-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.deur-tekst{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,7vw,7rem) var(--rand)}
.deur-tekst h2{font-size:clamp(3rem,7vw,7.6rem)}
.deur-tekst h2 .en{color:var(--oranje)}
.deur-jij{margin:.5rem 0 1.4rem;font:400 clamp(1.4rem,2.2vw,2.1rem)/1.15 var(--serif);opacity:.8}
.deur-tekst p{max-width:34rem;margin:0 0 1.8rem}
.deur-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0 0 2rem;padding:0;list-style:none}
.deur-links a{font-weight:700;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.1rem}
.deur-links a:hover{color:var(--oranje)}
@media (max-width:820px){.deur{grid-template-columns:1fr;min-height:0}.deur:nth-child(even) .deur-beeld{order:0}.deur-beeld{aspect-ratio:4/3}}

/* polisblad: voordeelpakket */
.polis{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,6vw,7rem);align-items:center}
.polisblad{position:relative;background:#fff;color:var(--inkt);padding:clamp(1.6rem,3.5vw,3rem);border-radius:.3rem;
  box-shadow:0 1px 0 var(--lijn),0 2.4rem 4rem -2.4rem rgba(23,32,90,.35);transform:rotate(-1.2deg)}
.polisblad-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:1rem;border-bottom:2px solid var(--inkt);margin-bottom:.4rem}
.polisblad-kop img{width:min(14rem,55%)}
.polisblad-kop span{font:700 .8rem/1.3 var(--sans);text-align:right;color:#666}
.polisblad table{width:100%;border-collapse:collapse;font-size:1rem}
.polisblad td{padding:.72rem 0;border-bottom:1px dashed var(--lijn);vertical-align:top}
.polisblad td:last-child{text-align:right;white-space:nowrap;font-weight:700;color:var(--blauw);padding-left:1rem}
.polisblad tr.uit td{font-weight:800}
.stempel{position:absolute;right:-2.2rem;top:-3.2rem;width:9.5rem;height:9.5rem;border-radius:50%;border:3px solid var(--oranje);color:var(--oranje);
  display:grid;place-items:center;text-align:center;font:400 1rem/1 var(--serif);transform:rotate(12deg);background:rgba(255,255,255,.9)}
.stempel b{display:block;font-size:2.9rem;line-height:.9}
@media (max-width:900px){.polis{grid-template-columns:1fr}.polisblad{transform:none;margin-top:2.5rem}.stempel{right:-.4rem;top:-3.4rem;width:7rem;height:7rem}.stempel b{font-size:2.1rem}}

/* inboedelwaardemeter */
.meter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.meter-kamer{position:sticky;top:calc(var(--kop) + 1.5rem);border-radius:.4rem;overflow:hidden;background:#3e9f9f;aspect-ratio:3/2}
.meter-kamer video,.meter-kamer img{width:100%;height:100%;object-fit:cover}
.meter-uitkomst{position:absolute;left:0;right:0;bottom:0;padding:1.2rem 1.4rem;background:linear-gradient(0deg,rgba(23,32,90,.82),transparent);color:#fff}
.meter-uitkomst small{display:block;font-weight:600;opacity:.85}
.meter-bedrag{font:400 clamp(2.6rem,5vw,4.6rem)/1 var(--serif);font-variant-numeric:tabular-nums}
.meter-som{font-size:.86rem;opacity:.85}
.vraag{border:0;margin:0 0 1.6rem;padding:0}
.vraag legend{font-weight:800;margin-bottom:.6rem;padding:0}
.keuzes{display:flex;flex-wrap:wrap;gap:.5rem}
.keuzes label{position:relative}
.keuzes input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.keuzes span{display:inline-flex;align-items:center;min-height:2.75rem;padding:.55rem 1rem;border:2px solid var(--lijn);border-radius:.45rem;background:#fff;font-weight:600;font-size:.96rem;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.keuzes input:checked+span{border-color:var(--blauw);background:var(--blauw);color:#fff}
.keuzes input:focus-visible+span{outline:3px solid var(--oranje);outline-offset:2px}
.bij{display:grid;gap:.6rem}
.bij label{display:grid;grid-template-columns:1fr 9rem;gap:1rem;align-items:center;font-size:.96rem}
.bij input{width:100%;min-height:2.75rem;padding:.4rem .7rem;border:2px solid var(--lijn);border-radius:.45rem;font:600 1rem var(--sans);background:#fff}
.bij small{display:block;color:#6b6f75;font-size:.8rem}
.kleinletter{font-size:.86rem;color:#5d6066;max-width:40rem}
@media (max-width:900px){.meter{grid-template-columns:1fr}.meter-kamer{position:relative;top:auto}}
@media (max-width:480px){.bij label{grid-template-columns:1fr 7rem}}

/* schade-band */
.schade{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.schade-beeld{width:clamp(14rem,30vw,26rem);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#8b7cb6}
.schade-beeld img{width:100%;height:100%;object-fit:cover;object-position:45% 40%}
.schade h2{font-size:clamp(3.4rem,9vw,9rem)}
.schade p{max-width:36rem}
.schade-knoppen{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-top:1.6rem}
.schade .knop{background:#fff;border-color:#fff;color:var(--oranje-d)}
.schade .knop:hover{background:var(--inkt);border-color:var(--inkt);color:#fff}
.spoed{font-weight:700;text-decoration:none;color:#fff}
.spoed b{display:block;font:800 1.35rem var(--sans)}
@media (max-width:760px){.schade{grid-template-columns:1fr}.schade-beeld{width:min(16rem,70vw)}}

/* stapje extra: tijdlijn */
.jaren{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,5vw,4.5rem);border-top:2px solid currentColor}
.jaar{padding-top:1.4rem;position:relative}
.jaar::before{content:"";position:absolute;top:-.55rem;left:0;width:1rem;height:1rem;border-radius:50%;background:var(--oranje)}
.jaar b{display:block;font:400 clamp(3.2rem,6vw,6rem)/1 var(--serif)}
.jaar p{margin:.6rem 0 0;max-width:24rem}
@media (max-width:760px){.jaren{grid-template-columns:1fr;border-top:0;border-left:2px solid currentColor;padding-left:1.4rem}.jaar::before{top:2rem;left:-2.05rem}}
.motto{font:400 clamp(3rem,8vw,8rem)/.95 var(--serif);margin:0}
.motto .en{color:var(--oranje)}

/* nieuws */
.nieuws{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--lijn)}
.bericht{display:block;padding:1.6rem 1.6rem 2rem 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.bericht+.bericht{padding-left:1.6rem;border-left:1px solid var(--lijn)}
.bericht time{font-size:.86rem;color:#6a6e74;font-weight:600}
.bericht h3{font-size:clamp(1.5rem,2.2vw,2.1rem);margin:.5rem 0 .8rem}
.bericht p{margin:0;color:#43474e}
.bericht:hover h3{color:var(--blauw)}
@media (max-width:900px){.nieuws{grid-template-columns:1fr}.bericht+.bericht{padding-left:0;border-left:0}}

/* ---------- paginakop ---------- */
.pkop{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:min(40rem,calc(100svh - var(--kop)));background:var(--vlak);color:var(--vlak-inkt)}
.pkop-tekst{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(2.5rem,6vw,6rem) var(--rand)}
.pkop-tekst h1{font-size:clamp(2.8rem,6.6vw,7rem)}
.pkop-tekst h1 .en{color:var(--blauw)}
.pkop[data-donker] h1 .en{color:#fff}
.pkop-kop{margin:1.2rem 0 1.2rem;font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:600;max-width:32rem;line-height:1.4}
.usps{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0 0 1.8rem;padding:0;list-style:none;font-weight:700;font-size:.98rem}
.usps li::before{content:"✓";margin-right:.4em}
.pkop-beeld{position:relative;overflow:hidden}
.pkop-beeld img,.pkop-beeld video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.pkop-beeld::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--vlak) 0%,transparent 22%)}
.kruimel{font-size:.86rem;font-weight:600;margin-bottom:1.4rem;opacity:.85}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}
@media (max-width:820px){
  .pkop{grid-template-columns:1fr;min-height:0}
  .pkop-beeld{order:-1;height:min(46svh,24rem)}
  .pkop-beeld::before{background:linear-gradient(0deg,var(--vlak) 0%,transparent 30%)}
  .pkop-tekst{padding-top:1rem}
}
.pkop-plat{min-height:0;grid-template-columns:1fr;background:var(--papier);color:var(--inkt)}
.pkop-plat .pkop-tekst{padding-top:clamp(3rem,7vw,6rem);padding-bottom:clamp(2rem,4vw,3rem)}

/* productblokken */
.blokken{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:clamp(2rem,4vw,4.5rem) clamp(2rem,6vw,6rem)}
.blok h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:.9rem}
.blok p{margin:0 0 1rem}
.vinklijst{margin:0;padding:0;list-style:none}
.vinklijst li{position:relative;padding:.55rem 0 .55rem 2rem;border-bottom:1px solid var(--lijn)}
.vinklijst li::before{content:"";position:absolute;left:0;top:.85rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--blauw);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17.2-5-5 1.7-1.7 3.3 3.3 6.9-6.9 1.7 1.7z"/></svg>') center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17.2-5-5 1.7-1.7 3.3 3.3 6.9-6.9 1.7 1.7z"/></svg>') center/contain}
.vinklijst.niet li::before{background:#b8402c;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm4.9 15.5-1.4 1.4-3.5-3.5-3.5 3.5-1.4-1.4 3.5-3.5-3.5-3.5 1.4-1.4 3.5 3.5 3.5-3.5 1.4 1.4-3.5 3.5z"/></svg>') center/contain;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm4.9 15.5-1.4 1.4-3.5-3.5-3.5 3.5-1.4-1.4 3.5-3.5-3.5-3.5 1.4-1.4 3.5 3.5 3.5-3.5 1.4 1.4-3.5 3.5z"/></svg>') center/contain}

/* wachttijd */
.wacht{margin:1.4rem 0 1.2rem}
.wacht-balk{display:grid;grid-template-columns:3fr 9fr;height:2.6rem;border-radius:.4rem;overflow:hidden;font:700 .86rem/2.6rem var(--sans);text-align:center}
.wacht-balk span:first-child{background:repeating-linear-gradient(135deg,#d8d1c4 0 8px,#e8e2d6 8px 16px);color:var(--inkt)}
.wacht-balk span:last-child{background:var(--blauw);color:#fff}
.wacht-as{display:grid;grid-template-columns:3fr 9fr;font-size:.8rem;color:#666;margin-top:.3rem}

/* rekenmodule (Voogd) */
.module{background:#fff;border-radius:.4rem;padding:clamp(1.2rem,3vw,2.4rem);box-shadow:0 1px 0 var(--lijn)}
.module iframe{display:block;width:100%;height:46rem;border:0}
.module-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.4rem}
.module-kop p{margin:0;color:#5d6066;font-size:.92rem;max-width:30rem}

/* lijst andere producten */
.rijen{margin:0;padding:0;list-style:none;border-top:2px solid var(--inkt)}
.rijen a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 2.5rem;gap:1.4rem;align-items:center;padding:1.3rem 0;border-bottom:1px solid var(--lijn);text-decoration:none;transition:padding .25s,color .2s}
.rijen a:hover{padding-left:.8rem;color:var(--blauw)}
.rijen b{font:400 clamp(1.9rem,3.6vw,3.4rem)/1 var(--serif)}
.rijen b .en{color:var(--oranje);width:.8em}
.rijen span{color:#4b4f56}
.rijen i{justify-self:end;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--inkt);display:grid;place-items:center;color:#fff;font-style:normal}
.rijen a:hover i{background:var(--oranje)}
@media (max-width:640px){.rijen a{grid-template-columns:1fr 2.5rem;gap:.3rem 1rem}.rijen span{grid-column:1;font-size:.95rem}.rijen i{grid-row:1/3;grid-column:2}}

/* ---------- zakelijk: branchewijzer ---------- */
.wijzer-zin{font:400 clamp(1.9rem,4vw,3.8rem)/1.25 var(--serif);margin:0 0 2rem}
.wijzer-zin select{font:inherit;color:var(--oranje);background:transparent;border:0;border-bottom:3px solid var(--oranje);padding:0 1.6rem 0 0;max-width:100%;cursor:pointer;
  appearance:none;-webkit-appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f37920"><path d="M6 9l6 6 6-6z"/></svg>');background-repeat:no-repeat;background-position:right center;background-size:1.4rem}
.wijzer-zin select option{font:600 1rem var(--sans);color:var(--inkt)}
.wijzer-uit{font-weight:600;margin:0 0 2.2rem;max-width:46rem}
.verzekeraars{margin:0;padding:0;list-style:none;border-top:2px solid currentColor}
.verzekeraars details{border-bottom:1px solid rgba(255,255,255,.22);transition:opacity .35s}
.verzekeraars li.uit details{opacity:.38}
.verzekeraars summary{display:grid;grid-template-columns:minmax(0,1fr) auto 2rem;gap:1rem;align-items:center;padding:1.15rem 0;cursor:pointer;list-style:none}
.verzekeraars summary::-webkit-details-marker{display:none}
.verzekeraars summary b{font:400 clamp(1.6rem,2.8vw,2.6rem)/1.05 var(--serif)}
.verzekeraars summary em{font-style:normal;font-size:.92rem;opacity:.8;text-align:right}
.verzekeraars summary::after{content:"+";font:300 2rem/1 var(--sans);text-align:right;transition:transform .25s}
.verzekeraars details[open] summary::after{transform:rotate(45deg)}
.verzekeraars .past{display:inline-block;margin-left:.6rem;font:800 .74rem/1 var(--sans);color:var(--oranje);vertical-align:middle;letter-spacing:.02em}
.verzekeraars li.uit .past{display:none}
.vz-tekst{padding:0 0 1.8rem;max-width:46rem}
.vz-tekst p{margin:0 0 1.2rem}
@media (max-width:640px){.verzekeraars summary{grid-template-columns:1fr 2rem}.verzekeraars summary em{display:none}}

/* ---------- schade: aanrijdingsschets ---------- */
.schets{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.schets-veld{position:relative;background:#e9e4d9;border-radius:.4rem;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.schets-veld svg{width:100%;height:auto;aspect-ratio:1}
.schets-auto{cursor:grab}
.schets-auto:active{cursor:grabbing}
.schets-auto.gekozen .rand{stroke:var(--oranje);stroke-width:5}
.schets-bediening{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.8rem}
.schets-bediening button,.wegkeus button{min-height:2.75rem;padding:.5rem .9rem;border:2px solid var(--lijn);border-radius:.45rem;background:#fff;font:700 .92rem var(--sans);color:var(--inkt);cursor:pointer}
.schets-bediening button:hover,.wegkeus button:hover{border-color:var(--blauw)}
.wegkeus{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.8rem}
.wegkeus button[aria-pressed=true]{background:var(--inkt);border-color:var(--inkt);color:#fff}
.toedracht{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff;border-radius:.4rem;overflow:hidden}
.toedracht th{font:800 .8rem/1.2 var(--sans);text-align:left;padding:.7rem .6rem;background:var(--inkt);color:#fff}
.toedracht th.a,.toedracht td.a{background:#dfe6fb;text-align:center;width:3.2rem}
.toedracht th.b,.toedracht td.b{background:#fdf0b8;text-align:center;width:3.2rem}
.toedracht th.a{background:#2a3c92;color:#fff}.toedracht th.b{background:#e8b800;color:var(--inkt)}
.toedracht td{padding:.15rem .6rem;border-bottom:1px solid #ece6da;vertical-align:middle}
.toedracht td.n{width:2rem;font-weight:800;color:#888;text-align:right}
.toedracht input{width:1.4rem;height:1.4rem;margin:.6rem auto;display:block;cursor:pointer;accent-color:var(--inkt)}
.toedracht tfoot td{font-weight:800;padding:.8rem .6rem;background:#f6f3ec}
.tips{counter-reset:tip;margin:0;padding:0;list-style:none}
.tips li{counter-increment:tip;position:relative;padding:0 0 1.1rem 3rem}
.tips li::before{content:counter(tip);position:absolute;left:0;top:-.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--oranje);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.95rem}
@media (max-width:900px){.schets{grid-template-columns:1fr}}

/* documenten */
.docs{margin:0;padding:0;list-style:none;border-top:1px solid var(--lijn)}
.docs a{display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--lijn);text-decoration:none}
.docs a:hover b{color:var(--blauw);text-decoration:underline}
.docs a::before{content:"PDF";display:grid;place-items:center;width:2.6rem;height:3.2rem;border:2px solid currentColor;border-radius:.2rem .9rem .2rem .2rem;font:800 .66rem var(--sans);color:var(--oranje-d)}
.docs small{display:block;color:#666;font-size:.86rem}
.docs em{font-style:normal;font-size:.82rem;color:#777;white-space:nowrap}
.docgroep+.docgroep{margin-top:clamp(2.5rem,5vw,4rem)}

/* formulier */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
.form .heel{grid-column:1/-1}
.form label{display:grid;gap:.35rem;font-weight:700;font-size:.92rem}
.form input,.form textarea{width:100%;min-height:3rem;padding:.6rem .8rem;border:2px solid var(--lijn);border-radius:.45rem;background:#fff;font:500 1rem var(--sans);color:var(--inkt)}
.form textarea{min-height:8rem;resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--blauw);outline:none}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-weight:700;font-size:.92rem;margin-bottom:.5rem}
.form .keuzes span{font-size:.9rem}
.form-noot{font-size:.86rem;color:#5d6066;margin:0}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.naw{font-style:normal;font-size:1.1rem;line-height:1.7}
.naw b{font:400 2rem/1.1 var(--serif);display:block;margin-bottom:.4rem}
.tijden{border-collapse:collapse;margin-top:1.4rem;font-size:1rem}
.tijden td{padding:.4rem 1.6rem .4rem 0;border-bottom:1px solid var(--lijn)}
.tijden tr.vandaag td{font-weight:800;color:var(--blauw)}

/* artikel */
.artikel{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.artikel-tekst p{margin:0 0 1.2rem;font-size:1.12rem}
.artikel-beeld{border-radius:.4rem;overflow:hidden;background:#fff}
.artikel-beeld img{width:100%}
@media (max-width:900px){.artikel{grid-template-columns:1fr}}
.ppc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:2rem 0;border-top:2px solid var(--inkt)}
.ppc div{padding:1rem 1rem 0 0}
.ppc b{display:block;font:400 2rem/1 var(--serif);color:var(--blauw)}
@media (max-width:560px){.ppc{grid-template-columns:1fr}}

/* ---------- voet ---------- */
.voet{background:var(--inkt);color:#fff;padding:clamp(3.5rem,7vw,6rem) var(--rand) 2rem}
.voet-boven{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.4rem}
.voet-logo{width:min(17rem,100%)}
.voet h2{font:800 .86rem/1.2 var(--sans);margin:0 0 1rem;color:rgba(255,255,255,.65)}
.voet ul{margin:0;padding:0;list-style:none;line-height:2}
.voet a{text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet address{font-style:normal;line-height:1.8;margin-top:1.4rem}
.voet .status{color:rgba(255,255,255,.8)}
.keurmerken{display:flex;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}
.keurmerken span{display:block;padding:.6rem .8rem;border:1px solid rgba(255,255,255,.3);border-radius:.3rem;font-size:.82rem;line-height:1.3}
.keurmerken b{display:block;font-size:1rem}
.voet-onder{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.2);font-size:.86rem;color:rgba(255,255,255,.7)}
@media (max-width:980px){.voet-boven{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.voet-boven{grid-template-columns:1fr}}

/* inloop */
.in{opacity:0;transform:translateY(1.4rem);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.in.zichtbaar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .in{opacity:1;transform:none}
}
@media print{
  .kop,.voet,.held,.geen-print,.schets-bediening,.wegkeus{display:none!important}
  body{background:#fff}
  .sectie{padding:1rem 0}
  .schets{grid-template-columns:1fr 1fr}
}