/* sub2.css — binnenpagina's lammers2 (07-10): paginahero, plaatsen, tegels, pedalen, plaats-tijdlijn, juridisch */

/* ── paginahero: donkere studio, beeld rechts met spotlicht ── */
.u3-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;min-height:clamp(540px,calc(80svh / var(--zoom, 1) - 96px),720px);background:radial-gradient(50% 70% at 78% 40%,rgba(54,194,240,.28),rgba(54,194,240,0) 70%),radial-gradient(40% 60% at 0% 100%,rgba(242,182,60,.1),rgba(242,182,60,0) 70%),linear-gradient(180deg,#081A27,#04101A);color:#fff}
.u3-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(140,180,205,.07));border-top:1px solid rgba(255,255,255,.05)}
.u3-hero-raster{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center;padding-block:clamp(36px,5vh,64px)}
.u3-hero-tekst{display:grid;justify-items:start}
.u3-kruimel{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.u3-kruimel a{color:var(--u-gloed);text-decoration:none}
.u3-kruimel a:hover{text-decoration:underline}
.u3-kruimel [aria-current]{color:#fff}
.u3-hero h1{font-size:clamp(40px,4.4vw,64px);line-height:.98;letter-spacing:-.04em;color:#fff;text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.u3-hero h1 em{font-style:normal;color:var(--u-zon)}
.u3-lead{margin-top:18px;max-width:34em;font-size:1.12rem;line-height:1.6;color:rgba(255,255,255,.82)}
.u3-lijst{list-style:none;display:grid;gap:10px;margin:26px 0 0;padding:0}
.u3-lijst li{display:flex;align-items:center;gap:10px;font-size:.98rem;color:rgba(255,255,255,.88)}
.u3-lijst svg{width:18px;height:18px;flex:none;color:var(--u-zon)}
.u3-hero-beeld{position:relative;justify-self:end;width:min(100%,460px);margin:0}
.u3-hero-beeld::before{content:"";position:absolute;left:8%;right:8%;top:-40px;height:200px;z-index:1;background:radial-gradient(closest-side,rgba(54,194,240,.4),rgba(54,194,240,0));mix-blend-mode:screen;pointer-events:none}
.u3-hero-beeld > img{width:100%;aspect-ratio:1/1.12;object-fit:cover;border-radius:24px;box-shadow:0 60px 100px -50px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.12)}
.u3-hero-studio .u3-hero-beeld > img{aspect-ratio:1122/1300}
.u3-hero-beeld::after{content:"";position:absolute;inset:-22px 26px 26px -22px;z-index:-1;border:2px solid rgba(242,182,60,.35);border-radius:22px;transform:skewX(var(--schuin))}
.u3-pas{left:-18px;top:auto;bottom:28px;height:48px}
.u3-hero-l{justify-self:center}
.u3-l-groot{position:static;width:min(260px,30vw);height:auto;transform:skewX(var(--schuin))}
.u3-l-groot path{stroke:rgba(242,182,60,.4);stroke-width:2.5}
.u3-hero:not(:has(.u3-hero-beeld)){min-height:clamp(380px,calc(56svh / var(--zoom, 1) - 96px),480px)}
.u3-hero-vol{min-height:calc(100svh / var(--zoom, 1) - 96px)}

/* ── kleine kop binnen een sectie ── */
.u3-kop-klein{margin:clamp(40px,4vw,56px) 0 18px;text-align:center}
.u3-kop-klein h3{font-size:clamp(22px,2vw,28px)}
.u3-noot{max-width:760px;margin:22px auto 0;text-align:center;font-size:.9rem;color:var(--u-grijs)}

/* ── losse prijzen als tegels ── */
.u3-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.u3-tegel{display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px;border-radius:18px;background:var(--u-papier);border:1px solid rgba(17,37,45,.08);transition:transform .3s,box-shadow .3s,border-color .3s}
.u3-tegel:hover{transform:translateY(-5px);border-color:rgba(28,93,116,.3);box-shadow:0 30px 50px -40px rgba(6,20,31,.6)}
.u3-tegel-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--u-nacht);color:var(--u-zon)}
.u3-tegel-ico svg{width:22px;height:22px}
.u3-tegel h3{margin-top:4px;font-size:1.15rem}
.u3-tegel p{font-size:.9rem;color:var(--u-grijs);flex:1}
.u3-tegel-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:12px;border-top:1px solid rgba(17,37,45,.08)}
.u3-tegel-voet b{font:900 1.6rem/1 var(--l-kop);letter-spacing:-.03em}
.u3-tegel-voet a{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.9rem;color:var(--petrol);text-decoration:none}
.u3-tegel-voet a svg{width:15px;height:15px}
.u3-op{font-size:1.4rem !important;color:var(--petrol)}

