/* Home E0 van SOMA Personeelsdiensten (Bram, 11-11-2026; ontwerp Daan, proeven/2026-11-11-pd-richtingen: basis.css en E_CSS in richting_e.py).
   Alleen geladen op de home, bovenop premium.css en label.css (Group-stijl en labelaccent C). Kleuren uit de Group-stijl en het labelaccent
   (--l, --l-tint, --diep, --navy, --papier, --zacht, --lijn). Wat de Group-stijl al regelt (lettertypes, kop, voet, kleurlijn) staat hier niet.
   Afwijkende klassen tegenover de proef: sam (was samen), lid (was klein), opnieuw (was terug), pkop (was pk), omdat de Group-stijl die al gebruikt.
   Prijsbalken in gelijke breedte (Lotte: de verhouding was verzonnen). */

/* ---------- gedeeld uit basis.css ---------- */
/* de Group-stijl zet de tekst op body wit (donkere site); secties op papier en wit zetten hun eigen inktkleur */
.wdw:not(.op-donker),.tg,.docrij{color:var(--inkt)}
.e0 .extra a{color:inherit}
body.e0 .streep::before{content:"";display:block;width:56px;height:5px;background:var(--l);margin-bottom:24px}
body.e0 .op-donker .streep::before,body.e0 .streep.wit::before{background:#fff}
.e0 .op-donker{color:#fff}
.e0 .knop{min-height:48px}
.e0 .knop.l{background:var(--l);color:#fff;padding:1.05em 1.6em}
.e0 .knop.l:hover{background:var(--diep)}
.e0 .op-donker .knop.l{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.e0 .op-donker .knop.l:hover{background:#fff;color:var(--diep)}
.e0 .lead{font-weight:300;font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.5;max-width:46ch;margin-top:26px}
.e0 .hknoppen{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.e0 .extra{margin-top:20px;font-weight:300;font-size:1rem;opacity:.9}
.e0 .extra a{font-weight:700;border-bottom:2px solid var(--l);padding-bottom:2px;display:inline-flex;align-items:center;min-height:44px}
.e0 .op-donker .extra a{border-bottom-color:rgba(255,255,255,.6)}
.e0 .op-donker :focus-visible{outline-color:#fff}
@media (max-width:900px){.e0 .hknoppen .knop{width:100%;justify-content:space-between}}

/* ---------- eerste scherm E (alleen met REGELS_GECONTROLEERD): kop en regelkaart ---------- */
.held{background:var(--diep);padding:180px 0 88px}
.held .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px 64px;align-items:center}
.held h1{font-size:clamp(2.6rem,4.4vw,4.4rem)}
.kantel{background:var(--papier);color:var(--inkt);padding:40px 44px 36px;position:relative;min-height:520px;display:flex;flex-direction:column}
.kantel .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.kantel .kantelkop{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--l)}
.kantel .teller{font-weight:700;font-size:.875rem;font-variant-numeric:tabular-nums;color:var(--zacht)}
.kantel .datum{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:28px}
.kantel .wat{font-size:1.375rem;font-weight:300;margin-top:10px;letter-spacing:-.01em}
.kantel .oud,.kantel .nieuw{margin-top:26px;display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px}
.kantel .lab{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);padding-top:5px}
.kantel .oud p{font-size:1.1875rem;font-weight:300;color:var(--zacht);display:inline;background-image:linear-gradient(var(--l),var(--l));background-repeat:no-repeat;background-position:0 58%;background-size:var(--s,0%) .1em;transition:background-size 1.1s var(--e) .5s}
.kantel.af .oud p{--s:100%}
.kantel .nieuw p{font-size:1.3125rem;font-weight:700;line-height:1.35;letter-spacing:-.01em;opacity:0;transform:translateY(8px);transition:opacity .7s var(--e) 1.4s,transform .7s var(--e) 1.4s}
.kantel.af .nieuw p{opacity:1;transform:none}
.kantel .kvoet{margin-top:auto;padding-top:26px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.875rem;font-weight:300;color:var(--zacht);border-top:1px solid var(--lijn)}
.kantel .bron b{font-weight:700;color:var(--l)}
.kantel .status{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--inkt)}
.kantel .status::before{content:"";width:12px;height:12px;background:var(--inkt)}
.kantel .status.verwacht::before{background:transparent;box-shadow:inset 0 0 0 2px var(--inkt)}
.kantel .status.onzeker::before{background:transparent;box-shadow:inset 0 0 0 2px var(--inkt);border-radius:50%}

/* ---------- het bord: uw lijst, doorhalen, bij ons ---------- */
.wdw{padding:112px 0 120px;background:var(--papier)}
.wdw.op-donker{background:var(--diep);padding:164px 0 72px}
.wdw .rij{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 72px;align-items:start}
.wdw .bordtekst h2{font-size:clamp(2rem,3.3vw,3.2rem)}
.wdw .bordtekst h2 del{display:block;white-space:nowrap;font-weight:300;color:var(--zacht);text-decoration-color:var(--l);text-decoration-thickness:.08em}
.wdw .bordtekst h1{font-size:clamp(2.4rem,3.9vw,3.75rem)}
@media (min-width:901px){.wdw.op-donker .rij{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px}.wdw.op-donker .bord2{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.wdw .bordtekst .lead{max-width:40ch}
.wdw:not(.op-donker) .tekst .lead{color:var(--zacht)}
.hint{margin-top:22px;font-size:1rem;font-weight:700;display:flex;align-items:center;gap:10px}
.hint::before{content:"";width:28px;height:3px;background:var(--l);flex:none}
.bord2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch;box-shadow:0 40px 80px -40px rgba(20,22,63,.45)}
.lijst{background:#fff;color:var(--inkt);padding:30px 32px 26px;position:relative}
.lijst::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--l)}
.lijst h3,.onskant h3{font-size:1.375rem;letter-spacing:-.025em;line-height:1.1}
.lijst h3 span,.onskant h3 span{display:block;font-weight:300;font-size:.75em;margin-top:3px;letter-spacing:-.005em}
.lijst h3 span{color:var(--zacht)}
.lijst ol{margin:18px 0 0;padding:0;list-style:none;border-top:2px solid var(--inkt)}
.lijst li{border-bottom:1px solid var(--lijn)}
.lijst button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:50px;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;padding:6px 4px}
/* focus ook in de donkere hero zichtbaar: labelrood op de witte lijst (Ruud 2; de Group-stijl zet focus op donker wit) */
.e0 .lijst button:focus-visible,.e0 .op-donker .lijst button:focus-visible{outline:2px solid var(--l);outline-offset:-2px;box-shadow:inset 0 0 0 4px #fff}
.lijst .nr{font-size:.8125rem;font-weight:700;color:var(--zacht);font-variant-numeric:tabular-nums}
.lijst .nmw{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;min-width:0}
.lijst .nm{position:relative;font-weight:700;font-size:1.125rem;letter-spacing:-.01em;transition:color .5s}
.lijst .nm::after{content:"";position:absolute;left:-.12em;right:-.12em;top:54%;height:3px;background:var(--l);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--e)}
.lijst li.sam.af .nm::after{background:repeating-linear-gradient(90deg,var(--l) 0 7px,transparent 7px 11px)}
.lijst li.af:not(.u) .nm{color:var(--zacht);font-weight:300}
.lijst li.af:not(.u) .nm::after{transform:scaleX(1)}
.lijst .tag{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;color:var(--zacht);white-space:nowrap}
.lijst li.af.ons .tag{background:var(--l);color:#fff}
.lijst li.af.sam .tag{box-shadow:inset 0 0 0 1.5px var(--l);color:var(--l)}
.lijst li.af.u .tag{background:var(--diep);color:#fff}
.lijst li.gekozen button{background:color-mix(in srgb,var(--l) 6%,#fff)}
.lijst .voetje{margin-top:14px;font-size:.875rem;font-weight:300;color:var(--zacht)}
.onskant{background:var(--l);color:#fff;padding:30px 32px 26px;display:flex;flex-direction:column}
.onskant h3 span{opacity:.88}
.ontvangen{margin-top:18px;border-top:2px solid rgba(255,255,255,.85);display:flex;flex-direction:column;gap:8px;padding-top:12px;min-height:60px}
.chip{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;background:#fff;color:var(--inkt);font-weight:700;font-size:1rem;box-shadow:0 10px 22px -14px rgba(0,0,0,.6)}
.chip::before{content:"";width:12px;height:7px;border-left:2.5px solid var(--l);border-bottom:2.5px solid var(--l);transform:rotate(-45deg) translateY(-2px);flex:none}
.chip.sam{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.chip.sam::before{border-color:#fff}
.chip.vlieg{transition:transform .85s var(--e),opacity .3s}
.leegtekst{font-weight:300;font-size:.9375rem;opacity:.85;padding:10px 0}
.samenkop{margin-top:20px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.samenkop[hidden],.ontvangen.samenrij:empty{display:none}
.ontvangen.samenrij{border-top:1px dashed rgba(255,255,255,.6);min-height:0;margin-top:8px}
.detail2{margin-top:24px;background:#fff;color:var(--inkt);display:grid;grid-template-columns:280px minmax(0,1fr) minmax(0,1fr);min-height:150px;border-top:1px solid var(--lijn)}
.wdw:not(.op-donker) .detail2{box-shadow:0 0 0 1px var(--lijn)}
.detail2 .naam{padding:26px 30px;border-right:1px solid var(--lijn)}
.detail2 .naam b{display:block;font-size:1.75rem;letter-spacing:-.03em;line-height:1.05;overflow-wrap:anywhere}
.detail2 .naam b.lang{font-size:1.375rem}  /* Loonheffingen, Arbeidsvoorwaarden: niet midden in het woord afbreken */
.detail2 .naam .p{display:inline-block;margin-top:10px;font-weight:700;font-size:.875rem;padding:5px 10px;background:var(--l);color:#fff}
.detail2 .naam .p.u{background:var(--diep)}.detail2 .naam .p.sam{background:#fff;color:var(--l);box-shadow:inset 0 0 0 1.5px var(--l)}
.detail2 .kant{padding:26px 30px;border-right:1px solid var(--lijn)}.detail2 .kant:last-child{border-right:0}
.detail2 .kant h4{font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);margin:0}
.detail2 .kant p{margin-top:10px;font-size:1.125rem;font-weight:300;line-height:1.45}
.detail2 .kant.actief h4{color:var(--l)}
.detail2 .intro{grid-column:1/-1;padding:28px 30px;font-size:1.125rem;font-weight:300;color:var(--zacht);align-self:center}
/* gestuurd door het scrollen (e0.js, 12-11-2026): Werkvloer licht op, chips verdwijnen bij terugscrollen, sticky op de computer */
.lijst li.u button{transition:background .5s}
.lijst li.af.u button{background:color-mix(in srgb,var(--diep) 8%,#fff);animation:oplicht 1.2s var(--e)}
@keyframes oplicht{0%{background:#fff}35%{background:color-mix(in srgb,var(--diep) 22%,#fff)}100%{background:color-mix(in srgb,var(--diep) 8%,#fff)}}
.lijst li.af.u .nm{color:var(--diep)}
.chip.weg{opacity:0;transform:translateX(-14px);transition:opacity .3s,transform .3s}
.bord2.zonder *,.bord2.zonder *::after,.detail2.zonder,.detail2.zonder *,.e0laag .bordtekst:has(~ .detail2.zonder){transition:none!important}
.voetje .vt-scrol{display:none}
.scrolbord .voetje .vt-scrol{display:inline}.scrolbord .voetje .vt-klaar{display:none}
/* alle taken doorgehaald: de scrolzin wijkt voor de klikzin (Ruud ronde 2, punt 4) */
.scrolbord.e0klaar .voetje .vt-scrol{display:none}.scrolbord.e0klaar .voetje .vt-klaar{display:inline}
/* lage laptopschermen (e0.js zet e0laag als de uitleg niet onder het bord past, Ruud ronde 2, punt 1): de uitleg staat op de plek van de kop,
   onder elkaar en iets kleiner; bij taak 0 staat de kop er, vanaf de eerste taak de uitleg */
.wdw.e0laag .rij{grid-template-areas:"tekst bord"}
.wdw.e0laag .bordtekst,.wdw.e0laag .detail2{grid-area:tekst;align-self:start}
.wdw.e0laag .bord2{grid-area:bord}
.wdw.e0laag .bordtekst{transition:opacity .35s var(--e),visibility 0s}
.wdw.e0laag .detail2{margin-top:0;grid-template-columns:minmax(0,1fr);opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility 0s .35s}
.wdw.e0laag.e0uitleg .bordtekst{opacity:0;visibility:hidden;transition:opacity .35s var(--e),visibility 0s .35s}
.wdw.e0laag.e0uitleg .detail2{opacity:1;visibility:visible;transition:opacity .35s var(--e) .1s,visibility 0s}
.wdw.e0laag .detail2 .naam{border-right:0;border-bottom:1px solid var(--lijn);padding:20px 26px}
.wdw.e0laag .detail2 .naam b,.wdw.e0laag .detail2 .naam b.lang{font-size:1.5rem}
.wdw.e0laag .detail2 .kant{border-right:0;padding:16px 26px}
.wdw.e0laag .detail2 .kant + .kant{border-top:1px solid var(--lijn)}
.wdw.e0laag .detail2 .kant p{margin-top:6px;font-size:1.0625rem}
html:not(.e0js) .voetje{display:none}
.detail2.alle > div{border-bottom:1px solid var(--lijn)}
.detail2.alle > div:nth-last-child(-n+3){border-bottom:0}
html:not(.e0js) .checkE :is(.stappen,fieldset.vraag,.plan > .vt,.samenvatting,.moment,.opnieuw){display:none}
html:not(.e0js) .checkE .plan[hidden]{display:block}
.scrolbord .wrap{position:sticky;z-index:1}
.scrolruimte{display:block}
/* het bord staat in de eindstand in de HTML; tot e0.js het naar het begin zet even onzichtbaar (laadt het script niet: na 3 s toch zichtbaar) */
html.e0start #wie .bord2,html.e0start #wie .detail2{visibility:hidden;animation:e0toon 0s 3s forwards}
@keyframes e0toon{to{visibility:visible}}

/* ---------- beeldband: vakman met zijn loonstrook, plus de regel voor wie via SOMA werkt ---------- */
.bandE{position:relative;background:var(--diep);color:#fff}
.bandE .foto{position:relative;height:min(52vw,680px);overflow:hidden;background:var(--diep)}
.bandE .foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.bandE .foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,63,.86) 0,rgba(20,22,63,.55) 32%,rgba(20,22,63,0) 58%),rgba(44,47,123,.14)}
.bandE .foto .wrap{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.bandE h2{font-size:clamp(2.4rem,4.6vw,4.6rem);max-width:12ch}
.bandE .ai{position:absolute;z-index:4;right:16px;bottom:16px;font-size:.6875rem;font-weight:700;letter-spacing:.1em;padding:5px 8px;background:rgba(16,17,23,.72);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.docrij{background:#fff;color:var(--inkt);position:relative}
.docrij .wrap{display:grid;grid-template-columns:252px minmax(0,1fr) auto;align-items:center;gap:20px 48px;padding-top:30px;padding-bottom:30px;position:relative}
.docrij .wrap::before{content:"";position:absolute;left:var(--rand);top:0;bottom:0;width:6px;background:var(--l)}
.docrij .marg{padding-left:30px;font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--l)}
.docrij p{font-size:1.25rem;font-weight:300;line-height:1.4}.docrij p b{font-weight:700}
.docrij a{font-weight:700;border-bottom:2px solid var(--l);min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;justify-self:start}

/* ---------- sinds 2020, één streepje per week ---------- */
.groot{background:var(--navy);padding:120px 0 128px}
.g-boven{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end}
.g-kop{font-size:clamp(3.2rem,8.4vw,8.4rem);letter-spacing:-.045em;line-height:.95}
.g-tekst p{font-weight:300;font-size:1.25rem;line-height:1.5;max-width:40ch}
.g-keur{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0;padding:0;list-style:none}
.g-keur li{font-weight:700;font-size:.9375rem;padding:.6em 1em;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.jaren{margin-top:72px;display:grid;gap:10px}
.jaar{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:16px}
.jaar span{font-weight:700;font-size:.9375rem;font-variant-numeric:tabular-nums;opacity:.8}
.weken{display:flex;gap:3px;height:22px}
.weken i{flex:1;background:rgba(255,255,255,.14);transition:background .25s}
.weken i.aan{background:#fff}
.jaar[data-j="2020"] .weken i.aan{opacity:var(--r,1)}
.weken i.straks{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.jaren-noot{margin-top:18px;font-size:.9375rem;font-weight:300;opacity:.8}
/* zonder script: alles tot en met het bouwjaar aan, zodat de band niet leeg is */
html:not(.e0js) .weken i{background:#fff}

/* ---------- team en gesprek in één blok ---------- */
.tg{padding:120px 0 128px;background:var(--papier);scroll-margin-top:92px}
.tg .kopr{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 64px;align-items:end}
.tg h2{font-size:clamp(2.2rem,4.2vw,4.21rem)}
.tg .kopr p{font-weight:300;font-size:1.1875rem;line-height:1.55;color:var(--zacht);max-width:42ch}
.tg-raster{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px;margin-top:56px;align-items:stretch}
/* team: ronde portretten met dubbele ring in de labelkleur, zoals de Group-site (besluit Dave 12-11-2026); aanspreekpunt subtiel, net iets groter */
.team-e{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.team-e figure{margin:0}
.team-e img{display:block;object-fit:cover;object-position:50% 22%;background:#E4E2DC;border-radius:50%;aspect-ratio:1}
.team-e .hoofd{display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:center;background:var(--diep);color:#fff;padding:26px 28px}
.team-e .hoofd img{width:96px;height:96px;box-shadow:0 0 0 4px var(--diep),0 0 0 6px var(--l)}
.team-e .hoofd figcaption{padding:0;min-width:0}
.team-e .hoofd .rol{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;background:var(--l);margin-bottom:10px}
.team-e .hoofd b{display:block;font-size:1.3125rem;letter-spacing:-.02em}
.team-e .hoofd span.f{display:block;font-weight:300;opacity:.88}
.team-e .hoofd .tel{margin-top:8px;font-size:.9375rem;font-weight:300}
.team-e .hoofd .tel a{font-weight:700;border-bottom:1.5px solid rgba(255,255,255,.55);display:inline-flex;align-items:center;min-height:44px}
.team-e .lid{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;background:#fff;box-shadow:0 0 0 1px var(--lijn);padding:14px 18px}
.team-e .lid img{width:72px;height:72px;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--l)}
.team-e .lid figcaption{padding:0;min-width:0}
.team-e .lid b{display:block;font-size:1.0625rem;letter-spacing:-.01em}.team-e .lid span{display:block;font-weight:300;color:var(--zacht)}
/* payrollcheck */
.checkE{background:#fff;padding:36px 40px;border-top:5px solid var(--l);display:flex;flex-direction:column;scroll-margin-top:110px}
.checkE h3{font-size:1.75rem;letter-spacing:-.03em;line-height:1.1}
.checkE h3 span{display:block;font-weight:300;color:var(--zacht);font-size:.72em;margin-top:4px;letter-spacing:-.01em}
.checkE .stappen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:24px 0 0;padding:0;list-style:none}
.checkE .stappen li{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);padding-top:10px;border-top:4px solid var(--lijn);transition:border-color .4s,color .4s}
.checkE .stappen li.af{border-top-color:var(--l);color:var(--inkt)}
.checkE .stappen li.hier{border-top-color:var(--inkt);color:var(--inkt)}
.checkE .stappen li:last-child{color:var(--l)}
.checkE fieldset{border:0;margin:26px 0 0;padding:0;min-width:0}
.checkE fieldset[hidden],.checkE .plan[hidden],.checkE .opnieuw[hidden]{display:none}
.checkE legend,.checkE .vt{font-weight:700;font-size:1.1875rem;letter-spacing:-.01em;padding:0}
.checkE .opties{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.checkE .opties button{min-height:46px;padding:.65em 1.1em;border:1.5px solid var(--lijn);background:var(--papier);cursor:pointer;font:inherit;font-size:1rem;color:var(--inkt);text-align:left}
.checkE .opties button:hover{border-color:var(--inkt)}
.checkE .opties button[aria-pressed=true]{background:var(--l);border-color:var(--l);color:#fff;font-weight:700}
.checkE .plan{margin-top:26px}
.checkE .samenvatting{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.checkE .samenvatting span{font-size:.875rem;padding:4px 9px;background:var(--l-tint);border:1px solid color-mix(in srgb,var(--l) 25%,transparent)}
.checkE .pcheck{margin-top:22px;border-top:1px solid var(--lijn);padding-top:18px}
.checkE .velden{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 14px}
.checkE .velden .vol{grid-column:1/-1}
.checkE .velden label{display:block;font-size:.875rem;font-weight:700;margin-bottom:6px}
.checkE .velden input{width:100%;box-sizing:border-box;min-height:50px;border:1.5px solid rgba(16,17,23,.2);padding:0 14px;font:inherit;background:var(--papier);color:var(--inkt)}
.checkE .velden input:focus-visible{outline:2px solid var(--l);outline-offset:2px;border-color:var(--l)}
.checkE .klein2{margin-top:14px;font-size:.875rem;font-weight:300;color:var(--zacht)}
.checkE .vink{display:flex;gap:12px;align-items:center;font-size:.9375rem;font-weight:300;line-height:1.5;margin:6px 0 0;cursor:pointer;min-height:44px}
.checkE .vink input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--l)}
.checkE .vink a{border-bottom:1px solid currentColor}
.checkE .vink input:focus-visible{outline:2px solid var(--l);outline-offset:3px}
.checkE .pcheck .rij{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.checkE .pcheck small{display:block;margin-top:12px;font-size:.9375rem;font-weight:300;color:var(--zacht);min-height:1.4em}
.checkE .pcheck small.goed{color:var(--inkt);font-weight:700}
/* na versturen: alleen de bedankmelding en Opnieuw beginnen (Ruud ronde 2, punt 6) */
.checkE .plan.verstuurd :is(.vt,.samenvatting,.moment,.velden,.klein2,.vink,.pcheck .rij){display:none}
.checkE .plan.verstuurd .pcheck{border-top:0;padding-top:0;margin-top:0}
.checkE .opnieuw{margin-top:14px;background:none;border:0;padding:0;font:inherit;font-weight:700;font-size:.9375rem;border-bottom:1.5px solid currentColor;cursor:pointer;min-height:44px;color:var(--inkt)}
.prijsE{margin-top:auto;padding-top:30px}
.prijsE .pkop{border-top:1px solid var(--lijn);padding-top:22px;font-weight:700;font-size:1.0625rem}
.prijsE .pkop span{display:block;font-weight:300;color:var(--zacht);font-size:.9375rem;margin-top:2px}
.prijsE ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:14px 0 0;padding:0;list-style:none}
.prijsE li{padding-top:10px;border-top:10px solid var(--diep);font-size:.8125rem;font-weight:700;line-height:1.3}
.prijsE li:nth-child(1){border-top-color:color-mix(in srgb,var(--diep) 55%,#fff)}
.prijsE li:nth-child(2){border-top-color:color-mix(in srgb,var(--diep) 72%,#fff)}
.prijsE li:nth-child(3){border-top-color:color-mix(in srgb,var(--diep) 86%,#fff)}
.prijsE li:nth-child(4){border-top-color:var(--l)}

/* ---------- kleine laptop en tablet liggend (901 tot 1279): kop boven het bord, bord over de hele breedte (Ruud 1) ----------
   Naast elkaar was het bord te smal: labels over de taaknamen, chip Arbeidsvoorwaarden afgeknipt. Ook team en payrollcheck
   onder elkaar tot 1320 (Ruud 3: namen buiten de kaart, stapnamen aan elkaar, prijslagen over elkaar). */
@media (min-width:901px) and (max-width:1279px){
 .wdw.op-donker .rij{grid-template-columns:minmax(0,1fr);gap:40px}
 .wdw.op-donker .bordtekst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;align-items:end}
 .wdw.op-donker .bordtekst h1{grid-row:1/4}
 .wdw.op-donker .bordtekst .lead{margin-top:0}
}
@media (min-width:901px) and (max-width:1320px){
 .tg-raster{grid-template-columns:minmax(0,1fr)}
}
/* team over de volle breedte: aanspreekpunt bovenaan, de rest naast elkaar */
@media (min-width:1024px) and (max-width:1320px){
 .team-e{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
 .team-e .hoofd{grid-column:1/-1}
}
.checkE .stappen li{overflow-wrap:normal}

/* ---------- telefoon en tablet ---------- */
@media (max-width:900px){
 .held{padding:128px 0 56px}.held .wrap{grid-template-columns:1fr}
 .held h1{font-size:clamp(2.2rem,10.4vw,3.16rem)}
 .kantel{padding:26px 22px;min-height:0}
 .kantel .oud,.kantel .nieuw{grid-template-columns:1fr;gap:4px}
 .wdw{padding:64px 0 72px}.wdw.op-donker{padding:128px 0 48px}
 .wdw .rij{grid-template-columns:minmax(0,1fr);gap:28px}
 .wdw .bordtekst h1{font-size:clamp(2.2rem,10.4vw,3.16rem)}
 .wdw .bordtekst h2 del{white-space:normal}
 .bord2{grid-template-columns:minmax(0,1fr)}
 .lijst,.onskant{padding:22px 18px 20px 22px}
 .lijst button{grid-template-columns:22px minmax(0,1fr);min-height:48px}
 .lijst .nm{font-size:1.0625rem}
 .lijst .tag{font-size:.6875rem;padding:3px 6px}
 .detail2{grid-template-columns:minmax(0,1fr)}
 .detail2 .naam,.detail2 .kant{border-right:0;border-bottom:1px solid var(--lijn);padding:20px}
 .bandE .foto{height:auto;padding-top:300px}.bandE .foto img{height:300px;bottom:auto;object-position:68% 40%}
 .bandE .foto::after{bottom:auto;height:300px;background:linear-gradient(0deg,rgba(20,22,63,.55) 0,rgba(20,22,63,0) 35%),rgba(44,47,123,.12)}
 .bandE .foto .wrap{position:relative;inset:auto;padding-top:28px;padding-bottom:34px}
 .bandE .ai{top:266px;bottom:auto}
 .bandE h2{font-size:clamp(2rem,9vw,2.6rem)}
 .docrij .wrap{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:24px;padding-bottom:26px}
 .docrij .marg,.docrij p,.docrij a{margin-left:18px}.docrij .marg{padding-left:0}.docrij p{font-size:1.0625rem}
 .groot{padding:72px 0 80px}.g-boven{grid-template-columns:1fr}.g-kop{font-size:clamp(3rem,15vw,4.2rem)}
 .jaren{margin-top:44px;gap:8px}.jaar{grid-template-columns:44px minmax(0,1fr);gap:10px}.weken{gap:1.5px;height:18px}
 .tg{padding:72px 0 80px}.tg .kopr{grid-template-columns:minmax(0,1fr)}
 .tg-raster{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:36px}
 .team-e{grid-template-columns:minmax(0,1fr);gap:10px}
 .team-e .hoofd{grid-template-columns:80px minmax(0,1fr);gap:18px;padding:20px 18px}
 .team-e .hoofd img{width:80px;height:80px}
 .team-e .hoofd b{font-size:1.1875rem}
 .team-e .lid{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:12px 16px}
 .team-e .lid img{width:64px;height:64px}
 .team-e .lid b{font-size:1rem}.team-e .lid span{font-size:.9375rem}
 .checkE{padding:26px 20px}
 .checkE .stappen{display:flex;gap:4px}
 .checkE .stappen li{flex:1 1 0;min-width:0;font-size:.6875rem;letter-spacing:.02em;white-space:nowrap}
 .checkE .stappen li.hier,.checkE .stappen li:last-child{flex:0 0 auto}
 .checkE .stappen li:not(.hier):not(:last-child){font-size:0}
 .checkE .velden{grid-template-columns:minmax(0,1fr)}
 .checkE .pcheck .knop{width:100%;justify-content:space-between}
 .prijsE ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:360px){
 .wdw .bordtekst h1,.held h1{font-size:2.05rem}
 .team-e .hoofd{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* minder beweging of ?stil: eindstand meteen */
html.stil .e0 *,html.stil .e0 *::before,html.stil .e0 *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.e0 *,.e0 *::before,.e0 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}