/* ttwwoo-v2.css — feedback V2 van ttwwoo (6 nov 2026). */

/* ---------- Menu 13 (V2): als 11, maar zonder webadres en zonder tellertje, rechts uitgelijnd tegen NL | EN,
   een slag groter, meer lucht tussen de knoppen en een kort scheidingsstreepje. Letter en afstand lopen mee met
   de schermbreedte, zodat het menu altijd op één regel past. ---------- */
@media (min-width: 861px) {
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk nav { margin-left: auto; }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk .taal { margin-left: clamp(18px, 6.5vw - 54px, 40px); }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk .hoofdmenu { align-items: center; gap: clamp(14px, 5.3vw - 42px, 34px) !important; }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) body .kop-balk .hoofdmenu a { font-size: clamp(15px, 1.18vw + 3px, 20px); }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .hoofdmenu > li.menu-extern:has(a[href$="werken-bij.html"]) { position: relative; padding-left: clamp(14px, 5.3vw - 42px, 34px); }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .hoofdmenu > li.menu-extern:has(a[href$="werken-bij.html"])::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--lijn); }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .menu-extern .menu-tel, html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .menu-webadres { display: none; }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .hoofdmenu li:has(.menu-tel) { margin-right: 0; }
}
@media (min-width: 861px) and (max-width: 960px) {
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) body:not(.wi):not(.wb-body) .kop-balk .wrap { gap: 14px; }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk .hoofdmenu { gap: 11px !important; }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .hoofdmenu > li.menu-extern:has(a[href$="werken-bij.html"]) { padding-left: 11px; }
  html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk .taal { margin-left: 14px; }
}
@media (min-width: 861px) and (max-width: 900px) { html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) body .kop-balk .hoofdmenu a { font-size: 14.5px; } html:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk .hoofdmenu { gap: 10px !important; } }

/* ---------- Team op home (V2, mockup ttwwoo): hoger geel naamblok, grotere naam, plus altijd zichtbaar als
   omlijnd rondje rechts in het gele blok (ttwwoo-v2.js verhuist het knopje van de foto naar het naamblok). ---------- */
.team-sectie .lid .naam { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 0;
  padding: clamp(13px, 1.2vw, 17px) calc(clamp(13px, 1.2vw, 17px) + 52px) clamp(12px, 1.15vw, 16px) clamp(14px, 1.35vw, 20px);
  font-size: clamp(19px, 1.55vw, 23px); line-height: 1.12; }
.team-sectie .lid .naam .tk-badge { position: absolute; right: clamp(12px, 1.1vw, 16px); top: 50%; bottom: auto; width: 42px; height: 42px; margin-top: -21px;
  background: none; box-shadow: none; border: 1.5px solid var(--inkt); opacity: 1; transform: none; visibility: visible; }
.team-sectie .lid .naam .tk-badge svg { width: 20px; height: 20px; }
.team-sectie .lid:hover .naam .tk-badge, .team-sectie .lid.tk-open .naam .tk-badge { background: var(--inkt); color: var(--geel); }
@media (max-width: 860px) {
  .team-sectie .lid .naam { font-size: 16.5px; padding: 10px 46px 9px 11px; }
  .team-sectie .lid .naam .tk-badge { width: 32px; height: 32px; margin-top: -16px; right: 8px; }
  .team-sectie .lid .naam .tk-badge svg { width: 16px; height: 16px; }
}

/* ---------- Menu 14 (V2, idee Jochem): omgedraaid, de naam van de site als knop en wat je er vindt klein eronder
   (bijworkx · Vacatures, WorkxIN · Detachering). Verder gelijk aan 13. ---------- */
.menu-site { display: none; }
@media (min-width: 861px) {
  html[data-k-menu="14"] .menu-extern a > span:first-child { display: none; }
  html[data-k-menu="14"] .menu-extern a { position: relative; }
  html[data-k-menu="14"] .menu-extern .menu-site { display: inline; }
  html[data-k-menu="14"] .menu-site small { position: absolute; left: 0; top: calc(100% - 6px); font-size: 12px; line-height: 1.2; color: var(--zacht); white-space: nowrap; pointer-events: none; }
}

