/* Homepage — opbouw na de feedbackronde (oktober 2026) */

/* ---------- hero: het beeld staat stil ---------- */
.hero-stil .paper,.hero-stil .paper>img{transform:none!important;transition:none!important}

/* ---------- wat we vaak horen: zes kaartjes, kolommen moeten/willen/kunnen, rijen hoofd en hart ---------- */
.hoormatrix{display:grid;gap:12px}
.m-hoek,.m-kop{display:none}
.m-rij{display:flex;align-items:center;gap:12px;margin:14px 0 0;color:var(--navy)}
.m-rij img{width:44px;height:44px;flex:none;filter:drop-shadow(0 4px 6px rgba(13,42,79,.15));transition:transform .45s var(--ease-out)}
.m-rij span{display:grid;font:600 1.1rem/1.2 var(--zi-display)}
.m-rij small{font:400 .92rem/1.3 var(--body);color:var(--mute)}
@media (hover:hover){.m-rij:hover img{transform:rotate(-6deg) scale(1.06)}}
.m-cel{position:relative;margin:0;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:22px 22px 22px 26px;border-radius:16px;border:1px solid var(--line);background:#fff;transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .2s ease}
.m-cel::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--petrol)}
.m-cel.mens{background:#FFF8F3;border-color:#F3DCCB}
.m-cel.mens::before{background:var(--orange)}
@media (hover:hover){.m-cel:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 14px 28px -18px rgba(13,42,79,.35)}}
.m-label{font:600 .74rem/1.2 var(--zi-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.m-cel blockquote{margin:0;font:500 1.12rem/1.45 var(--zi-display);color:var(--navy);letter-spacing:-.005em;text-wrap:pretty}
.m-cel blockquote::before{content:"“"}
.m-cel blockquote::after{content:"”"}
.mist{margin:0;padding-top:12px;border-top:1px dashed var(--line-strong);display:flex;flex-direction:column;gap:3px;font:600 .98rem/1.3 var(--zi-display)}
.mist span{font:600 .72rem/1.2 var(--zi-display);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.m-cel.taak .mist{color:var(--petrol-ink)}
.m-cel.mens .mist{color:var(--orange-ink)}
@media(min-width:900px){
  .hoormatrix{grid-template-columns:130px repeat(3,minmax(0,1fr));gap:16px}
  .m-hoek,.m-kop{display:block}
  .m-kop{margin:0;padding:0 4px 2px;font-size:var(--step-2);color:var(--navy)}
  .m-rij{flex-direction:column;align-items:flex-start;justify-content:center;margin:0;gap:8px}
  .m-label{display:none}
  .m-cel{grid-template-rows:1fr auto}
}
/* afsluitende regel: rustig, in de stijl van de rest */
.signal-cta{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between;margin-top:clamp(32px,4vw,48px);padding:clamp(22px,3vw,28px) 0 0;border-top:1px solid var(--line);border-radius:0;background:none}
.signal-cta h3{font-size:var(--step-1);color:var(--navy)}
.signal-cta p{margin-top:6px;color:var(--mute)}

/* ---------- LEF-route: stappen links, klein blijvend beeld rechts ---------- */
.route{display:grid;gap:clamp(24px,4vw,48px)}
@media (min-width:900px){.route{grid-template-columns:minmax(0,1fr) 260px;align-items:start}}
.route-stappen{list-style:none;margin:0;padding:0;display:grid}
.route-stap{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--line)}
@media (min-width:900px){.route-stap{min-height:38vh;align-content:center}}
.route-stap .nr{grid-row:span 3;font:600 clamp(2rem,1.4rem + 1.8vw,3rem)/1 var(--zi-display);color:var(--line-strong);transition:color .4s ease-out;font-variant-numeric:tabular-nums}
.route-stap h3{font-size:var(--step-3);color:var(--mute);transition:color .4s ease-out}
.route-stap p{color:var(--mute);max-width:46ch}
.route-stap .voortgang{grid-column:2;height:2px;margin-top:10px;background:var(--line);overflow:hidden}
.route-stap .voortgang i{display:block;height:100%;width:100%;background:var(--orange);transform-origin:left;transform:scaleX(var(--p,0))}
.route-stap.actief .nr{color:var(--orange)}
.route-stap.actief h3,.route-stap.klaar h3{color:var(--navy)}
.route-stap.klaar .nr{color:var(--navy)}
.no-route-js .route-stap h3,.no-route-js .route-stap .nr{color:var(--navy)}
.route-beeld{display:none}
@media (min-width:900px){
  .route-beeld{display:grid;justify-items:center;gap:12px;position:sticky;top:calc(var(--header-h) + 18vh)}
  .route-beeld .vak{position:relative;width:200px;height:170px}
  .route-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(10px);transition:opacity .45s ease-out,transform .6s var(--ease-out);filter:drop-shadow(0 10px 12px rgba(13,42,79,.18))}
  .route-beeld img.on{opacity:1;transform:none}
  .route-beeld .bijschrift{font:600 .78rem/1 var(--zi-display);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
}
.route-stap .mobiel-beeld{grid-column:1/-1;width:96px;height:auto;margin:0 0 6px;filter:drop-shadow(0 8px 10px rgba(13,42,79,.18))}
@media (min-width:900px){.route-stap .mobiel-beeld{display:none}}

/* ---------- de scan als ingang ---------- */
.ingang{display:grid;gap:clamp(24px,4vw,48px);align-items:center}
@media (min-width:900px){.ingang{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.ingang-kaart{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-l);padding:clamp(22px,3.5vw,38px);box-shadow:var(--shadow-paper);display:grid;gap:18px}
.ingang-meta{display:flex;justify-content:space-between;gap:12px;font:600 var(--step--1)/1.2 var(--zi-display);color:var(--mute)}
.ingang-meta .thema{color:var(--petrol-ink)}
.ingang-stelling{font:500 var(--step-2)/1.3 var(--zi-display);color:var(--navy);letter-spacing:-.015em}
.ingang-keuzes{display:grid;gap:10px}
@media (min-width:560px){.ingang-keuzes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ingang-keuzes a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:12px 16px;border:2px solid var(--line);border-radius:var(--radius-s);color:var(--navy);text-decoration:none;font:500 var(--step-0)/1.2 var(--body);transition:border-color .2s,background-color .2s,transform .15s}
.ingang-keuzes a:hover{border-color:var(--orange);background:var(--orange-soft);color:var(--navy)}
.ingang-keuzes a:active{transform:scale(.98)}
.ingang-keuzes a .ar{color:var(--orange-ink);transition:transform .3s var(--ease-out)}
.ingang-keuzes a:hover .ar{transform:translateX(4px)}

/* ---------- LEF-thema's: acht kaarten in de stijl van de rest ---------- */
.register{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.register li{display:flex}
.register a{position:relative;display:grid;align-content:start;gap:10px;width:100%;padding:22px 22px 24px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .2s ease}
.register img{display:block;width:64px;height:64px;padding:10px;margin-bottom:4px;border-radius:50%;background:var(--cream);box-shadow:inset 0 0 0 1px var(--line);transition:transform .45s var(--ease-out)}
.register .tekst{display:grid;gap:6px;min-width:0}
.register .naam{font:600 1.15rem/1.25 var(--zi-display);color:var(--navy)}
.register .van{font-size:.95rem;line-height:1.5;color:var(--mute)}
.register .ar{position:absolute;right:20px;top:24px;color:var(--orange-ink);font-weight:600;transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .register a:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 16px 30px -20px rgba(13,42,79,.35)}
  .register a:hover .naam{color:var(--orange-ink)}
  .register a:hover .ar{transform:translateX(4px)}
  .register a:hover img{transform:rotate(-6deg) scale(1.06)}
}


/* ---------- Over ons: drie kaarten die om elkaar heen draaien (naar Circular Testimonials) ---------- */
.team{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(28px,5vw,72px);align-items:center}
@media (min-width:860px){.team{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.team-kaarten{display:grid;gap:18px}
.team-tekst{display:grid;gap:28px}
.team-persoon{display:grid;gap:6px;align-content:start}
.team-persoon h3{font-size:var(--step-3)}
.team-persoon .role{font:600 var(--step-0)/1.3 var(--zi-display);color:var(--orange-ink);margin-bottom:14px}
.team-persoon .citaat{font:500 var(--step-2)/1.45 var(--zi-display);color:var(--navy);letter-spacing:-.01em;max-width:30ch;margin-bottom:18px}
.team .portrait{position:relative;aspect-ratio:4/5;font-size:clamp(3.4rem,2rem + 4vw,5.6rem);color:rgba(19,58,107,.16);box-shadow:var(--shadow-paper)}
.team .ini{letter-spacing:-.04em}
.team-knipsel{position:absolute;right:8%;bottom:7%;width:38%!important;height:auto!important;object-fit:contain!important;filter:drop-shadow(0 10px 12px rgba(13,42,79,.2))}

/* met JavaScript: de stapel en één persoon tegelijk */
.team.js .team-kaarten{display:block;position:relative;height:clamp(340px,34vw,440px);perspective:1000px}
.team.js .team-kaart{position:absolute;inset:0;margin:auto;width:min(100%,calc(clamp(340px,34vw,440px) * .8));
  transition:transform .8s cubic-bezier(.4,1.6,.3,1),opacity .5s ease-out;will-change:transform}
.team.js .team-kaart .portrait{height:100%;aspect-ratio:auto}
.team.js .team-kaart[data-pos="midden"]{z-index:3;transform:none}
.team.js .team-kaart[data-pos="links"]{z-index:2;transform:translateX(calc(var(--gap) * -1)) translateY(calc(var(--gap) * -.8)) scale(.85) rotateY(15deg)}
.team.js .team-kaart[data-pos="rechts"]{z-index:2;transform:translateX(var(--gap)) translateY(calc(var(--gap) * -.8)) scale(.85) rotateY(-15deg)}
.team.js .team-kaart[data-pos="links"] .portrait,.team.js .team-kaart[data-pos="rechts"] .portrait{filter:saturate(.85) brightness(.97)}
.team.js .team-kaarten{--gap:clamp(44px,7vw,86px);margin-top:calc(var(--gap) * .8)}
.team.js .team-tekst{min-height:260px;align-content:space-between}
.team.js .team-persoon:not(.on){display:none}
.team.js .team-persoon.on h3,.team.js .team-persoon.on .role{animation:team-in .3s ease-out both}
.team.js .team-persoon.on .role{animation-delay:.05s}
.team .woord{display:inline-block;animation:team-woord .22s ease-in-out both;animation-delay:calc(var(--w) * 25ms + 120ms)}
@keyframes team-in{from{opacity:0;transform:translateY(16px)}}
@keyframes team-woord{from{opacity:0;filter:blur(10px);transform:translateY(5px)}}
.team-pijlen{display:flex;align-items:center;gap:14px}
.team-pijl{width:52px;height:52px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--navy);color:#fff;font:600 1.3rem/1 var(--zi-display);transition:background-color .25s ease,transform .16s ease-out}
.team-pijl:hover{background:var(--orange-btn)}
.team-pijl:active{transform:scale(.94)}
.team-tel{margin:0 0 0 6px;font:600 var(--step--1)/1 var(--zi-display);color:var(--mute)}
@media (prefers-reduced-motion:reduce){
  .team.js .team-kaart{transition:opacity .2s ease}
  .team .woord,.team.js .team-persoon.on h3,.team.js .team-persoon.on .role{animation:none}
}
.team-pijlen[hidden]{display:none}
.team.js .team-kaart:not([data-pos="midden"]){cursor:pointer}
.team-kaart[data-i="0"] .portrait{background:linear-gradient(160deg,#F6EBD8,#EADBC0)}
.team-kaart[data-i="1"] .portrait{background:linear-gradient(160deg,#E2EEF0,#C9DFE3)}
.team-kaart[data-i="2"] .portrait{background:linear-gradient(160deg,#FCEFD2,#F6DDA6)}

/* ---------- hero: tekst links, één grote zwevende papieren vogel rechts ---------- */
.hero-vogel{position:relative;overflow:hidden;isolation:isolate;touch-action:pan-y;
  background:
    radial-gradient(60% 55% at 72% 50%, #fffdf8 0%, rgba(255,253,248,0) 70%),
    radial-gradient(80% 60% at 50% 115%, var(--sand) 0%, rgba(241,230,210,0) 70%),
    var(--cream)}
.hero-vogel::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-vogel-binnen{position:relative;z-index:2;display:grid;gap:24px;align-items:center;min-height:calc(100svh - var(--header-h, 76px));padding-block:clamp(40px,6vw,88px);pointer-events:none}
@media (min-width:900px){.hero-vogel-binnen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px)}}
.hero-vogel-tekst{max-width:620px}
.hero-vogel-tekst a{pointer-events:auto}
/* de oorspronkelijke scène, los geknipt: gebouw, brug, stenen en zon */
.scene{position:relative;width:100%;aspect-ratio:1396/1127;margin-top:8px}
.stuk{position:absolute;height:auto;filter:drop-shadow(0 8px 12px rgba(13,42,79,.08))}
.stuk.landschap{left:3.22%;top:44.54%;width:94.27%}
/* alleen de zon beweegt: hij komt op, draait heel langzaam en schuift iets mee met de muis */
.stuk.zon{left:65.54%;top:29.02%;width:21.78%;translate:calc(var(--mx,0) * 14px) calc(var(--my,0) * 14px);transition:translate .6s var(--ease-out);
  animation:zon-op .9s var(--ease-out) .3s both,zon-draai 120s linear 1.2s infinite}
@keyframes zon-op{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes zon-draai{to{rotate:360deg}}
.hero-vogel .eyebrow{margin-bottom:20px}
.hero-vogel h1{margin:0;font:700 clamp(2.6rem,1.2rem + 4.4vw,5.4rem)/.98 var(--zi-display);letter-spacing:-.04em;color:var(--navy);text-wrap:balance;hyphens:manual}
.hero-vogel h1 .regel{display:block}
.hero-vogel h1 .verloop{color:var(--orange-btn)}
.hero-vogel .lead{margin:clamp(20px,2.6vw,30px) 0 0;max-width:38ch;font-size:clamp(1.1rem,.98rem + .45vw,1.3rem);line-height:1.55;color:var(--mute)}
.hero-vogel .acties{margin-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;gap:14px}
.pil{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 clamp(24px,2.4vw,34px);border-radius:999px;
  font:600 clamp(1.02rem,.95rem + .3vw,1.15rem)/1 var(--zi-display);text-decoration:none;transition:transform .16s ease-out,background-color .2s ease,box-shadow .2s ease}
.pil:active{transform:scale(.97)}
.pil.vol{background:var(--orange-btn);color:#fff;box-shadow:0 18px 34px -16px rgba(204,71,6,.7)}
.pil.vol:hover{background:#B53F05;color:#fff}
.pil.rand{color:var(--navy);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 2px rgba(19,58,107,.22)}
.pil.rand:hover{color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.pil .ar{transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pil:hover .ar{transform:translateX(4px)}}
.hero-vogel-img{position:absolute;left:0;top:0;z-index:1;user-select:none;-webkit-user-drag:none;cursor:grab;will-change:transform;opacity:0;
  filter:drop-shadow(0 28px 26px rgba(13,42,79,.22)) drop-shadow(0 4px 6px rgba(13,42,79,.18));transition:opacity .7s ease-out,filter .25s ease}
.hero-vogel-img.in{opacity:1}
.hero-vogel-img.vast{cursor:grabbing;filter:drop-shadow(0 40px 34px rgba(13,42,79,.26)) drop-shadow(0 5px 8px rgba(13,42,79,.2))}
@media (prefers-reduced-motion:reduce){.hero-vogel-img{transition:none;cursor:default}.stuk{animation:none!important;translate:none!important;transition:none}}

/* ---------- Over ons: drie personen naast elkaar ---------- */
.personen{display:grid;gap:18px;margin-top:clamp(36px,5vw,56px)}
@media(min-width:760px){.personen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.persoon{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:var(--radius-l);border:1px solid var(--line);background:#fff;transition:transform .3s var(--ease-out),box-shadow .3s ease,border-color .2s ease}
@media (hover:hover){.persoon:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 34px -24px rgba(13,42,79,.35)}}
.persoon-foto{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:linear-gradient(160deg,#F6EBD8,#EADBC0)}
.p-said .persoon-foto{background:linear-gradient(160deg,#E2EEF0,#C9DFE3)}
.p-arnon .persoon-foto{background:linear-gradient(160deg,#FCEFD2,#F6DDA6)}
.persoon-foto .ini{font:700 clamp(2.6rem,2rem + 2vw,3.6rem)/1 var(--zi-display);letter-spacing:-.03em;color:rgba(19,58,107,.22)}
.persoon-foto .volgt{position:absolute;left:14px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.75);font:600 .72rem/1.2 var(--zi-display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.persoon-tekst{display:grid;gap:8px;align-content:start;padding:22px 24px 26px}
.persoon h3{font-size:var(--step-1);color:var(--navy)}
.persoon .rol{font:600 .95rem/1.3 var(--zi-display);color:var(--orange-ink)}
.persoon .zin{margin:6px 0 8px;color:var(--ink);line-height:1.55}
.persoon .link{justify-self:start}
.over-tekst{display:grid;gap:16px;max-width:60ch}
.over-tekst p{margin:0;font-size:clamp(1.05rem,.98rem + .3vw,1.2rem);line-height:1.65;color:#3E4A5E}

/* ---------- 1.3.2: feedback homepage ---------- */
/* Banner: eigen achtergrond over de volle breedte */

/* Wat we vaak horen: compactere quote-blokken */
.hoormatrix{gap:10px}
.m-cel{gap:10px;padding:16px 16px 16px 20px;border-radius:14px}
.m-cel::before{top:14px;bottom:14px}
.m-cel blockquote{font-size:.98rem;line-height:1.45}
.mist{padding-top:9px;font-size:.88rem}
.mist span{font-size:.66rem}
.m-rij img{width:38px;height:38px}
@media(min-width:900px){
  .hoormatrix{grid-template-columns:104px repeat(3,minmax(0,1fr));gap:12px}
  .m-kop{font-size:var(--step-1)}
}

/* De aanpak: LEF uitgeschreven en vier compacte stappen naast elkaar */
.route-intro{gap:12px}
.route-intro p{margin:0}
.lef-letters{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lef-letters li{color:var(--ink)}
.lef-letters b{display:inline-block;margin-right:1px;padding:1px 6px;border-radius:6px;background:var(--yellow);color:var(--navy);font:700 1.05em/1.3 var(--zi-display)}
.route-raster{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.route-kaart{position:relative;display:grid;align-content:start;gap:8px;padding:18px 20px 24px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:transform .35s var(--ease-out),box-shadow .35s ease,background-color .3s ease,border-color .3s ease}
.route-beeldvak{display:grid;place-items:center;height:130px;margin-bottom:4px}
.route-beeldvak img{width:auto;max-width:78%;max-height:112px;filter:drop-shadow(0 10px 12px rgba(13,42,79,.18));transition:transform .55s var(--ease-out)}
.route-kaart .nr{position:absolute;top:16px;left:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--navy);font:700 1rem/1 var(--zi-display)}
.route-kaart h3{font-size:var(--step-2);color:var(--navy)}
.route-kaart p{margin:0;color:var(--mute);font-size:.98rem;line-height:1.5}
@media (hover:hover){
  .route-kaart:hover{transform:translateY(-6px);background:#FFFCF2;border-color:var(--yellow);box-shadow:var(--shadow-lift)}
  .route-kaart:hover .route-beeldvak img{transform:translateY(-6px) scale(1.16) rotate(-4deg)}
}
@media (prefers-reduced-motion:reduce){.route-kaart,.route-beeldvak img{transition:none}}

/* LEF-thema's: kop en tekst dicht bij elkaar, uitgelijnd met de blokken */
.section-head.themas-kop{max-width:58rem;gap:12px}
.themas-kop h2{font-size:var(--step-4)}
.themas-kop .stack{gap:12px}

/* Hoe we helpen: vijf diensten als blokken */
.diensten-blokken{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.diensten-blokken li{display:flex}
.diensten-blokken a{position:relative;display:grid;align-content:start;gap:8px;width:100%;padding:0 20px 44px;border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s ease}
.s-navy .diensten-blokken a{color:var(--ink)}
.dienst-knip{display:grid;place-items:center;margin:0 -20px 10px;aspect-ratio:4/3;background:var(--yellow-soft)}
.dienst-knip img{width:86%;height:86%;object-fit:contain;transition:transform .55s var(--ease-out)}
.diensten-blokken h3,.s-navy .diensten-blokken h3{font-size:var(--step-1);color:var(--navy)}
.diensten-blokken p,.s-navy .diensten-blokken p{margin:0;color:var(--mute);font-size:.94rem;line-height:1.5}
.diensten-blokken .dienst-doel,.s-navy .diensten-blokken .dienst-doel{font:600 .95rem/1.35 var(--zi-display);color:var(--orange-ink)}
.diensten-blokken .ar{position:absolute;right:20px;bottom:16px;color:var(--orange-ink);font-weight:600;transition:transform .3s var(--ease-out)}
@media (hover:hover){
  .diensten-blokken a:hover{transform:translateY(-5px);box-shadow:0 22px 40px -22px rgba(0,0,0,.55)}
  .diensten-blokken a:hover .dienst-knip img{transform:scale(1.07) rotate(-2deg)}
  .diensten-blokken a:hover .ar{transform:translateX(4px)}
}
/* op de telefoon: minder scrollen */
@media (max-width:640px){
  .route-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .route-kaart{padding:12px 14px 18px}
  .route-beeldvak{height:84px}
  .route-beeldvak img{max-height:72px}
  .route-kaart .nr{top:10px;left:10px;width:28px;height:28px;font-size:.85rem}
  .route-kaart h3{font-size:var(--step-1)}
  .route-kaart p{font-size:.9rem}
  .dienst-knip{aspect-ratio:16/7}
  .dienst-knip img{height:92%}
}
/* 1.3.5: de afbeelding bepaalt niet meer de hoogte van het beeldvak, zodat de tekst op de telefoon niet wordt afgekapt */
.dienst-knip{position:relative;min-height:0;overflow:hidden}
.dienst-knip img{position:absolute;inset:0;margin:auto;width:86%;height:86%;max-width:none}
@media (max-width:640px){.dienst-knip img{height:92%}}