/* ── plaatsen ── */
.u3-plaatsen{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(64px,7vw,100px);background:radial-gradient(50% 70% at 50% 0%,rgba(10,106,149,.45),rgba(10,106,149,0) 70%),var(--u-nacht);color:#fff}
.u3-plaatsen .u2-lead{color:rgba(255,255,255,.76)}
.u3-plaatsen h2 em{font-style:normal;color:var(--u-zon)}
.u3-plekken{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0}
.u3-plek{display:flex;align-items:center;gap:12px;padding:16px 16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;transition:background .25s,border-color .25s,transform .25s}
.u3-plek:hover{background:rgba(255,255,255,.12);border-color:var(--u-zon);transform:translateY(-3px)}
.u3-plek > span:nth-child(2){display:grid;line-height:1.25;flex:1;min-width:0}
.u3-plek b{font-size:1.02rem}
.u3-plek small{font-size:.8rem;color:rgba(255,255,255,.6)}
.u3-plek > svg{width:16px;height:16px;flex:none;color:var(--u-zon);transition:transform .25s}
.u3-plek:hover > svg{transform:translateX(3px)}
.u3-pin{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:rgba(54,194,240,.16);color:var(--u-gloed)}
.u3-pin svg{width:20px;height:20px}
.u3-plek-thuis{background:var(--u-zon);border-color:var(--u-zon);color:var(--u-inkt)}
.u3-plek-thuis small{color:rgba(6,20,31,.65)}
.u3-plek-thuis .u3-pin{background:var(--u-nacht);color:var(--u-zon)}
.u3-plek-thuis > svg{color:var(--u-inkt)}
.u3-plek-thuis:hover{background:var(--u-zon-l)}
.u3-plekken-onder{margin-top:20px;text-align:center;font-size:.9rem;color:rgba(255,255,255,.66)}
.u3-plekken-onder a{color:#fff;font-weight:700}

/* ── automaat: pedalen ── */
.u3-waarom{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(70px,7.4vw,108px);background:radial-gradient(45% 60% at 100% 50%,rgba(10,106,149,.12),rgba(10,106,149,0) 70%),var(--u-papier)}
.u3-waarom-raster{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,80px);align-items:center}
.u3-waarom h2 em{font-style:normal;color:var(--petrol)}
.u3-waarom-beeld{position:relative;padding-bottom:70px}
.u3-pedalen-kaart{padding:20px 20px 16px;border-radius:24px;background:linear-gradient(160deg,#0F3044,var(--u-nacht));box-shadow:0 50px 90px -50px rgba(6,20,31,.9)}
.u3-pedalen-kaart p{margin-top:8px;text-align:center;font-size:.9rem;color:rgba(255,255,255,.72)}
.u3-pedalen{display:block;width:100%;height:auto}
.p-paneel > rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.12);stroke-width:1.5}
.p-paneel-a > rect{fill:rgba(54,194,240,.08);stroke:rgba(54,194,240,.4)}
.p-kop{font:900 20px var(--l-kop);fill:#fff;text-anchor:middle}
.p-pedaal rect{fill:#C9D3DA}
.p-pedaal text,.p-scherm text{font:800 15px var(--l-tekst);fill:rgba(255,255,255,.7);text-anchor:middle}
.p-paneel-a .p-pedaal:not(.p-weg) rect{fill:var(--u-zon)}
.p-donker{fill:#2A3A45}.p-knop{fill:#C9D3DA}.p-pook-lijn{stroke:#2A3A45;stroke-width:2.5;fill:none;stroke-linecap:round}
.p-scherm rect{fill:#0A1C29;stroke:rgba(54,194,240,.5);stroke-width:1.5}
.p-scherm text{fill:var(--u-gloed);font-size:16px;letter-spacing:.12em}
.p-weg{transition:opacity 1s ease .6s}
.p-weg rect{fill:#3A4A55}
.p-kruis{stroke:#FF5A3C;stroke-width:4;stroke-linecap:round;fill:none;stroke-dasharray:110;stroke-dashoffset:0;transition:stroke-dashoffset .8s ease .3s}
.js .u3-waarom-beeld:not(.in) .p-kruis{stroke-dashoffset:110}
.u3-waarom-beeld.in .p-weg{opacity:.45}
.u3-szymon{position:absolute;right:-10px;bottom:0;width:min(46%,240px);margin:0;border-radius:18px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 50px -24px rgba(6,20,31,.7);rotate:3deg}
.u3-szymon img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:60% 50%}
.u3-szymon figcaption{position:absolute;left:8px;right:8px;bottom:8px;padding:6px 10px;border-radius:10px;background:rgba(6,20,31,.82);color:#fff;font-size:.78rem}

/* ── motor: vier stappen ── */
.u3-stappen-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.i-terrein{fill:#2A3640}
.i-spoorlijn{fill:none;stroke:var(--u-gloed);stroke-width:2.5;stroke-dasharray:2 6;stroke-linecap:round}
.i-kegel{transition:transform .5s cubic-bezier(.3,1.5,.5,1) calc(.3s + var(--d) * .12s)}
.js .u2-stappen:not(.in) .i-kegel{transform:translateY(-30px) !important;opacity:0}
.i-asfalt{fill:#2A3640}
.i-middenlijn{stroke:#fff;stroke-width:3;stroke-linecap:round}
.i-motor-weg{transition:transform 1.4s ease .3s}
.js .u2-stappen:not(.in) .i-motor-weg{transform:translateY(30px)}

/* ── plaatspagina: uitleg + tijdlijn ── */
.u3-plaats{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(70px,7.4vw,108px);background:radial-gradient(45% 60% at 0% 50%,rgba(10,106,149,.12),rgba(10,106,149,0) 70%),radial-gradient(40% 50% at 100% 0%,rgba(242,182,60,.12),rgba(242,182,60,0) 70%),var(--u-papier)}
.u3-plaats-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
.u3-plaats h2{font-size:clamp(36px,3.9vw,56px);line-height:1.02;letter-spacing:-.035em}
.u3-plaats h2 em{font-style:normal;color:var(--petrol)}
.u3-plaats-kaart{padding:24px;border-radius:24px;background:linear-gradient(160deg,#0F3044,var(--u-nacht));color:#fff;box-shadow:0 50px 90px -50px rgba(6,20,31,.9)}
.u3-tijdlijn{list-style:none;position:relative;display:grid;gap:14px;margin:0;padding:0 0 0 0}
.u3-tijdlijn::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:linear-gradient(180deg,var(--u-zon),rgba(54,194,240,.5))}
.u3-tijdlijn li{position:relative;display:flex;align-items:center;gap:16px;padding:12px 14px 12px 0;font-size:.92rem;color:rgba(255,255,255,.74);opacity:1;transform:none;transition:opacity .5s ease calc(var(--i) * .15s),transform .5s ease calc(var(--i) * .15s)}
.js .u3-plaats-kaart:not(.in) .u3-tijdlijn li{opacity:0;transform:translateX(-12px)}
.u3-tl-ico{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;background:var(--u-zon);color:var(--u-inkt);box-shadow:0 0 0 6px rgba(242,182,60,.18)}
.u3-tl-ico svg{width:22px;height:22px}
.u3-tijdlijn b{display:block;color:#fff;font-size:1.05rem}
.u3-plaats-jordi{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:.88rem;color:rgba(255,255,255,.7)}
.u3-plaats-jordi img{width:56px;height:56px;border-radius:50%;border:3px solid var(--u-zon)}
.u3-plaats-jordi b{display:block;color:#fff;font-size:1rem}
.u3-rv-drie{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.8fr)}
.u3-rv-drie .u2-rv-foto{grid-column:4;grid-row:1}

/* ── vragenpagina: tabs ── */
.u3-tabs{flex-wrap:wrap;justify-content:center;max-width:100%}
.u3-faq .vr-lijst{margin-top:8px}

/* ── juridisch ── */
.u3-juridisch{background:var(--u-papier)}

/* ── tussenmaten en telefoon ── */
@media (max-width:1100px){
  .u3-tegels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u3-plekken{grid-template-columns:repeat(2,minmax(0,1fr))}
  .u3-rv-drie{grid-template-columns:1fr 1fr}
  .u3-rv-drie .u2-rv-foto{display:none}
  .u3-stappen-vier{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .u3-hero{min-height:0}
  .u3-hero-raster,.u3-waarom-raster,.u3-plaats-raster{grid-template-columns:1fr}
  .u3-hero-beeld{justify-self:center;width:min(100%,420px);margin-top:10px}
  .u3-hero-l{display:none}
  .u3-waarom-beeld{max-width:600px;margin-inline:auto}
}
@media (max-width:699px){
  .u3-hero-raster{padding-block:30px 40px}
  .u3-hero-tekst{justify-items:center;text-align:center}
  .u3-hero h1{font-size:clamp(32px,9.4vw,42px)}
  .u3-lead{font-size:1rem}
  .u3-hero .u2-knoppen{display:grid;grid-template-columns:1fr;width:100%}
  .u3-lijst{justify-items:start;text-align:left}
  .u3-hero-beeld{width:min(84%,340px)}
  .u3-hero-beeld > img{aspect-ratio:1/1}
  .u3-pas{left:-10px;bottom:16px;height:40px}
  .u3-tegels{grid-template-columns:1fr}
  .u3-plekken{grid-template-columns:1fr 1fr;gap:8px}
  .u3-plek{padding:12px;gap:10px}
  .u3-pin{width:32px;height:32px}
  .u3-plek > svg{display:none}
  .u3-plaatsen,.u3-waarom,.u3-plaats{padding-block:50px}
  .u3-waarom-tekst,.u3-plaats-tekst{text-align:center}
  .u3-waarom-tekst .u2-punten{text-align:left}
  .u3-waarom-tekst .u2-kicker::after,.u3-plaats-tekst .u2-kicker::after{content:"";width:26px;height:3px;border-radius:2px;background:currentColor;transform:skewX(var(--schuin))}
  .u3-plaats h2{font-size:clamp(30px,9vw,36px)}
  .u3-szymon{position:relative;right:auto;width:60%;margin:-30px auto 0}
  .u3-waarom-beeld{padding-bottom:0}
  .u3-rv-drie{grid-template-columns:1fr}
  .u3-stappen-vier{grid-template-columns:1fr}
}
.p-h{stroke:rgba(255,255,255,.45);stroke-width:2.5;fill:none;stroke-linecap:round}
.p-stang{stroke:#C9D3DA;stroke-width:6;stroke-linecap:round}
.p-kl{font:800 13px var(--l-tekst);fill:rgba(255,255,255,.6);text-anchor:middle}
.u3-waarom-beeld{padding-bottom:0}
/* plaatsen op een lichte grond (tussen donkere secties) */
.u3-plaatsen{background:radial-gradient(50% 60% at 50% 0%,rgba(10,106,149,.12),rgba(10,106,149,0) 70%),radial-gradient(40% 50% at 100% 100%,rgba(242,182,60,.14),rgba(242,182,60,0) 70%),var(--u-zand);color:var(--u-inkt)}
.u3-plaatsen .u2-lead{color:var(--u-grijs)}
.u3-plaatsen h2 em{color:var(--petrol)}
.u3-plaatsen .u2-kicker-licht{color:var(--petrol)}
.u3-plek{background:#fff;border-color:rgba(17,37,45,.08);color:var(--u-inkt);box-shadow:0 20px 40px -36px rgba(6,20,31,.6)}
.u3-plek:hover{background:#fff;border-color:var(--petrol)}
.u3-plek small{color:var(--u-grijs)}
.u3-plek > svg{color:var(--petrol)}
.u3-pin{background:rgba(28,93,116,.1);color:var(--petrol)}
.u3-plek-thuis{background:var(--u-nacht);border-color:var(--u-nacht);color:#fff}
.u3-plek-thuis small{color:rgba(255,255,255,.65)}
.u3-plek-thuis .u3-pin{background:var(--u-zon);color:var(--u-inkt)}
.u3-plek-thuis > svg{color:var(--u-zon)}
.u3-plek-thuis:hover{background:var(--u-nacht-2)}
.u3-plekken-onder{color:var(--u-grijs)}
.u3-plekken-onder a{color:var(--petrol)}
.u3-waarom h2{font-size:clamp(36px,3.9vw,56px);line-height:1.02;letter-spacing:-.035em}
@media (max-width:699px){ .u3-waarom h2{font-size:clamp(30px,9vw,36px)} }

/* ═══ TELEFOON-PASS (Sean 08-10: "lammers3 mobiele versie fixen, er zitten veel fouten") ═══ */
@media (max-width:699px){
  /* paginahero: beeld over de breedte, geen scheef kader dat links door de hero loopt, pasje binnen het beeld */
  .u3-hero-beeld{width:100%;max-width:440px}
  .u3-hero-beeld::after{display:none}
  .u3-hero-beeld > img,.u3-hero-studio .u3-hero-beeld > img{aspect-ratio:4/3}
  .u3-pas{left:12px;bottom:12px}
  /* lint boven de titel op één regel (streepje bleef los staan als de tekst brak) */
  .u3-hero .u2-kicker{font-size:.72rem;letter-spacing:.12em}
  /* decoratieve schuine kaders liepen op telefoon dwars door tekst en knoppen */
  .u2-feat::after,.t-motor::after{display:none}
  /* punten bij "Jordi neemt echt de tijd": tekst links naast het icoon, niet gecentreerd */
  .u2-punten li{text-align:left}
  /* contactkaart in de afsluiter: foto naast de gegevens, alles op één lijn */
  .u2-slot-wie{flex-direction:row;align-items:flex-start;gap:14px;padding:16px}
  .u2-slot-wie > img{width:56px;height:56px}
  .u2-slot-wie ul{gap:10px}
  .u2-slot-wie li{column-gap:10px;row-gap:0;line-height:1.3}
  /* losse lessen: compacte tegels (icoon naast de naam) in plaats van zes hoge blokken */
  .u3-tegel{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:16px}
  .u3-tegel-ico{grid-row:1 / 3;width:42px;height:42px}
  .u3-tegel h3{margin:0;font-size:1.05rem}
  .u3-tegel p{grid-column:2;font-size:.86rem}
  .u3-tegel-voet{grid-column:1 / -1;margin-top:6px;padding-top:10px}
  .u3-tegel-voet b{font-size:1.4rem}
  /* plaatsen als nette lijst: naam links, afstand rechts (’s-Gravenzande brak in tweeën) */
  .u3-plekken{grid-template-columns:1fr;gap:8px}
  .u3-plek{padding:10px 14px}
  .u3-plek > span:not(.u3-pin){display:flex;flex:1;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
  .u3-plek b{white-space:nowrap}
  .u3-plek small{text-align:right}
  /* onderwerpen op de vragenpagina: twee nette kolommen in plaats van een rommelige wolk */
  .u3-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
  .u3-tabs .pr-tab{justify-content:center;font-size:.95rem;padding-inline:10px}
  .u3-tabs .pr-tab:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:699px){
  /* lint en kruimelpad mogen breken (nowrap duwde de hele hero breder dan het scherm op 320 px); geen los streepje ervoor */
  .u3-hero .u2-kicker{white-space:normal;text-wrap:balance}
  .u3-hero .u2-kicker::before{display:none}
  .u3-kruimel{flex-wrap:wrap;justify-content:center;row-gap:4px}
  .u3-hero-tekst > *{max-width:100%;min-width:0}
}
@media (max-width:380px){
  /* smalle telefoon: foto boven de gegevens, zodat het mailadres heel blijft */
  .u2-slot-wie{flex-direction:column;align-items:flex-start}
  .u2-slot-wie a,.u2-slot-wie b{overflow-wrap:normal;font-size:.92rem}
}
/* motorsectie in één kolom: eerst titel en tekst, dan de foto's (Sean 08-10: "de titel staat onder de foto") */
@media (max-width:920px){
  .t-motor-tekst{order:-1}
  .t-motor-raster{gap:34px}
}
/* lesaanbod op telefoon: drie kaarten onder elkaar in plaats van een schuifrij (Sean 08-10) */
@media (max-width:699px){
  .u2-kaarten{grid-template-columns:1fr;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;gap:16px;padding:0;margin-inline:0}
  .u2-kaarten .u2-kaart,.u2-kaarten .u2-kaart:last-child{max-width:none;grid-column:auto}
  .u2-kaart-foto{aspect-ratio:4/3}
  .u2-kaart-tekst{margin-top:-46px;padding:0 20px}
  .u2-kaart-tekst b{font-size:28px}
  .u2-kaart-voet{margin:14px 20px 18px;padding-top:14px}
}
/* taalwissel NL/EN in de kopbalk: een pil met een schuivend vlak onder de actieve taal */
.taalwissel{position:relative;display:grid;grid-template-columns:1fr 1fr;flex:none;padding:3px;border-radius:999px;background:var(--zand);box-shadow:inset 0 0 0 1.5px rgba(17,37,45,.12);isolation:isolate}
.taalwissel::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--petrol);box-shadow:0 6px 14px -8px rgba(10,34,48,.8);transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.taalwissel:has(a[lang="en"][aria-current])::before{transform:translateX(100%)}
.taalwissel a{min-width:40px;padding:8px 10px;border-radius:999px;font:800 12.5px/1 var(--l-tekst);letter-spacing:.06em;text-align:center;text-decoration:none;color:var(--grijs);transition:color .25s ease}
.taalwissel a[aria-current]{color:#fff}
.taalwissel a:not([aria-current]):hover{color:var(--petrol)}
.taalwissel:hover:not(:has(a[aria-current]:hover))::before{transform:translateX(var(--naar,0))}
.taalwissel:has(a[lang="nl"][aria-current]){--naar:12%}
.taalwissel:has(a[lang="en"][aria-current]){--naar:88%}
.taalwissel a:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
@media (max-width:1120px){
  .taalwissel{margin-left:auto}
  .taalwissel ~ .menutoets{margin-left:0}
}
@media (max-width:359px){ .taalwissel a{min-width:34px;padding-inline:7px} }

/* brede hero (veelgestelde vragen): de foto met alle lesvoertuigen in één liggend kader */
.u3-hero-breed .u3-hero-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.u3-hero-breed .u3-hero-beeld{width:min(100%,640px)}
.u3-hero-breed .u3-hero-beeld > img{aspect-ratio:16/9;object-position:50% 58%}
@media (max-width:920px){
  .u3-hero-breed .u3-hero-raster{grid-template-columns:1fr}
  .u3-hero-breed .u3-hero-beeld{width:100%;max-width:640px}
}
@media (max-width:699px){
  .u3-hero-breed .u3-hero-beeld{width:100%}
  .u3-hero-breed .u3-hero-beeld > img{aspect-ratio:16/9}
}