/* ---------- Werken bij op home (V2, mockup ttwwoo): links icoon en kop in de stijl van de andere sectiekoppen,
   rechts 'Open vacatures' met teller, de zwarte knop rechtsboven en de vacatures als onderstreepte links in drie
   kolommen. Letter- en knopmaten zijn die van de rest van de site (kop = --kop, links 16 px, knop als overal). ---------- */
.wb2 .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: end; gap: 36px clamp(40px, 6vw, 96px); }
.wb2 .sectiekop { gap: 18px; }
.wb2 .wb2-icoon { width: 44px; height: 44px; color: var(--inkt); margin-left: 0; }
.wb2 .wb2-icoon svg { width: 100%; height: 100%; display: block; }
.wb2 .sectiekop h2 { font-size: var(--kop); line-height: 1.12; margin: 0; }
.wb2-rechts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 40px); align-items: end; text-align: left; }
.wb2-label { grid-column: 1 / 3; grid-row: 1; margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1; color: var(--inkt); }
.wb2-tel { position: relative; top: -.75em; display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 4px; border-radius: 9px; background: var(--inkt); color: var(--wit); font-size: 10.5px; letter-spacing: 0; line-height: 1; }
.wb2 .wb-band-knop { grid-column: 3; grid-row: 1; justify-self: end; align-self: end; white-space: nowrap; }
.wb2-vac { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: inherit; row-gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.wb2-vac a { display: block; padding: 8px 0 7px; border-bottom: 1px solid var(--inkt); font-size: 16px; line-height: 1.3; color: var(--inkt); text-decoration: none; transition: box-shadow .2s var(--ease); }
.wb2-vac a:hover, .wb2-vac a:focus-visible { box-shadow: inset 0 -2px 0 var(--inkt); }
@media (max-width: 860px) {
  .wb2 .wrap { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .wb2-rechts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .wb2-label { grid-column: 1 / -1; }
  .wb2-vac { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; row-gap: 12px; }
  .wb2 .wb-band-knop { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 28px; }
}
/* wb 17: als de mockup, met een pijltje rechts op elke vacatureregel (schuift bij aanwijzen) */
html[data-k-wb="17"] .wb2-vac a { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
html[data-k-wb="17"] .wb2-vac a::after { content: "→"; font-size: 15px; transition: transform .3s var(--ease); }
html[data-k-wb="17"] .wb2-vac a:hover::after { transform: translateX(4px); }
/* wb 18: als de mockup; de lijnen trekken bij binnenkomst van links naar rechts */
html[data-k-wb="18"] .wb2-vac a { border-bottom: 0; background: linear-gradient(var(--inkt), var(--inkt)) 0 100% / 0 1px no-repeat; transition: background-size .9s var(--ease); }
html[data-k-wb="18"] .wb2.in-beeld .wb2-vac a { background-size: 100% 1px; }
html[data-k-wb="18"] .wb2.in-beeld .wb2-vac li:nth-child(2) a { transition-delay: .08s; } html[data-k-wb="18"] .wb2.in-beeld .wb2-vac li:nth-child(3) a { transition-delay: .16s; }
html[data-k-wb="18"] .wb2.in-beeld .wb2-vac li:nth-child(4) a { transition-delay: .24s; } html[data-k-wb="18"] .wb2.in-beeld .wb2-vac li:nth-child(5) a { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { html[data-k-wb="18"] .wb2-vac a { background-size: 100% 1px; transition: none; } }
/* menu 16: als 14, maar met het webadres als knop (bijworkx.nl, workxin.nl) en wat je er vindt klein eronder */
.menu-site2 { display: none; }
@media (min-width: 861px) {
  html[data-k-menu="16"] .menu-extern a > span:first-child { display: none; }
  html[data-k-menu="16"] .menu-extern a { position: relative; }
  html[data-k-menu="16"] .menu-extern .menu-site2 { display: inline; }
  html[data-k-menu="16"] .menu-site2 small { position: absolute; left: 0; top: calc(100% - 6px); font-size: 12px; line-height: 1.2; color: var(--zacht); white-space: nowrap; pointer-events: none; }
}
/* menu 15: als 13, zonder de schuine pijltjes */
@media (min-width: 861px) { html[data-k-menu="15"] .menu-extern .pijl-uit { display: none; } }
/* team op home, optie 2: het rondje wit gevuld, zonder rand */
html[data-k-tmh="2"] .team-sectie .lid .naam .tk-badge { border-color: transparent; background: var(--wit); }
html[data-k-tmh="2"] .team-sectie .lid:hover .naam .tk-badge, html[data-k-tmh="2"] .team-sectie .lid.tk-open .naam .tk-badge { background: var(--inkt); }
/* team op home, optie 3: alleen een dun plusteken zonder rondje, dat bij aanwijzen een kwartslag draait */
html[data-k-tmh="3"] .team-sectie .lid .naam .tk-badge { border: 0; background: none; }
html[data-k-tmh="3"] .team-sectie .lid .naam .tk-badge svg { width: 28px; height: 28px; transition: transform .45s var(--ease); }
html[data-k-tmh="3"] .team-sectie .lid:hover .naam .tk-badge { background: none; color: var(--inkt); }
html[data-k-tmh="3"] .team-sectie .lid:hover .naam .tk-badge svg { transform: rotate(90deg); }
html[data-k-tmh="3"] .team-sectie .lid.tk-open .naam .tk-badge { background: none; color: var(--inkt); }
html[data-k-tmh="3"] .team-sectie .lid.tk-open .naam .tk-badge svg { transform: rotate(45deg); }

/* ---------- Ons team (V2): de huidige opzet (kaart 100), maar het portret klapt niet meer om (ttwwoo-team.js zet
   data-geen-flip) en de tegel krijgt een nieuwe rand: lichtgrijze achtergrond achter het portret, een wit randje
   eromheen en een schaduw achter de tegel. De foto's zijn wit uitgesneden: multiply maakt het wit lichtgrijs. ---------- */
html[data-k-tov] .teamlid .lid { background: var(--wit); padding: 9px 9px 16px; border-radius: var(--hoek); box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 16px 34px -16px rgba(0,0,0,.32); }
html[data-k-tov] .teamlid .lid::after { display: none; }
html[data-k-tov] .teamlid .lid .foto { background: #efefec; border-radius: calc(var(--hoek) - 5px); }
html[data-k-tov] .teamlid .lid .foto img { mix-blend-mode: multiply; }
html[data-k-tov] .teamlid .lid:hover { transform: none; }
html[data-k-tov] .teamlid .lid:hover img { transform: none; }
html[data-k-tov] .teamlid .lid .naam { margin: 12px 3px 0; }
/* optie 2: smaller wit randje, de tegel komt bij aanwijzen iets omhoog met een diepere schaduw */
html[data-k-tov="2"] .teamlid .lid { padding: 5px 5px 12px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
html[data-k-tov="2"] .teamlid .lid .naam { margin: 10px 2px 0; }
html[data-k-tov="2"] .teamlid .lid:hover { transform: translateY(-4px); box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 24px 44px -18px rgba(0,0,0,.38); }
/* optie 3: breder wit randje, een dunne lijn in plaats van de diepe schaduw (alleen een zachte rand eronder) */
html[data-k-tov="3"] .teamlid .lid { padding: 12px 12px 18px; box-shadow: 0 0 0 1px var(--lijn), 0 10px 20px -16px rgba(0,0,0,.25); }

/* ---------- Profiel (V2): basis optie 5 (profiel 9). Portret zonder kader op de zwarte lijn, bovenkant hoofd op de
   hoogte van PARTNER, alles omhoog zodat PARTNER gelijk staat met de bovenkant van het contactblok, en naam, label en
   jaartallen op dezelfde lijn als de tekstkolom eronder (180 + 40 = 220 px vanaf de rand, zoals .pa-rij).
   Het contactblok loopt naast de lijn door (rij 1 en 2), zodat de lijn niet door het contactblok omlaag wordt geduwd.
   Het portret is uitgesneden op wit: het hoofd begint op ±11,5 % van de fotohoogte (= 0,147 × de breedte). ---------- */
@media (min-width: 1101px) {
  html[data-k-profiel="9"] .p4-raster { --pw: 220px; --kg: 56px; grid-template-columns: var(--pw) minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr; column-gap: var(--kg); }
  html[data-k-profiel="9"] .pa-contact { grid-row: 1 / span 2; }
  html[data-k-profiel="9"] .p4-kader { grid-row: 3; }
  html[data-k-profiel="9"] .p2-rechts > div:first-child { align-self: start; margin-left: calc(-1 * var(--kg)); padding-top: 0; }
  html[data-k-profiel="9"] .to-kaart { align-self: end; margin-bottom: -40px; background: none; box-shadow: none; padding: 0; border-radius: 0; }
  html[data-k-profiel="9"] .pf .to-portret { aspect-ratio: auto; width: var(--fw, var(--pw)); height: calc(var(--fw, var(--pw)) * 1.133 + 6px); overflow: hidden; background: none; border-radius: 0; }
  html[data-k-profiel="9"] .pf .to-portret::after { display: none; }
  html[data-k-profiel="9"] .pf .to-portret img { display: block; width: 100%; height: auto; margin-top: calc(var(--fw, var(--pw)) * -0.147 + 6px); border-radius: 0; }
  /* optie 2: portret en tekstkolom iets breder (250 px) */
  html[data-k-profiel="9"][data-k-prof="2"] .p4-raster { --pw: 250px; }
  html[data-k-profiel="9"][data-k-prof="2"] .pa-rij { grid-template-columns: 210px minmax(0, 1fr); }
  /* optie 3: portret iets kleiner (200 px), de tekstkolom blijft op zijn plek */
  html[data-k-profiel="9"][data-k-prof="3"] .p4-raster { --fw: 196px; }
}
/* telefoon: het naamblok stond nog in een tweede kolom (fout in profiel 9, zichtbaar sinds die vaststaat) */
@media (max-width: 860px) { html[data-k-profiel="9"] .p2-rechts > div:first-child { grid-column: 1; } }
/* smaller dan 1101 px: geen kader om het portret, verder de bestaande opbouw */
@media (max-width: 1100px) {
  html[data-k-profiel="9"] .pf .to-portret::after { display: none; }
  html[data-k-profiel="9"] .pf .to-portret { background: none; }
}

/* lage voet weg (feedback ttwwoo V5, 9 nov): overal weer de grote voet met het woordmerk en het pand */

/* ---------- Menu 16 (gekozen, 6 nov; ronde 4 Jochem): bij aanwijzen een geel vlakje achter elke menuknop, geen lijntjes meer.
   De pagina waar je bent heeft het gele vlakje vast. Bij bijworkx.nl en workxin.nl blijft de regel eronder vrij. ---------- */
@media (min-width: 861px) {
  html[data-k-menu="16"] .kop-balk .hoofdmenu > li > a { isolation: isolate; }
  html[data-k-menu="16"] .kop-balk .hoofdmenu > li > a::after { display: none !important; }
  html[data-k-menu="16"] .kop-balk .hoofdmenu > li > a::before { content: ""; position: absolute; inset: 2px -8px 3px; z-index: -1; border-radius: 2px; background: var(--geel); opacity: 1; transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); } /* het gele vlak schuift van links naar rechts in, zoals elders (7 nov) */
  html[data-k-menu="16"] .kop-balk .hoofdmenu .menu-extern a::before { inset: 4px -8px 11px; }
  html[data-k-menu="16"] .kop-balk .hoofdmenu > li > a:is(:hover, :focus-visible, [aria-current="page"])::before { opacity: 1; transform: none; }
  html[data-k-menu="16"] .kop-balk .hoofdmenu > li > a:is(:hover, :focus-visible) { color: var(--inkt); }
  html[data-k-menu="16"] .kop-balk .bw-glijder { display: none !important; }
  html[data-k-menu="16"] .kop-balk .taal a.actief { text-decoration: none; font-weight: 500; }
}

/* ---------- Werken bij op home: het poppetje groter, zoals in de mockup van ttwwoo ---------- */
.wb2 .wb2-icoon { width: 58px; height: 58px; }
@media (max-width: 860px) { .wb2 .wb2-icoon { width: 48px; height: 48px; } }

/* menu 13-16: de knoppen naar bijworkx en WorkxIN pas tonen als ttwwoo-v2.js de sitenaam erin heeft gezet; anders flitste eerst
   nog even "Vacatures" en "Detachering" (melding Jochem 7 nov) */
html.js:is([data-k-menu="13"],[data-k-menu="14"],[data-k-menu="15"],[data-k-menu="16"]) .kop-balk .hoofdmenu:not(.wx-menu-klaar) { visibility: hidden; animation: wxMenuToon 0s linear 1.2s forwards; }
@keyframes wxMenuToon { to { visibility: visible; } }
/* (het hele menu: bij het laden stond eerst heel even het oorspronkelijke menu, met Vacatures en Detachering, in beeld; ttwwoo-v2.js
   zet .wx-menu-klaar zodra de knoppen klaar zijn, en na 1,2 s verschijnt het hoe dan ook) */

/* Doorklikpagina's (wens Jochem 7 nov): de experts precies zoals het team op home, met hetzelfde gele naamblok en het plusje
   (ttwwoo-v2.js verhuist het knopje ook hier van de foto naar het naamblok) */
.dk-mensen .lid { box-shadow: none; background: none; padding: 0; }
.dk-mensen .lid::after { display: none; }
.dk-mensen .lid:hover { transform: none; }
.dk-mensen .lid .foto { border-radius: var(--hoek) var(--hoek) 0 0; background: var(--tegel); }
.dk-mensen .lid .naam { margin: 0; padding: 10px 14px 9px; font-size: 18px; }
.dk-mensen .lid .foto { background: var(--wit); }
.dk-mensen .lid .naam { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 0;
  padding: clamp(13px, 1.2vw, 17px) calc(clamp(13px, 1.2vw, 17px) + 52px) clamp(12px, 1.15vw, 16px) clamp(14px, 1.35vw, 20px);
  font-size: clamp(19px, 1.55vw, 23px); line-height: 1.12; }
.dk-mensen .lid .naam .tk-badge { position: absolute; right: clamp(12px, 1.1vw, 16px); top: 50%; bottom: auto; width: 42px; height: 42px; margin-top: -21px;
  background: none; box-shadow: none; border: 1.5px solid var(--inkt); opacity: 1; transform: none; visibility: visible; }
.dk-mensen .lid .naam .tk-badge svg { width: 20px; height: 20px; }
.dk-mensen .lid:hover .naam .tk-badge, .dk-mensen .lid.tk-open .naam .tk-badge { background: var(--inkt); color: var(--geel); }
@media (max-width: 860px) {
  .dk-mensen .lid .naam { font-size: 16.5px; padding: 10px 46px 9px 11px; }
  .dk-mensen .lid .naam .tk-badge { width: 32px; height: 32px; margin-top: -16px; right: 8px; }
  .dk-mensen .lid .naam .tk-badge svg { width: 16px; height: 16px; }
}

/* Onepagers op Werkgevers (7 nov): dezelfde opbouw en opmaak als op Kennis & actueel (overgenomen uit ttwwoo-v2-kennis.css) */
.dk-op-sectie .v2-op, .dk-op-sectie .v2-ls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; margin-top: clamp(8px, 1vw, 16px); }
.dk-op-sectie .v2-hr-lijst { border-top: 1px solid var(--lijn); }
.dk-op-sectie .v2-hr { border-bottom: 1px solid var(--lijn); }
.dk-op-sectie .v2-hr-kop { margin: 0; font: inherit; }
.dk-op-sectie .v2-hr-knop { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 14px 10px 13px 0; border: 0; background: none; color: var(--inkt); font: inherit; font-size: 19px; line-height: 1.3; letter-spacing: .01em; text-align: left; cursor: pointer; transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.dk-op-sectie .v2-hr-titel { flex: 0 1 auto; }
.dk-op-sectie .v2-hr-tel { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--geel); font-size: 12px; font-weight: 500; letter-spacing: 0; line-height: 1; }
.dk-op-sectie .v2-hr-icoon { flex: none; margin-left: auto; width: 22px; height: 22px; transition: transform .35s var(--ease); }
.dk-op-sectie .v2-hr-icoon svg { display: block; width: 100%; height: 100%; }
.dk-op-sectie .v2-hr-knop:hover .v2-hr-titel { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.dk-op-sectie .v2-hr.open .v2-hr-knop { background: var(--geel); }
.dk-op-sectie .v2-hr.open .v2-hr-knop:hover .v2-hr-titel { text-decoration: none; }
.dk-op-sectie .v2-hr.open .v2-hr-tel { background: var(--wit); }
.dk-op-sectie .v2-hr.open .v2-hr-icoon { transform: rotate(45deg); }
.dk-op-sectie .v2-hr-paneel { padding: 16px 0 20px; }
.dk-op-sectie .v2-op-voorbeeld { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 12px 24px -16px rgba(0, 0, 0, .35); }
.dk-op-sectie .v2-op-voorbeeld img { display: block; width: 100%; height: auto; }
.dk-op-sectie .v2-op-items { display: grid; gap: 4px; max-height: 236px; overflow-y: auto; margin: 0; padding: 0 12px 0 0; list-style: none; overscroll-behavior: contain; }
.dk-op-sectie .v2-op-items a { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; color: var(--grijs); font-size: 16px; line-height: 1.35; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dk-op-sectie .v2-op-items a svg { flex: none; width: 17px; height: 17px; color: var(--inkt); transition: transform .25s var(--ease); }
.dk-op-sectie .v2-op-items a:hover, .dk-op-sectie .v2-op-items a:focus-visible { color: var(--inkt); }
.dk-op-sectie .v2-op-items a:hover svg { transform: translateY(2px); }
.dk-op-sectie .v2-hr.open .v2-hr-knop { box-shadow: -14px 0 0 var(--geel), 14px 0 0 var(--geel); }
.dk-op-sectie .v2-op { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 860px) { .dk-op-sectie .v2-op { grid-template-columns: minmax(0, 1fr); } .dk-op-sectie .v2-op-voorbeeld { max-width: 420px; } .dk-op-sectie .v2-hr-knop { font-size: 17px; } }

/* ---------- Menu 16 op mobiel (7 nov, Jochem): net als op de laptop het webadres als knop (BijWorkx.nl, WorkxIN.nl)
   met wat je er vindt klein eronder; het tellertje valt weg, zoals op de laptop. ---------- */
@media (max-width: 860px) {
  html[data-k-menu="16"] .hoofdmenu .menu-extern a > span:first-child, html[data-k-menu="16"] .hoofdmenu .menu-extern .menu-tel, html[data-k-menu="16"] .hoofdmenu .menu-extern .menu-webadres { display: none; }
  html[data-k-menu="16"] .hoofdmenu .menu-extern a { position: relative; }
  html[data-k-menu="16"] .hoofdmenu .menu-extern .menu-site2 { display: inline; }
  html[data-k-menu="16"] .hoofdmenu .menu-site2 small { position: absolute; left: 0; top: calc(100% - 8px); font-size: 15px; line-height: 1.2; color: var(--zacht); white-space: nowrap; pointer-events: none; }
  html[data-k-menu="16"] .hoofdmenu li.menu-extern { margin-bottom: 14px; }
}