/* =========================================================================
   Workx Advocaten — conceptversie (alleen lokaal, ter inspiratie)
   Uitgangspunt: dezelfde site, maar strakker afgewerkt.
   ========================================================================= */
@font-face { font-family: "PP Neue Montreal"; src: url(fonts/PPNeueMontreal-Book.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url(fonts/PPNeueMontreal-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url(fonts/PPNeueMontreal-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url(fonts/PPNeueMontreal-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --geel: #f9ff85;
  --geel-diep: var(--geel); /* was #f3fa6a; één geel: R249 G255 B133 (ttwwoo V5, 9 nov) */
  --inkt: #1e1e1e;
  --tekst: #2b2b2b;
  --grijs: #414042;
  --zacht: #6b6b6b;
  --lijn: #cfd0c8;
  --beige: #e6e7de;
  --tegel: #f4f4f2;
  --wit: #fff;
  /* afgeleide tinten (normfix 28 okt): de vaste kleuren die al in gebruik waren, nu als token op één plek.
     Zelfde waarden als voorheen (tinten die ≤ 5 per kanaal van elkaar of van een basistoken lagen zijn samengevoegd).
     Nieuw werk gebruikt eerst de basistokens hierboven. */
  --groen-open: #3fbf6a;          /* stip 'vacatures open' */
  --fout: #b3261e;           /* foutmelding, ongeldig veld */
  --veld-hint: #6b6b66;      /* placeholder in velden */
  --papier: #fbfbfa;         /* net-niet-wit kaartvlak (team, lid) */
  --vlak-hover: #ededea;     /* hover op lichte velden en opties */
  --spoor: #deded7;          /* lege meter / lijntjes in schema's */
  --schakel: #c9c9c2;        /* schakelaar uit */
  --steen: #9a9a96;          /* zachte tekst op inkt, rand 'aangekondigd' */
  --steen-donker: #8a8a84;   /* stippellijn onder begrippen, lijnen in tekeningen */
  --steen-licht: #b9b9b3;    /* bijschrift op inkt, uitgeschakelde letter */
  --mos: #a9ab9f;            /* golven op de 404 */
  --op-inkt: #f1f1ee;        /* tekst op inkt */
  --op-inkt-2: #e9e9e4;      /* tekst op inkt (contactblok doorklik) */
  --op-inkt-3: #e1e1dc;      /* slotzin op inkt (doorklik) */
  --geel-licht: #fbfce9;     /* citaatvlak */
  --geel-waas: #fbfde0;      /* verloop hoes */
  --grijs-midden: #555;      /* korte tekst op kenniskaart */
  --inkt-licht: #262626;     /* vlak in de avondtekening */
  /* werken bij (bijworkx.nl): eigen kleuren van de tekeningen, de agenda, de groepschat en het donkere formulier.
     Waarden zijn letterlijk overgenomen uit werken-bij.css (normfix T10, 29 okt), het beeld is ongewijzigd. */
  --zwart: #000;             /* filmvlak, video */
  --op-inkt-4: #d9d9d2;      /* lopende tekst op inkt (spotlight, deal) */
  --label-op-inkt: #8f8f88;  /* 'optioneel' bij een veldlabel op inkt */
  --veld-rand-donker: #5a5a55; /* rand invoerveld op inkt */
  --fout-op-inkt: #ff8d7a;   /* foutrand uploadvak op inkt */
  --groen-stip: #2fbf71;     /* stip in de plakknop */
  --strook: #161615;         /* filmstrook */
  --strook-gat: #efeee6;     /* perforatie filmstrook */
  --boom-lijn: #4a4a48;      /* lijnen van de boom achter het pand */
  --boom-hover: #fbffd6;     /* boomkruin bij hover */
  --lamp-glans: #fdffd0;     /* lampjes in de boom, op hun felst */
  --ladder-lijn: #d8d8d0;    /* groeiladder: stip */
  --ladder-tekst: #b0afa8;   /* groeiladder: nog niet bereikt */
  --vink-aan: #fcfde6;       /* aangevinkte optie */
  --raster-vlak: #fafaf6;    /* vak in het boekenraster */
  --agenda-werk: #e3e7e6;    /* agenda: werk */
  --agenda-sport: #a9dcf5;   /* agenda: sport & privé */
  --agenda-team: #cbe8c4;    /* agenda: Team Workx */
  --agenda-thuis: #efe6cf;   /* agenda: thuiswerkdag */
  --agenda-thuis-vlak: #f7f1e1; --agenda-thuis-lijn: #ece3c9; --agenda-thuis-rand: #d9cba3;
  --agenda-vrij: #f0f0ea;    /* agenda: parttimedag */
  --agenda-teams: #e8e9fa;   /* agenda: label 'via Teams' */
  --agenda-legenda: #55554f; /* agenda: legenda */
  --roze: #e9a9a0; --blauw: #9fb7d9; --groen: #a9c7a0; /* accent vacatures en zakenring */
  --chat-erika: #b4547a; --chat-wies: #3f7ba8; --chat-emma: #8a6d00; --chat-heleen: #547a34; --chat-kay: #9a5b2f; --chat-alexander: #6b5aa8; /* namen in de groepschat */
  --chat-typt: #587a24;      /* 'typt…' in de groepschat (4,97:1 op wit, AA) */
  --chat-bol-jij: #3a3a38;   /* typbolletjes van 'jij' */
  --lijn-op-inkt: #3a3a3a;   /* WorkxIN: scheidingslijn en lege voortgangsbalk op inkt (normfix 29 okt, waarde uit workx-in.css) */
  --stap-uit: #a3a49b;       /* WorkxIN: stap die nog niet aan de beurt is ('Zo werkt het') */
  --rand: clamp(20px, 5vw, 56px);
  --breed: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --kop: clamp(26px, 2.3vw, 32px);
  --brood: clamp(17px, 1.25vw, 19px);
  color-scheme: only light; --hoek: 14px; --pijl-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E"); --taalkeuze-en: visible;
}
/* altijd licht (keuze Jochem 1 nov): geen automatische donkere modus die het ontwerp verminkt; wel meer contrast op verzoek */
@media (prefers-contrast: more) { :root { --zacht: #4f4f4f; --ladder-tekst: #6e6d66; --stap-uit: #66675f; } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
/* vangnet: wat een paar px over de rechterrand steekt (kop op 861-990 px, lange woorden) geeft geen zijwaartse scroll */
html { overflow-x: clip; }
/* dynamische titels en samenvattingen uit het dashboard (lange woorden, url's) breken binnen de kolom */
.x-pod h2, .x-pod p, .kn-sem h3, .kn-sem p, [data-ev-titel] { overflow-wrap: anywhere; } /* geen blauwgrijs tikvlak (werken bij had het al uit; testronde 1 nov) */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; background: var(--wit); color: var(--tekst);
  font-family: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--brood); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
strong, b { font-weight: 500; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.12; color: var(--inkt); }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: calc(var(--breed) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--inkt); color: var(--wit); padding: 10px 14px; }
.skip:focus { top: 12px; }

/* ------------------------------------------------------------------ links */
.lijnlink {
  text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px; transition: background-size .35s var(--ease);
}
.lijnlink:hover { background-size: 0 1px; background-position: 100% 100%; }
.pijllink { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; font-weight: 400; }
.pijllink span { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; }
.pijllink svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease); position: relative; top: -1.5px; }
.pijllink:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------ header */
.kop-balk {
  position: sticky; top: 0; z-index: 50; height: 88px;
  background: rgba(255,255,255,0);
}
.kop-balk .wrap { height: 100%; display: flex; align-items: center; gap: 40px; }
.logo { position: relative; flex: none; width: 150px; align-self: flex-start; display: block; transition: width .3s var(--ease); view-transition-name: logo; }
.logo svg { width: 100%; height: auto; display: block; }
.hoofdmenu { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.hoofdmenu a {
  text-decoration: none; font-size: 18px; color: var(--grijs); position: relative; padding: 6px 0; white-space: nowrap;
}
.hoofdmenu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--inkt);
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.hoofdmenu a:hover::after, .hoofdmenu a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.hoofdmenu a[aria-current="page"] { color: var(--inkt); }
/* tikvlak ≥ 44px voor het menu naast elkaar, ook op touch-tablets liggend (::after is de onderstreping) */
@media (min-width: 861px) { .hoofdmenu a::before { content: ""; position: absolute; inset: -7px -6px; } }
.taal { margin-left: auto; display: flex; gap: 6px; font-size: 17px; color: var(--zacht); view-transition-name: taal; }
.taal a { text-decoration: none; }
.taal a.actief { color: var(--inkt); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
@media (hover: hover) { .taal a[hreflang]:hover { color: var(--inkt); } } /* aanwijzen: even donker als de actieve taal; de onderlijn blijft voor de actieve taal */
.menuknop { display: none; }
.kop-balk.compact { height: 68px; box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.kop-balk.compact .logo { width: 116px; }

/* ------------------------------------------------------------------ sectiekoppen (huisstijl: hoofdletters, Book + Medium) */
.sectiekop { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.sectiekop .icoon { width: 44px; height: 44px; }
.sectiekop .icoon svg { width: 100%; height: 100%; }
.sectiekop h1, .sectiekop h2 { font-size: var(--kop); text-transform: uppercase; letter-spacing: .005em; line-height: 1.12; }
.sectiekop h1 strong, .sectiekop h2 strong { font-weight: 500; }
.sectiekop h1::after, .sectiekop h2::after {
  content: ""; display: block; width: 230px; height: 30px; margin-top: 6px;
  background: url(img/schaduw-1.png) 10px 0 / contain no-repeat; mix-blend-mode: multiply; opacity: .75;
}
.zonder-schaduw h2::after, .zonder-schaduw h1::after { display: none; }

/* ------------------------------------------------------------------ hero (ongewijzigd beeld, zelfde intro-animatie) */
.held { position: relative; margin-top: -88px; padding: 0 var(--rand); overflow: hidden; }
.held-binnen { position: relative; max-width: 1080px; margin: 0 auto; height: min(860px, 100svh); min-height: 640px; display: flex; align-items: center; justify-content: center; }
.held-bg { position: absolute; inset: 0 -3rem -2rem; background: url(img/grunge-header.png) 50% 92% / 80% no-repeat; animation: bgIn 1s ease-out both; }
.held-pand { position: absolute; top: 12%; right: 13%; width: clamp(220px, 30vw, 350px); animation: pandIn .75s ease-out .08s both; --kb-nabij: 0; }
.held-titel { position: relative; z-index: 2; width: min(735px, 80vw); margin-top: 12%; margin-left: 6%; animation: titelIn 1s ease-out both; pointer-events: none; }
.held-titel svg { width: 100%; height: auto; display: block; }
.held-titel h1, .held-titel a { pointer-events: auto; }
.held-titel h1 { position: absolute; right: -2%; bottom: -12%; background: var(--geel); padding: 10px 20px 9px; font-size: clamp(16px, 1.8vw, 25px); line-height: 1; text-transform: uppercase; transform: rotate(-1.5deg); color: var(--inkt); animation: tagIn .6s var(--ease) 1.4s both; }
.held-titel h1 strong { font-weight: 700; }
.vogel { position: absolute; z-index: 3; animation: vogelIn .6s ease-out 1.1s both; will-change: transform, opacity; }
.vogel svg { width: 100%; height: auto; display: block; }
.v1 { width: 100px; left: 18%; top: 11%; }
.v2 { width: 185px; left: 5%; top: 42%; animation-name: vogelLinks; }
.v3 { width: 85px; left: 48%; top: 25%; }
.v4 { width: 125px; right: 4%; top: 33%; animation-name: vogelRechts; }
.v5 { width: 125px; right: 9%; top: 11%; }
.scrollknop { position: absolute; left: 50%; bottom: 7%; width: 68px; height: 68px; margin-left: -34px; border-radius: 50%; background: var(--geel); display: grid; place-items: center; z-index: 4; animation: tagIn .5s ease-out 1.7s both; transition: transform .3s var(--ease); }
.scrollknop:hover { transform: translateY(3px); }
.scrollknop svg { width: 26px; height: 26px; }
@keyframes bgIn { from { opacity: .001; transform: scale(1.03); } }
@keyframes pandIn { from { opacity: .001; transform: translateY(18px); } }
@keyframes titelIn { from { opacity: .001; transform: translateY(12px); } } /* .001: onzichtbaar, telt wel meteen mee voor de LCP */
@keyframes tagIn { from { opacity: 0; transform: translateY(8px) rotate(-1.5deg); } }
@keyframes vogelIn { from { opacity: 0; } }
@keyframes vogelLinks { from { opacity: 0; transform: translateX(-30px); } }
@keyframes vogelRechts { from { opacity: 0; transform: translateX(30px); } }

/* ------------------------------------------------------------------ algemeen sectieritme */
.sectie { padding-block: clamp(72px, 9vw, 128px); }
.raster { display: grid; grid-template-columns: 4fr 8fr; gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.beige { background: var(--beige); }
.geel { background: var(--geel); }
/* fotobaan */
.fotobaan { position: relative; background: linear-gradient(var(--wit) 50%, var(--beige) 50%); }
.baan { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 30px) / 2); gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.baan::-webkit-scrollbar { display: none; }
.baan figure { margin: 0; scroll-snap-align: start; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 11; background: var(--tegel); }
.baan img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.baan figure:hover img { transform: scale(1.025); }
.baan-nav { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: 26px; }
.stippen { display: flex; gap: 2px !important; }
.stippen button { width: 38px !important; height: 24px !important; background: none !important; padding: 0; cursor: pointer; transition: background-color .3s, width .3s var(--ease); position: relative; display: grid; place-items: center; }
.stippen button[aria-current="true"] { background: var(--inkt); width: 50px !important; }
.pijl { height: 44px; border-radius: 50%; border: 1.5px solid var(--inkt); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color .25s; }
.pijl:hover { background: var(--inkt); color: var(--wit); }
.pijl svg { width: 18px; height: 18px; }
/* doelgroepenlijsten */
.doellijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--inkt); }
.doellijst li { border-bottom: 1px solid var(--inkt); }
.doellijst a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 4px 18px 0; text-decoration: none; font-size: clamp(20px, 1.6vw, 23px); color: var(--inkt);
  transition: padding .35s var(--ease); position: relative; z-index: 0;
}
.doellijst a .plus { width: 22px; height: 22px; flex: none; position: relative; transition: transform .35s var(--ease); }
.doellijst a .plus::before, .doellijst a .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); }
.doellijst a .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.doellijst a:hover { padding-left: 14px; }
.doellijst a:hover .plus { transform: rotate(90deg); }
.doelgroepen .sectie + .sectie { padding-top: 0; }
/* erkenningen */
/* team-overzicht */
.team-sectie { position: relative; }
.team-raster { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 22px; }
.lid { display: block; text-decoration: none; background: var(--papier); border-radius: 12px; padding: 6px 6px 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -16px rgba(0,0,0,.18); transition: transform .4s var(--ease); position: relative; isolation: isolate; }
/* de diepere schaduw bij aanwijzen zit op ::after en komt op via opacity (beweging alleen via transform/opacity) */
.lid::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 18px 34px -18px rgba(0,0,0,.28); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; }
.lid:hover::after { opacity: 1; }
.lid .foto { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px 8px 0 0; background: var(--wit); }
.lid img { position: absolute; max-width: none; height: auto; transition: transform .45s var(--ease); }
.lid .naam { display: block; margin: 12px 10px 0; background: var(--geel); padding: 6px 10px 5px; font-size: 17px; line-height: 1.2; color: var(--inkt); }
.lid:hover { transform: translateY(-4px); }
.lid:hover img { transform: scale(1.045); }
/* gele banieren (relaties / transitievergoeding) */
.banier { padding-block: clamp(56px, 6vw, 88px); overflow: hidden; }
.banier .wrap { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); }
.banier .wrap:not(:has(> img)) { grid-template-columns: minmax(0, 1fr); } /* klantenpagina: zonder de boekentekening (onscherp, Jochem 31 okt) */
.banier .wrap > img { width: 200px; transform: rotate(-2deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.08)); }
.banier h2 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; max-width: 25ch; }
.banier h2 .hart { display: inline-block; width: .7em; height: .7em; vertical-align: -.02em; margin-left: .15em; }
.banier .pijllink { margin-top: 26px; font-size: 20px; color: var(--inkt); }
/* nieuws */
.nieuws { display: grid; grid-template-columns: 4fr 8fr; gap: 40px clamp(32px, 6vw, 96px); margin-top: 48px; }
.nieuws time { display: block; font-size: 16px; letter-spacing: .04em; color: var(--zacht); margin-bottom: 14px; }
.nieuws h3 { font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; line-height: 1.25; margin-bottom: 18px; max-width: 30ch; }
.nieuws h3 a { text-decoration: none; }
.nieuws p { max-width: 62ch; color: var(--grijs); }
.nieuws .links { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 24px; }
/* contact */
.contact { background: linear-gradient(var(--geel) 0 62%, var(--inkt) 62% 100%); padding-top: clamp(64px, 7vw, 100px); padding-bottom: 56px; }
.contact .sectiekop { margin-bottom: 40px; }
.contact .sectiekop h2::after { opacity: .5; }
.formulier { background: var(--wit); border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; padding: 36px 40px 32px; box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.formulier textarea, .formulier input { width: 100%; font: inherit; font-size: 18px; color: var(--inkt); border: 0; background: transparent; resize: none; }
.formulier textarea { min-height: 220px; padding: 16px 24px 0 0; border-right: 1px solid var(--lijn); }
/* naast elkaar: het berichtveld vult de rijhoogte, zodat de scheidingslijn tot de onderkant van de rechterkolom loopt */
@media (min-width: 861px) { .formulier label:has(> textarea) { display: flex; } .formulier label > textarea { flex: 1 1 auto; } }
.formulier .velden { display: flex; flex-direction: column; }
.formulier label { display: block; position: relative; }
.formulier input { padding: 16px 0 14px; border-bottom: 1px solid var(--lijn); transition: border-color .25s; }
.formulier input:focus, .formulier textarea:focus { outline: none; }
.formulier input:focus { border-bottom-color: var(--inkt); }
.formulier ::placeholder { color: var(--veld-hint); }
.formulier .verstuur { align-self: flex-end; margin-top: 26px; border: 0; background: var(--geel); color: var(--inkt); padding: 14px 24px; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background-color .25s, transform .25s var(--ease); }
.formulier .verstuur:hover { background: var(--geel-diep); transform: translateY(-1px); }
.formulier .verstuur svg { width: 18px; height: 18px; }
/* contactformulier op de startpagina staat op een witte kaart: dan is de primaire knop zwart */
.pagina-home .formulier .verstuur { background: var(--inkt); color: var(--wit); }
.pagina-home .formulier .verstuur:hover, .pagina-home .formulier .verstuur:focus-visible { background: var(--inkt); color: var(--inkt); transform: none; }
.formulier .melding { grid-column: 1 / -1; font-size: 15px; color: var(--zacht); margin: 18px 0 0; }
/* foutmelding (script.js zet .fout): fouttoken, contrast AA (6,5:1 op wit); form. ervoor zodat ook de contactpagina (.ep-contact) hem rood toont */
form.formulier .melding.fout { color: var(--fout); }
.formulier input[aria-invalid="true"], .formulier textarea[aria-invalid="true"] { border-color: var(--fout); } /* ook als het veld focus heeft */
/* footer */
.voet { background: var(--inkt); color: var(--op-inkt); }
.voet a { text-decoration: none; }
.voet a:hover { text-decoration: underline; text-underline-offset: 4px; }
.voet-boven { display: grid; grid-template-columns: 1fr 1fr 1fr 300px; gap: 32px; padding-top: 48px; font-size: 17px; line-height: 1.7; }
.voet-merk { display: grid; grid-template-columns: 1fr 300px; align-items: end; gap: 32px; padding-block: 24px 48px; }
.voet-merk .woord svg { width: min(720px, 100%); height: auto; display: block; }
.voet-merk .woord svg path { fill: var(--wit); }
.voet-merk .pand { width: 247px; justify-self: end; margin-top: -170px; }   /* 247 = de echte breedte van de bron (eindtoets 31 okt, 5b): niet opschalen */
.voet-juridisch { border-top: 1px solid rgba(255,255,255,.14); }
.voet-juridisch ul { list-style: none; margin: 0; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 40px; font-size: 16px; }
/* footerlink 'Cookie-instellingen' (toestemming.js): een knop die eruitziet als de andere voetlinks */
.voet-juridisch .wx-ts-link { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
.voet-juridisch .wx-ts-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.14); padding: 18px 0 22px; font-size: 15px; color: var(--steen); }
.voet-onder .wrap { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; }
/* naar boven */
.naarboven { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 40; border-radius: 50%; border: 0; background: var(--inkt); color: var(--wit); display: grid; place-items: center; cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 8px 20px -8px rgba(0,0,0,.4); visibility: hidden; height: 44px; }
.naarboven.zichtbaar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.naarboven svg { width: 20px; height: 20px; }
.naarboven:focus-visible { outline: 2px solid var(--wit); outline-offset: 3px; box-shadow: 0 0 0 6px var(--inkt); } /* zichtbaar op wit én op de zwarte footer */
/* conceptlabel */

/* ------------------------------------------------------------------ rustig in beeld komen (alleen met JS, niet bij reduced motion) */
/* .001 i.p.v. 0: onzichtbaar, maar Chrome telt de inhoud dan bij de eerste verf mee voor de LCP (bij 0 pas na afloop van de overgang) */
.js [data-in] { opacity: .001; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--vertraging, 0s); }
.js [data-in].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ pagina-intro (relaties/team) */
.pagina-kop { padding-top: clamp(56px, 7vw, 96px); padding-bottom: 8px; }
/* kruimelpad op losse subpagina's (podcasts, transitievergoeding) zonder doorklik.css: zelfde maat en afstand als .dk-kruimel op de doorklikpagina's (titel op dezelfde hoogte) */
.pagina-kop.met-kruimel { padding-top: clamp(40px, 5vw, 72px); }
.met-kruimel .dk-kruimel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 40px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.met-kruimel .dk-kruimel a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
.met-kruimel .dk-kruimel a:hover { color: var(--inkt); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.met-kruimel .dk-kruimel [aria-current] { color: var(--inkt); }
.x-podkop > .dk-kruimel { grid-column: 1 / -1; margin-bottom: 8px; } /* rijtussenruimte 32 + 8 = 40 */
@media (max-width: 860px) { .x-podkop > .dk-kruimel { order: -2; } }

/* ------------------------------------------------------------------ relaties */
.filter { margin-top: 36px; display: flex; flex-wrap: wrap; }
.filter button {
  border: 0; background: none; cursor: pointer; padding: 8px 12px 7px; border-radius: 40px;
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht);
  transition: background-color .25s, color .25s;
}
.filter button:hover { color: var(--inkt); background: var(--tegel); }
.filter button .aantal { margin-left: 6px; }
.relatie-telling { margin-top: 22px; font-size: 15px; color: var(--zacht); min-height: 1.5em; }
.relatie-telling .hart { display: inline-block; width: 1em; height: auto; vertical-align: -.12em; margin-left: .3em; }
.relatie-raster { margin-top: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* tegels en logo's samen in beeld: het raster wacht (kort, hooguit 1 s) tot de eerste rijen logo's klaar zijn (script.js) */
.relatie-raster.rel-wacht { opacity: 0; }
.relatie-raster:not(.rel-wacht) { transition: opacity .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .relatie-raster:not(.rel-wacht) { transition: none; } }
@media (max-width: 1100px) { .relatie-raster { grid-template-columns: repeat(3, 1fr); } }
.relatie { position: relative; }
.relatie.verborgen { display: none; }
.relatie-tegel {
  width: 100%; aspect-ratio: 340 / 198; border: 0; border-radius: 12px; background: var(--tegel); cursor: pointer;
  display: block; position: relative; padding: 0;
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.relatie-tegel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 16px 30px -22px rgba(0,0,0,.35); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.relatie-tegel:hover::after { opacity: 1; }
.relatie-tegel .logo-vak { position: absolute; inset: 24% 17%; display: block; }
.relatie-tegel img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) var(--toon,); opacity: .86; mix-blend-mode: multiply; transition: filter .4s, opacity .4s, transform .5s var(--ease); }
/* optillen via de (stilstaande) kaart eromheen: anders flikkerde de hover als de muis net aan de onderrand stond (tegel schoof
   onder de muis vandaan en weer terug); alleen met een echte muis (op tablets bleef de tegel na een tik opgetild) */
@media (hover: hover) { .relatie:hover > .relatie-tegel { transform: translateY(-3px); } }
.relatie-tegel:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.03); }
.relatie-tegel[aria-expanded="true"] { background: var(--geel); }
.relatie-tegel[aria-expanded="true"] img { filter: grayscale(1) var(--toon,) contrast(1.1); opacity: 1; }
.relatie-detail { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease), margin .5s var(--ease); margin-block: -11px; }
.relatie-detail.open { grid-template-rows: 1fr; margin-block: 12px; }
.relatie-detail > div { overflow: hidden; }
.relatie-detail .binnen { display: grid; opacity: 0; transform: translateY(-6px); transition: opacity .4s .1s, transform .4s .1s var(--ease); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px clamp(24px, 4vw, 64px); }
.relatie-detail.open .binnen { opacity: 1; transform: none; }
.relatie-detail h3 { grid-column: 1 / -1; font-weight: 500; margin: 0; }
.relatie-detail p { margin: 0; color: var(--grijs); font-size: 17px; line-height: 1.65; }
.relatie-detail .sectorlabels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.relatie-detail .sectorlabels span { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border-radius: 30px; color: var(--zacht); }
 /* witregel tussen de gele banier en de footer (relaties) */

/* ------------------------------------------------------------------ teampagina */
.teamlid { padding-block: clamp(56px, 6vw, 88px); }
.teamlid:nth-of-type(odd) { background: var(--beige); }
.teamlid .wrap { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 6vw, 96px); }
.teamlid .lid { pointer-events: none; }
.teamlid p:not(.tk *) { max-width: 50ch; color: var(--grijs); } /* niet in de profielkaart (.tk): die houdt de eigen maten en kleuren, zoals op home */
.teamlid .pijllink { margin-top: 8px; color: var(--inkt); }

/* ------------------------------------------------------------------ tablet */
@media (max-width: 1100px) {
  .hoofdmenu { gap: 20px; }
  .hoofdmenu a { font-size: 16px; }
  .voet-boven { grid-template-columns: 1fr 1fr 1fr; }
  .voet-boven .ruimte { display: none; }
  .voet-merk { grid-template-columns: 1fr 200px; }
  .voet-merk .pand { width: 200px; margin-top: 0; }
}

/* ------------------------------------------------------------------ mobiel */
@media (max-width: 860px) {
  :root { --brood: 17px; }
  .kop-balk { height: 72px; }
  .kop-balk .wrap { gap: 16px; }
  .logo { width: 112px; }
  .kop-balk.compact { height: 60px; }
  .kop-balk.compact .logo { width: 92px; }
  .menuknop { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: 4px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; z-index: 3; }
  .menuknop span, .menuknop span::before, .menuknop span::after { display: block; width: 24px; height: 1.6px; background: var(--inkt); position: relative; transition: transform .35s var(--ease), background-color .2s; }
  .menuknop span::before, .menuknop span::after { content: ""; position: absolute; left: 0; }
  .menuknop span::before { top: -7px; } .menuknop span::after { top: 7px; }
  .menu-open .menuknop span { background: transparent; }
  .menu-open .menuknop span::before { transform: translateY(7px) rotate(45deg); }
  .menu-open .menuknop span::after { transform: translateY(-7px) rotate(-45deg); }
  .hoofdmenu {
    position: fixed; inset: 0; z-index: 2; background: var(--wit); flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain;
    padding: 110px var(--rand) 40px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .hoofdmenu a { font-size: 30px; display: inline-block; padding: 6px 0; }
  .hoofdmenu li { transform: translateY(8px); transition: transform .4s var(--ease); }
  .menu-open .hoofdmenu { opacity: 1; visibility: visible; }
  .menu-open .hoofdmenu li { transform: none; }
  .menu-open .logo, .menu-open .taal { position: relative; z-index: 3; }
  .taal { font-size: 16px; }

  .held { margin-top: -72px; }
  .held-binnen { height: auto; min-height: 0; padding-block: 120px 120px; flex-direction: column; }
  .held-pand { position: relative; top: auto; right: auto; width: 86%; max-width: 380px; margin: 0 auto -38%; }
  .held-titel { width: 92%; margin: 0; }
  .held-titel h1 { right: 0; bottom: -22%; padding: 7px 12px 6px; }
  .held-bg { background-size: 140%; background-position: 50% 80%; }
  .v1 { width: 70px; left: 2%; top: 14%; } .v2 { width: 110px; left: -4%; top: 62%; display: none; } .v3 { width: 60px; left: 70%; top: 13%; }
  .v4 { width: 90px; right: -2%; top: 36%; } .v5 { display: none; }
  .scrollknop { width: 56px; height: 56px; margin-left: -28px; bottom: 28px; }

  .raster, .nieuws { grid-template-columns: minmax(0, 1fr); } /* minmax: lange woorden maken de kolom niet breder dan het scherm (280-320 px) */
  .baan { grid-auto-columns: 86%; gap: 14px; }
  .baan-nav .pijl { display: none; }
  .stippen button { width: 24px !important; height: 8px; } .stippen button[aria-current="true"] { width: 30px !important; border-radius: 6px; }
  .team-raster { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 36px; }
  .lid .naam { margin: 10px 6px 0; font-size: 15.5px; }
  .banier .wrap { grid-template-columns: 1fr; }
  .banier .wrap > img { width: 140px; }
  .formulier { grid-template-columns: 1fr; padding: 24px 22px; }
  .formulier textarea { border-right: 0; border-bottom: 1px solid var(--lijn); min-height: 140px; padding-top: 4px; padding-right: 0; }
  .contact { background: linear-gradient(var(--geel) 0 72%, var(--inkt) 72% 100%); }
  .voet-boven { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-size: 16px; }
  .voet-merk { grid-template-columns: 1fr 110px; gap: 16px; padding-bottom: 32px; }
  .voet-merk .pand { width: 110px; }
  .voet-juridisch ul { gap: 8px 24px; font-size: 15px; }
  .naarboven { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }

  .filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent); }
  .filter::-webkit-scrollbar { display: none; }
  .filter button { flex: none; background: var(--tegel); }
  .relatie-raster { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .teamlid .wrap { grid-template-columns: 1fr; }
  .teamlid .lid { max-width: 260px; }
}
/* ronde pijlknoppen: één maat */
.pijl { width: 44px; }
.naarboven { width: 44px; }
/* Taalkeuze NL/EN (29 okt): onzichtbaar aanraakvlak van minstens 44 x 44 px. Breder naar buiten (18 px),
   smal naar binnen (7 px), zodat de vlakken van NL en EN elkaar niet raken (tussenruimte ca. 15 px). Uiterlijk ongewijzigd.
   Alleen de taallinks zelf (.actief / hreflang); de koplinks van Werken bij in .taal blijven zoals ze zijn. */
.taal a:is(.actief, [hreflang])::before { content: none; }
.taal a:is(.actief, [hreflang])::after { content: ""; position: absolute; inset: -12px -7px; }
.taal a:is(.actief, [hreflang]):first-of-type::after { left: -18px; }
.taal a:is(.actief, [hreflang]):last-of-type::after { right: -18px; }
/* 861-960 px: de rechtermarge is daar kleiner dan 18 px; dan stak het tikvlak buiten beeld en werd de pagina 1-6 px te breed (testronde 31 okt) */
@media (max-width: 960px) { .taal a:is(.actief, [hreflang]):last-of-type::after { right: -7px; } }
/* I · mobiel: footer, klikvlakken, naar-boven-knop niet over tekst */
@media (max-width: 480px) { .voet-boven { grid-template-columns: minmax(0, 1fr); } }
.voet-boven a[href^="mailto"], .voet-boven a[href^="tel"] { white-space: nowrap; }
/* idem voor de filterknoppen: mobiel één scrollrij, tablet drie rijen, laptop twee rijen */
.js .filter:empty:has(+ .relatie-telling) { min-height: 96px; }
@media (max-width: 1230px) { .js .filter:empty:has(+ .relatie-telling) { min-height: 148px; } }
@media (max-width: 860px) { .js .filter:empty:has(+ .relatie-telling) { min-height: 44px; } }
/* EN-schakelaar (domeinoverstap). Elke EN-taalknop is <a hreflang="en"> in .taal (gewone site, doorklik- en
   teampagina's, WorkxIN; Werken bij heeft er geen). Tot de Engelse bouwstraat klaar is: zet 'visible' hieronder
   op 'hidden'. De taalkeuze (NL | EN) verdwijnt dan op alle pagina's, zonder dat er iets in de kopbalk verschuift
   (de ruimte blijft, dus menu en menuknop staan precies waar ze nu staan), en is niet meer te focussen of voor te lezen. */
.taal:has(> a[hreflang="en"]) { visibility: var(--taalkeuze-en); }
@media (max-width: 380px) {
  .relatie-raster { gap: 10px; }
  .hoofdmenu a { font-size: 26px; }
}
/* klantenpagina: ruimte vasthouden tot script.js de tegels heeft gebouwd; anders staat de gele banier eerst
   bovenin beeld en schiet hij daarna weg (layoutverschuiving 0,48 op laptop, 0,61 op mobiel) */
.js .relatie-raster:empty { min-height: 100vh; }

/* ------------------------------------------------------------------ minder beweging */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* iteration-count 1 (normfix 28 okt): een oneindige animatie van .001ms flikkerde anders elk beeld (bv. de 'open'-stip) */
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js [data-in] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ verfijningen */
::selection { background: var(--geel); color: var(--inkt); }
.held-pand svg { width: 100%; height: auto; display: block; transition: transform 1.3s cubic-bezier(.55,0,.25,1), opacity 1.1s ease .15s; }
/* de ramen van het pand gaan één voor één aan */
.held-pand .licht { opacity: 0; animation: lichtAan 1.6s cubic-bezier(.45, 0, .25, 1) forwards; animation-delay: var(--d, 1s); }
@keyframes lichtAan { 0% { opacity: 0; } 100% { opacity: 1; } } /* rustig aan, zonder terugzakken (7 nov: het flikkerde onprettig) */
/* schaduw onder sectiekoppen wordt rustig 'neergelegd' */
.js .sectiekop[data-in] h2::after { transform: scaleX(.55); transform-origin: 0 50%; opacity: 0; transition: transform 1.1s var(--ease) .25s, opacity 1.1s var(--ease) .25s; }
.js .sectiekop[data-in].in h2::after { transform: none; opacity: .75; }
/* doelgroepen: gele markeerstift bij hover, zoals het gele label in het logo */
.doellijst a::before { content: ""; position: absolute; inset: 0 -14px; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.beige .doellijst a::before { background: var(--tegel); }
.doellijst a:hover::before, .doellijst a:focus-visible::before { transform: scaleX(1); }
.conceptlabel.weg { opacity: 0; }
@media (max-width: 860px) {
  .stippen { gap: 7px; }
}
.relatie-tegel img.ruim { transform: scale(1.3); }
.relatie-tegel:hover img.ruim { transform: scale(1.34); }
.relatie-tegel:hover img.gelijk { transform: var(--t) scale(1.03); }
/* aanraakschermen: na een tik blijft de hoverstand niet hangen (29 okt); de geopende tegel houdt zijn gele vlak */
@media (hover: none) { .relatie-tegel:hover { transform: none; } .relatie-tegel:hover::after { opacity: 0; } .relatie-tegel:hover:not([aria-expanded="true"]) img { filter: grayscale(1) var(--toon,); opacity: .86; } .relatie-tegel:hover img.gelijk { transform: var(--t); } .relatie-tegel:hover img.ruim { transform: scale(1.3); } }
.menu-contact { display: none; }
@media (max-width: 860px) {
  .hoofdmenu .menu-contact { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 28px; border-top: 1px solid var(--lijn); font-size: 16px; color: var(--zacht); }
  .hoofdmenu .menu-contact a { font-size: 16px; display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--inkt); overflow-wrap: anywhere; }
  .hoofdmenu .menu-contact a::after { display: none; }
}
/* Kopbalk 861–960 px (normfix 28 okt): logo + zeven menu-items + taalkeuze pasten niet; de taalkeuze schoof
   tot 70 px buiten beeld en de pagina scrolde zijwaarts. Afstanden en menuletter lopen nu vloeiend mee
   (861 px: 24 / 16 / 15 px, vanaf ±960 px weer 40 / 20 / 16 px zoals voorheen; 1024 px en breder ongewijzigd). */
@media (min-width: 861px) and (max-width: 1100px) {
  body:not(.wi):not(.wb-body) .kop-balk .wrap { gap: clamp(24px, 16.16vw - 115.1px, 40px); }
  body:not(.wi):not(.wb-body) .hoofdmenu { gap: clamp(16px, 4.04vw - 18.8px, 20px); }
  body:not(.wi):not(.wb-body) .hoofdmenu a { font-size: clamp(15px, 1.01vw + 6.3px, 16px); }
}

/* =========================================================================
   NIVEAU 3 — scroll-verhaal, avondpand, logoband, calculator, pagina-overgangen
   ========================================================================= */

/* ---------- pagina-overgangen (View Transitions; fallback via JS) ---------- */
@view-transition { navigation: auto; }
.kop-balk nav { view-transition-name: menu; }
/* De nieuwe pagina staat er meteen (zonder eigen fade) en de oude vaagt er in 0,18 s vanaf, erbovenop (bij 0,26 s stonden kop en tekst merkbaar dubbel). Eerder vaagde de oude
   eerst weg (0,32 s) terwijl de nieuwe pas opkwam (0,5 s): daartussen stond een bijna wit scherm (opnames Jochem 1 nov). En
   met de nieuwe pagina vanaf 0 opkomend gaf Chrome soms één helemaal wit beeld als het oude beeld nog niet klaarstond.
   Zo is er altijd iets: de oude pagina, de nieuwe, of beide door elkaar. Geldt ook voor menu, logo en taalkeuze.
   mix-blend-mode normal: met het standaard 'plus-lighter' tellen oud en nieuw op en wordt het beeld even te licht. */
::view-transition-old(*) { animation: vtUit .18s var(--ease) both; mix-blend-mode: normal; z-index: 1; }
::view-transition-new(*) { animation: none; mix-blend-mode: normal; }
::view-transition-group(*) { animation-duration: .26s; animation-timing-function: var(--ease); }
/* het meereizende portret en naamlabel houden hun goedgekeurde tempo */
::view-transition-group(reizend-portret), ::view-transition-group(reizend-naam) { animation-duration: .55s; }
/* het gele naamlabel dat met het portret meereist (team-kaart.js, script.js): niet oud en nieuw door elkaar laten vagen; de
   tekst staat in het kleine en het grote label anders verdeeld, dan stond de naam even dubbel (iPhone-opname Jochem 31 okt).
   Alleen het nieuwe label, dat in verhouding meegroeit van de oude naar de nieuwe maat. */
::view-transition-old(reizend-naam) { display: none; }
::view-transition-new(reizend-naam) { animation: none; }
/* reizend portret: niet oud en nieuw door elkaar laten vervagen (gezicht stond ±0,3 s dubbel: ingezoomd op team, niet op
   het profiel); het nieuwe beeld groeit meteen van de oude naar de nieuwe plek (testronde 1 nov) */
/* Het oude portret blijft wél zichtbaar, onder het nieuwe: is de foto op de nieuwe pagina bij de start nog niet getekend
   (nog niet gedecodeerd of geladen), dan reisde er een leeg vak mee (opname Jochem 1 nov). Het nieuwe portret is een dichte
   foto en bedekt het oude helemaal zodra hij er is; beide vullen precies het vak (cover), dus er steekt niets uit. */
/* 2 nov: toch weer verborgen. De foto's op het teamkaartje en op het profiel zijn anders uitgesneden; de oude stak dan naast de
   nieuwe uit (zwart shirt, opnames Jochem 2 nov). Het lege vak van toen komt niet terug: het profielportret staat op
   decoding=sync en script.js laat het doelportret bij pagereveal synchroon tekenen. */
::view-transition-old(reizend-portret) { display: none; }
::view-transition-new(reizend-portret) { animation: none; mix-blend-mode: normal; }
::view-transition-old(reizend-portret), ::view-transition-new(reizend-portret) { height: 100%; object-fit: cover; }
@keyframes vtUit { to { opacity: 0; } }
/* Binnenkomen via een paginaovergang (html.wx-vt-in, gezet in de kop): wat in het eerste scherm staat, staat er meteen,
   zonder eigen opkomst ná de overgang (anders: wit scherm, dan kop, dan de rest). Wat lager staat krijgt van script.js
   .vt-wacht en komt zoals altijd op bij het scrollen. */
html.wx-vt-in [data-in]:not(.vt-wacht) { opacity: 1; transform: none; transition: none; animation: none; }
html.wx-vt-in [data-in].vt-wacht:not(.in) { transition: none; }
html.wx-vt-in .sectiekop[data-in]:not(.vt-wacht) h2::after { transform: none; opacity: .75; transition: none; }
html.wx-vt-in .tv-blok-intro[data-in]:not(.vt-wacht) .tv-kern li { opacity: 1; transform: none; transition: none; }
/* Vertrek (html.wx-vertrek, script.js bij 'pageswap'): wat nog moest opkomen staat in het vastgelegde beeld van de oude pagina
   meteen in zijn eindstand. Wie vlak na het scrollen klikt, zag anders een bijna lege pagina wegvagen (wit moment). */
html.wx-vertrek [data-in], html.wx-vertrek .lid.bw-p-wacht, html.wx-vertrek .lid.bw-p-wacht img, html.wx-vertrek .lid.bw-p-wacht .naam,
html.wx-vertrek .lid.bw-p-op img, html.wx-vertrek .bw-kop-wacht .bw-wi, html.wx-vertrek [data-to] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
html.wx-vertrek .sectiekop[data-in] h2::after { transform: none !important; opacity: .75 !important; transition: none !important; }
html.wx-vt-in .held-bg, html.wx-vt-in .held-titel, html.wx-vt-in .held-titel h1, html.wx-vt-in .vogel, html.wx-vt-in .scrollknop { animation: none; }
html.wx-vt-in:not(.wx-pen) .held-pand { animation: none; }

/* ---------- scroll-verhaal ---------- */
.verhaal { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(40px, 6vw, 80px); overflow-x: clip; }
.verhaal-raster { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 110px); align-items: start; }
.verhaal-pand { position: sticky; top: max(96px, calc(50vh - 300px)); height: min(600px, 74vh); display: grid; place-items: center; }
.verhaal-svg { width: min(100%, 430px); position: relative; z-index: 1; }
.verhaal-svg svg { width: 100%; height: auto; display: block; }
.verhaal-grond { position: absolute; inset: auto -12% 2% -12%; height: 34%; background: url(img/grunge-header.png) 50% 100% / 100% no-repeat; opacity: .85; -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.verhaal-pand .raam { opacity: .07; transition: opacity 1.1s var(--ease); }
.verhaal-pand .raam.aan { opacity: 1; }
.verhaal-pand .gloed { opacity: 0; transition: opacity 1.6s var(--ease); }
.verhaal-pand .gloed.aan { opacity: 1; }
.verhaal-pand .raam.flits { opacity: 1 !important; transition-duration: .15s; }
.verhaal-meter { position: absolute; left: 0; bottom: 4%; display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; z-index: 2; }
.verhaal-meter li { width: 28px; height: 4px; border-radius: 2px; background: var(--spoor); overflow: hidden; position: relative; }
.verhaal-meter li::after { content: ""; position: absolute; inset: 0; background: var(--inkt); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.verhaal-meter li.aan::after { transform: scaleX(1); }
.verhaal-kop { margin-bottom: 4vh; }
.stap { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding-block: 6vh; opacity: .22; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.stap:last-child { min-height: 60vh; }
.stap.actief, .stap.gezien { opacity: 1; transform: none; }
.stap.gezien:not(.actief) { opacity: .45; }
.stap-icoon { width: 60px; height: 60px; display: block; margin-bottom: 26px; }
.stap-icoon svg { width: 100%; height: 100%; display: block; }
.stap-nr { font-size: 13px; letter-spacing: .14em; color: var(--zacht); margin-bottom: 14px; }
.stap h3 { font-size: clamp(32px, 3.9vw, 58px); font-weight: 500; letter-spacing: -.018em; line-height: 1.04; max-width: 15ch; }
.stap p { font-size: clamp(18px, 1.45vw, 22px); color: var(--grijs); max-width: 38ch; margin: 22px 0 0; line-height: 1.55; }

/* ---------- logoband in de relatiebanier ---------- */
/* klantenbanier: tekst op dezelfde rechterkolom als de andere tweekoloms secties (4/8, x 577 op 1440) */
.banier:not(.banier-smal) .wrap { grid-template-columns: 4fr 8fr; gap: clamp(24px, 6vw, 96px); }
@media (max-width: 860px) { .banier:not(.banier-smal) .wrap { grid-template-columns: 1fr; row-gap: 28px; } }
.logoband { margin-top: clamp(36px, 4vw, 56px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logoband-rail { display: flex; width: max-content; animation: band 140s linear infinite; will-change: transform; backface-visibility: hidden; }
.logoband-item { contain: layout; flex: none; height: 80px; margin-right: 60px; display: flex; align-items: center; }
.logoband:hover .logoband-rail, .logoband:focus-within .logoband-rail, .logoband.buiten .logoband-rail { animation-play-state: paused; }
.banier-smal .logoband { margin-top: 0; }
.logoband-item img { height: var(--h, 40px); width: auto; max-width: none; object-fit: contain; filter: grayscale(1) var(--toon,) contrast(1.1); mix-blend-mode: multiply; opacity: .78; transition: opacity .3s; }
.logoband-item:hover img { opacity: 1; }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- transitievergoeding: blok op de home ---------- */
.tv-blok { padding-block: clamp(72px, 9vw, 128px); }
.tv-blok-raster { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.tv-blok-intro img { width: 160px; transform: rotate(-2deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.08)); margin-bottom: 20px; }
.tv-blok-intro h2 { font-size: clamp(30px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.01em; }
.tv-blok-intro p { margin: 14px 0 22px; max-width: 34ch; color: var(--inkt); }
.tv-blok-intro .pijllink { font-size: 19px; color: var(--inkt); }
/* zonder tekening (Jochem 31 okt: de boeken en een rekenmachine pasten niet): een label en drie kerncijfers, typografisch */
.tv-soort { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; font-size: 13px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); }
.tv-soort::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--inkt); }
.tv-kern { list-style: none; margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid rgba(30,30,30,.2); display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 16px clamp(24px, 3vw, 44px); }
.tv-kern b { display: block; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--inkt); white-space: nowrap; }
.tv-kern .tv-breuk { font-size: clamp(32px, 2.95vw, 42px); margin-top: -.12em; margin-bottom: -.1em; } /* het breukteken valt in deze letter kleiner uit */
.tv-kern span { display: block; margin-top: 8px; max-width: 15ch; font-size: 14px; line-height: 1.4; color: rgba(30,30,30,.75); }
.js .tv-blok-intro[data-in] .tv-kern li { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .tv-blok-intro[data-in].in .tv-kern li { opacity: 1; transform: none; }
.js .tv-blok-intro[data-in].in .tv-kern li:nth-child(1) { transition-delay: .3s; }
.js .tv-blok-intro[data-in].in .tv-kern li:nth-child(2) { transition-delay: .42s; }
.js .tv-blok-intro[data-in].in .tv-kern li:nth-child(3) { transition-delay: .54s; }
@media (max-width: 560px) {
  .tv-kern { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
  .tv-kern b { font-size: 22px; }
  .tv-kern span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .js .tv-blok-intro[data-in] .tv-kern li { opacity: 1; transform: none; transition: none; } }
.banier-smal .pijllink { margin-top: 8px; font-size: 15px; }
.relatie-detail .pijllink { justify-self: end; white-space: nowrap; }
.relatie-detail h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; }
.relatie-detail p { max-width: 52ch; }
.relatie-detail .sectorlabels span { background: var(--wit); }
.pijllink::before, .lijnlink::before, .tv-disclaimer a::before, .taal a::before, .stem figcaption a::before, .avond-sub a::before { content: ""; position: absolute; inset: -12px -6px; }
.voet-boven a::before, .voet-juridisch a::before, .voet-juridisch .wx-ts-link::before { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; margin-top: -22px; }
.tv-mini { background: var(--wit); border-radius: 18px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 36px; }
.tv-mini .tv-velden { display: grid; gap: 14px; align-content: start; }
.tv-mini .tv-voetnoot { grid-column: 1 / -1; font-size: 15px; color: var(--zacht); margin: 10px 0 0; }
@media (max-width: 1100px) { .tv-mini { grid-template-columns: 1fr; } } /* 861–1100: twee kolommen zijn te smal (label en schakelaar braken af) */

/* ---------- velden ---------- */
.tv-veld { display: block; position: relative; }
.tv-veld > span { display: block; font-size: 14px; color: var(--grijs); margin-bottom: 6px; }
.tv-veld input { width: 100%; font: inherit; font-size: 19px; color: var(--inkt); background: var(--tegel); border: 1.5px solid transparent; padding: 12px 14px; transition: border-color .2s, background-color .2s, box-shadow .2s; font-variant-numeric: tabular-nums; }
.tv-veld input::placeholder { color: var(--veld-hint); }
.tv-veld input:hover { background: var(--vlak-hover); }
.tv-veld input:focus { outline: none; background: var(--wit); border-color: var(--inkt); box-shadow: 0 0 0 4px rgba(249,255,133,.9); }
.tv-veld input[aria-invalid="true"] { border-color: var(--fout); }
.tv-geld input { padding-left: 34px; }
.tv-geld > i, .tv-procent > i { position: absolute; left: 14px; bottom: 13px; font-style: normal; font-size: 19px; color: var(--zacht); pointer-events: none; }
.tv-procent { max-width: 220px; } .tv-procent > i { left: auto; right: 14px; }
.tv-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tv-rij-3 { grid-template-columns: repeat(3, 1fr); }
.tv-hint { font-size: 15px; color: var(--zacht); margin: -8px 0 0; }
.tv-schakel { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; color: var(--inkt); position: relative; user-select: none; }
.tv-schakel input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.tv-knop { width: 44px; height: 26px; border-radius: 20px; background: var(--schakel); position: relative; flex: none; transition: background-color .25s; }
.tv-knop::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--wit); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.tv-schakel input:checked + .tv-knop { background: var(--inkt); }
.tv-schakel input:checked + .tv-knop::after { transform: translateX(18px); background: var(--geel); }
.tv-schakel input:focus-visible + .tv-knop { outline: 2px solid var(--inkt); outline-offset: 3px; }

/* ---------- uitkomst ---------- */
.tv-uitkomst, .tv-kaart { display: flex; flex-direction: column; }
.tv-label { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.tv-bedrag { display: block; font-size: clamp(40px, 4.4vw, 60px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; margin: 10px 0 8px; color: var(--inkt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-bedrag.groot { font-size: clamp(46px, 5vw, 72px); }
.tv-bedrag small { font-size: .45em; letter-spacing: 0; margin-left: 2px; color: var(--grijs); vertical-align: .62em; }
.tv-uitleg { font-size: 16px; color: var(--grijs); min-height: 1.5em; }
.tv-balk { display: block; height: 8px; border-radius: 6px; background: var(--tegel); margin: 18px 0 8px; overflow: hidden; }
/* vulling (normfix T10): was een width-overgang op de <i>. Nu is de <i> een vaste, afgeronde bak en schuift een
   volle balk erin (span, door script.js toegevoegd; translateX). Zelfde vorm, gele knop, duur en easing. */
.tv-balk i { display: block; height: 100%; width: 100%; border-radius: 6px; overflow: hidden; }
.tv-balk i > span { display: block; height: 100%; background: var(--inkt); border-radius: 6px; transform: translateX(-100%); transition: transform .7s var(--ease); position: relative; }
.tv-balk i > span::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; border-radius: 6px; background: var(--geel); }
.tv-max { font-size: 14px; color: var(--zacht); }

/* ---------- calculatorpagina ---------- */
.tv-intro { margin-top: 28px; font-size: clamp(18px, 1.5vw, 21px); color: var(--grijs); }
.tv-sectie { padding-top: clamp(24px, 3vw, 40px); }
.tv-raster { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.tv-form { display: grid; gap: 0; }
.tv-basis { display: grid; gap: 18px; background: var(--wit); border-radius: 18px; padding: clamp(24px, 3vw, 36px); margin-bottom: 26px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 50px -40px rgba(0,0,0,.4); }
.tv-meer { border-top: 1px solid var(--inkt); }
.tv-meer summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 18px 34px 18px 2px; font-size: 20px; color: var(--inkt); position: relative; padding-left: 0; }
.tv-meer summary::-webkit-details-marker { display: none; }
.tv-meer summary small { font-size: 14px; color: var(--zacht); }
.tv-meer summary .tv-plus { position: absolute; right: 4px; top: 50%; width: 20px; height: 20px; margin-top: -10px; }
.tv-plus::before, .tv-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); }
.tv-plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.tv-meer[open] .tv-plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.tv-meer summary:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
@media (hover: hover) { .tv-meer summary:hover > span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } } /* aanwijzen: onderlijn zoals de tekstlinks in de voet */
.tv-meer-inhoud { display: grid; gap: 18px; padding: 4px 2px 28px; }
.tv-meer[open] .tv-meer-inhoud { animation: uitklap .45s var(--ease); }
@keyframes uitklap { from { opacity: 0; transform: translateY(-6px); } }
.tv-meer-inhoud [hidden] { display: none; }
.tv-bonusveld { border: 0; padding: 0; margin: 0; }
.tv-bonusveld legend { font-size: 14px; color: var(--grijs); margin-bottom: 8px; padding: 0; }
.tv-segment { display: inline-flex; flex-wrap: wrap; }
.tv-segment label { position: relative; }
.tv-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.tv-segment span { display: flex; padding: 0 16px; border-radius: 999px; color: var(--inkt); transition: background-color .25s, color .25s, box-shadow .25s; min-height: 44px; align-items: center; box-shadow: inset 0 0 0 1.5px var(--inkt); }
.tv-segment input:checked + span { background: var(--inkt); color: var(--wit); box-shadow: inset 0 0 0 1.5px var(--inkt); }
.tv-segment input:focus-visible + span { outline: 2px solid var(--inkt); outline-offset: 3px; }
.tv-regels { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; color: var(--grijs); }
.tv-regels li { padding-left: 22px; position: relative; line-height: 1.5; }
.tv-regels li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--geel); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.tv-regels b { color: var(--inkt); font-weight: 500; }
.sectie p, .tv-regels { max-width: 52ch; }
.tv-telt h3 { margin: 0 0 12px; font-size: 13px; line-height: 1.6; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.tv-resultaat { position: sticky; top: 96px; }
.tv-kaart { border-radius: 18px; padding: clamp(24px, 3vw, 36px); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 24px 50px -40px rgba(0,0,0,.4); background: linear-gradient(var(--geel) 0 6px, var(--wit) 6px); }
.tv-opbouw { margin: 22px 0 0; display: grid; grid-template-columns: 1fr auto; gap: 7px 18px; font-size: 15px; font-variant-numeric: tabular-nums; }
.tv-opbouw:empty { display: none; }
.tv-opbouw dt { color: var(--grijs); }
.tv-opbouw dd { margin: 0; text-align: right; color: var(--inkt); padding-left: 18px; }
.tv-opbouw .som { border-top: 1px solid var(--lijn); padding-top: 8px; font-weight: 500; color: var(--inkt); }
.tv-pdfstap { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--lijn); }
.tv-pdfknop { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 40px; font-size: 16px; cursor: pointer; transition: background-color .25s, color .25s; justify-self: start; }
.tv-pdfknop:hover { color: var(--inkt); }
.tv-pdfknop.vol { background: var(--geel); border-color: var(--inkt); }
.tv-pdfknop.vol::before { background: var(--inkt); } /* gevulde knop: inkt schuift in, tekst wit (was: gele vulling over witte tekst, onleesbaar) */
.tv-pdfknop.vol:hover, .tv-pdfknop.vol:focus-visible { color: var(--wit); }
.tv-pdfknop svg { width: 18px; height: 18px; }
.wb-band-knop::before, .pagina-home .formulier .verstuur::before, .tv-pdfknop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.wb-band-knop:hover::before, .wb-band-knop:focus-visible::before, .pagina-home .formulier .verstuur:hover::before, .pagina-home .formulier .verstuur:focus-visible::before, .tv-pdfknop:hover::before, .tv-pdfknop:focus-visible::before { transform: scaleX(1); }
.wb-band h2 strong { font-weight: 500; }
.wb-band-rechts { text-align: right; }
.wb-band-knop:hover, .wb-band-knop:focus-visible { color: var(--inkt); }
.wb-band-vac span { opacity: .65; margin-right: 4px; }
.wb-band-vac i { font-style: normal; opacity: .4; display: none; }
/* contrast AA (beeld-techniek 28 okt): deze zachte teksten haalden net geen 4,5:1 (4,49 en 4,42). Iets minder doorzichtig; verder gelijk. */
.wb-band-vac > span:not(.wb-band-i) { opacity: .68; }
.wb-band-knop::before { background: var(--wit); }
.tv-mailform { display: grid; gap: 14px; margin-top: 16px; }
.tv-mailform[hidden] { display: none; }
.tv-akkoord { display: flex; gap: 10px; font-size: 14px; color: var(--grijs); align-items: center; min-height: 44px; cursor: pointer; }
/* akkoordvinkje: eigen vakje (zelfde patroon als .tv-schakel), niet de per browser verschillende native checkbox */
.tv-akkoord { position: relative; }
.tv-akkoord input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.tv-akkoord input + span { position: relative; padding-left: 30px; }
.tv-akkoord input + span::before { content: ""; position: absolute; left: 1px; top: 2px; width: 18px; height: 18px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--inkt); background: var(--wit) center / 12px no-repeat; transition: background-color .2s; }
.tv-akkoord input:checked + span::before { background-color: var(--inkt); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23f9ff85' stroke-width='1.8'/%3E%3C/svg%3E"); }
.tv-akkoord input:focus-visible + span::before { outline: 2px solid var(--inkt); outline-offset: 3px; }
.tv-akkoord input[aria-invalid="true"] + span::before { box-shadow: inset 0 0 0 2px var(--fout); }
.tv-melding { font-size: 14px; color: var(--zacht); margin: 0; min-height: 1em; }
.tv-melding.fout { color: var(--fout); } /* alleen fouten rood; 'Bezig met versturen…' en 'Verstuurd' neutraal */
.tv-disclaimer { font-size: 14px; color: var(--grijs); margin: 16px 4px 0; }
.tv-disclaimer a { color: var(--inkt); display: inline-flex; align-items: center; gap: .5em; }
.tv-disclaimer { margin-left: 0; margin-right: 0; }

/* ---------- PDF-voorbeeld (mock-up, niets wordt verstuurd) ---------- */
.pdf-venster { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,20,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; display: flex; padding: 24px; animation: vIn .3s var(--ease); }
.pdf-venster[hidden] { display: none; }
@keyframes vIn { from { opacity: 0; } }
.pdf-paneel { margin: auto; width: min(720px, 100%); animation: pIn .45s var(--ease); }
@keyframes pIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.pdf-balk { display: flex; gap: 16px; align-items: flex-start; background: var(--geel); color: var(--inkt); border-radius: 12px 12px 0 0; padding: 14px 18px; font-size: 14.5px; line-height: 1.5; }
.pdf-balk p { margin: 0; }
.pdf-sluit { margin-left: auto; border: 0; background: var(--inkt); color: var(--wit); width: 34px; height: 34px; border-radius: 50%; font-size: 21px; line-height: 1; cursor: pointer; flex: none; position: relative; }
.pdf-sluit::before { content: ""; position: absolute; inset: -5px; } /* tikvlak 44 × 44 px; het rondje blijft 34 px */
.pdf-a4 { background: var(--wit); aspect-ratio: 210 / 297; padding: 7% 8.5% 5%; display: flex; flex-direction: column; font-family: Helvetica, Arial, sans-serif; color: #1a1a1a; font-size: clamp(8px, 1.5vw, 11.5px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); border-radius: 0 0 4px 4px; line-height: 1.35; }
.pdf-kop { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: .5px solid #dcdcdc; padding-bottom: 3.5%; }
.pdf-logo { width: 30%; }
.pdf-logo svg { width: 100%; height: auto; display: block; }
.pdf-adres { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: .82em; }
.pdf-adres span:nth-child(odd) { color: #909090; }
.pdf-adres span:nth-child(even) { text-align: right; }
.pdf-pretitel { margin: 7% 0 1%; font-size: .72em; letter-spacing: .14em; color: #909090; text-transform: uppercase; }
.pdf-titel { font-size: 2.1em; font-weight: 700; margin: 0 0 4%; letter-spacing: -.01em; }
.pdf-label { font-size: .68em; font-weight: 700; letter-spacing: .14em; color: #909090; text-transform: uppercase; margin: 4% 0 1.5%; }
.pdf-rij { display: flex; justify-content: space-between; padding: .4em 0; color: #585858; }
.pdf-rij b { color: #1a1a1a; font-weight: 400; }
.pdf-rij.som { border-top: .5px solid #dcdcdc; margin-top: .4em; padding-top: .8em; }
.pdf-rij.som b, .pdf-rij.som span { font-weight: 700; color: #1a1a1a; }
.pdf-band { display: flex; justify-content: space-between; align-items: baseline; background: var(--geel); border-radius: 3px; padding: 4% 4.5%; margin: 6% 0 2%; }
.pdf-band span { font-weight: 700; letter-spacing: .08em; font-size: .95em; }
.pdf-band b { font-size: 1.9em; }
.pdf-cursief { font-style: italic; color: #585858; font-size: .82em; margin: 0 0 .5em; }
.pdf-voet { margin-top: auto; font-size: .66em; color: #909090; }
.pdf-voet p { margin: 0 0 1.2em; line-height: 1.5; }
.pdf-voet .lijn { border-top: .5px solid #dcdcdc; padding-top: .9em; text-align: center; color: #585858; font-size: 1.1em; }

/* ---------- contact 's avonds ---------- */
.contact.avond { position: relative; overflow: hidden; background: var(--inkt); color: var(--op-inkt); padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(56px, 6vw, 80px); }
.contact.avond::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 55% at 80% 40%, rgba(249,255,133,.10), transparent 70%); opacity: 0; transition: opacity 2.4s ease; pointer-events: none; }
.contact.avond.licht::before { opacity: 1; }
.contact.avond .sectiekop h2 { color: var(--wit); }
.contact.avond .sectiekop h2::after { display: none; }
.avond-sub { margin: 22px 0 0; font-size: 18px; line-height: 1.7; }
.avond-sub a { color: var(--geel); text-decoration: none; }
.avond-sub a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact.avond .wrap { position: relative; z-index: 1; }
.contact.avond .sectiekop { margin-bottom: 0; min-height: clamp(220px, 24vw, 340px); }
.avond-pand { position: absolute; z-index: 0; right: max(3vw, calc((100vw - 1260px) / 2)); top: clamp(40px, 5vw, 80px); width: min(30vw, 380px); pointer-events: none; }
.avond-pand svg { width: 100%; height: auto; display: block; }
.avond-pand .licht { opacity: 0; animation: none; }
.contact.avond.licht .avond-pand .licht { animation: lichtAan 1.3s ease-out forwards; animation-delay: var(--d, 0s); }
.contact.avond .formulier { position: relative; z-index: 1; margin-top: clamp(24px, 3vw, 40px); }
.formulier textarea:focus { border-right-color: var(--inkt); border-bottom-color: var(--inkt); }
/* focuslijn dikker (gelijk aan contact, doorklik en WorkxIN), zodat de focus net zo zichtbaar is als bij de andere velden */
.formulier input:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); }
.formulier textarea:focus-visible { box-shadow: 1.5px 0 0 var(--inkt); }
@media (max-width: 860px) { .formulier textarea:focus-visible { box-shadow: 0 1.5px 0 var(--inkt); } }
/* fout veld blijft rood, ook met focus (het eerste foute veld krijgt de focus); lijn en focusschaduw in één kleur */
.formulier textarea[aria-invalid="true"]:focus { border-color: var(--fout); }
.formulier input[aria-invalid="true"]:focus-visible { box-shadow: 0 1.5px 0 var(--fout); }
.formulier textarea[aria-invalid="true"]:focus-visible { box-shadow: 1.5px 0 0 var(--fout); }
@media (max-width: 860px) { .formulier textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 1.5px 0 var(--fout); } }
/* focus ook zichtbaar op mobiel, waar de lijn onder het veld staat */
.pagina-home .voet-merk .pand { display: none; }
/* teamraster op tablet: drie kolommen (twee alleen onder het breekpunt van 560), anders zijn de kaarten groter dan op desktop */
@media (min-width: 561px) and (max-width: 860px) { .team-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- mobiel ---------- */
@media (max-width: 860px) {
  .verhaal-raster { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* mobiel/tablet staand: het pand staat al in de kop; hier alleen de drie beloftes */
  .verhaal-pand { display: none; }
  .verhaal-svg { width: auto; height: 100%; }
  .verhaal-svg svg { height: 100%; width: auto; margin: 0 auto; }
  .verhaal-meter { left: var(--rand); bottom: 10px; }
  .verhaal-kop { margin-top: 24px; }
  .stap, .stap:last-child { min-height: 0; padding-block: 28px; }
  .stap, .stap.gezien:not(.actief) { opacity: 1; transform: none; }
  .stap-icoon { width: 48px; height: 48px; margin-bottom: 16px; display: none; }
  .logoband-item { height: 60px; margin-right: 40px; zoom: .78; }
  .tv-blok-raster, .tv-raster { grid-template-columns: 1fr; }
  .tv-mini { grid-template-columns: 1fr; }
  .tv-blok-intro img { width: 110px; }
  .tv-rij-3 { grid-template-columns: 1fr; }
  .tv-resultaat { position: static; }
  .avond-pand { width: 42vw; top: 40px; right: 4vw; }
  .contact.avond .sectiekop { min-height: 0; padding-right: 40vw; }
  .pdf-venster { padding: 10px; }
}
@media (max-width: 360px) { .contact.avond .sectiekop { padding-right: 34vw; } } /* 320: 'met vragen' blijft op één regel */
@media (max-width: 420px) { .tv-rij { grid-template-columns: 1fr; } }
/* resultaatkaart: grid-item rekt niet op door een hoog bedrag; het bedrag schaalt mee met de kaart (12 tekens ≈ 5,9 em); pdf-knop op één regel zolang hij past */
.tv-resultaat, .tv-kaart { min-width: 0; }
/* mobiel: het bedrag direct onder de invoer (net als op de homepage); uitklappers en app-links daaronder */
@media (max-width: 860px) { .tv-raster:has(> [data-tv-form]) { display: flex; flex-direction: column; gap: 0; } .tv-raster > .tv-form { display: contents; } .tv-raster > .tv-form > .tv-basis { order: 1; } .tv-raster > .tv-resultaat { order: 2; margin-bottom: clamp(32px, 5vw, 80px); align-self: stretch; } .tv-raster > .tv-form > .tv-meer { order: 3; align-self: stretch; } }
/* rekenpagina: pas tonen als script.js de voorbeeldberekening heeft ingevuld (anders schuift de pagina na het laden; CLS); vangnet na 3 s */
.js .tv-raster:has(> [data-tv-form]):not(.tv-klaar) { visibility: hidden; animation: tvToon 0s 3s forwards !important; }
@keyframes tvToon { to { visibility: visible; } }
.tv-kaart { container-type: inline-size; }
.tv-kaart .tv-bedrag.groot { font-size: min(clamp(46px, 5vw, 72px), 16.5cqi); }
#kop-tv:lang(nl) { font-size: min(clamp(32px, 2.6vw + 20px, 56px), calc((100vw - 40px) / 11.7)); } /* het lange woord transitievergoeding past op 320/375 */
.tv-pdfstap { container-type: inline-size; }
.tv-pdfknop { white-space: nowrap; }
@container (max-width: 302px) { .tv-pdfknop { width: 100%; } .tv-pdfstap .tv-pdfknop { justify-content: center; } .tv-pdfknop svg { display: none; } }
@container (max-width: 272px) { .tv-pdfstap .tv-pdfknop { white-space: normal; justify-content: center; text-align: center; text-wrap: balance; line-height: 1.4; } }
[data-tv-bonus="average"] { display: grid; gap: 14px; }
.tv-nobreak { white-space: nowrap; }
.tv-meer summary > span, .tv-later-uit, .tv-uitleg, .tv-max, .tv-regels li, .tv-opzeg p, .tv-opzegknop, .tv-disclaimer { text-wrap: pretty; }
.tv-meer summary > span, .tv-opbouw dt, .tv-hint, .tv-label, .tv-later-kop { text-wrap: balance; }
.tv-niet li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--zacht); }
.tv-opzeg[hidden] { display: none; }
.tv-opzeg p { margin: 0; max-width: none; }
.tv-opzeg b { color: var(--inkt); font-weight: 500; }
.tv-opzegknop:hover { text-decoration-color: var(--geel-diep); text-decoration-thickness: 3px; }
.tv-later[hidden] { display: none; }
.tv-schuif::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: var(--tegel); }
.tv-schuif::-moz-range-track { height: 6px; border-radius: 6px; background: var(--tegel); }
.tv-schuif::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--inkt); border: 3px solid var(--geel); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.tv-schuif::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--inkt); border: 3px solid var(--geel); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.tv-later-uit { margin: 10px 0 0; font-size: 16px; color: var(--grijs); }
.tv-later-uit b { color: var(--inkt); font-weight: 500; }
.tv-later-uit span { color: var(--zacht); }
@media (prefers-reduced-motion: reduce) {
  .logoband-rail { animation: none !important; flex-wrap: wrap; width: 100%; justify-content: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logoband-item[aria-hidden="true"] { display: none; }
  .logoband-item:nth-child(n+19) { display: none; }
  .stap { opacity: 1 !important; transform: none !important; }
  .verhaal-pand .raam, .verhaal-pand .gloed { opacity: 1 !important; }
  .avond-pand .licht { opacity: 1 !important; }
}
.banier-smal .logoband-item { height: 66px; margin-right: 48px; }
.banier-smal .logoband-item img { height: var(--h, 32px); }
.banier-smal .wrap { display: block; width: auto; max-width: none; margin: 0; padding: 0; }
.banier-smal h2 { margin: 0; max-width: 21ch; font-size: clamp(16px, 1.25vw, 18px); font-weight: 500; line-height: 1.3; letter-spacing: .01em; }
.pagina-home .stap p { font-size: var(--brood); }
/* logobanden op mobiel: het hele logo-item staat op zoom .78 (zie max-width 860 hierboven); het label krijgt daarom 13 / .78,
   zodat het op het scherm 13 px is in plaats van 10 px (normfix 29 okt) */
@media (max-width: 860px) { .logoband-item .wc-label { font-size: calc(13px / .78); } }
/* NL-label "Ondernemingsraad" (keuze 30 okt) is breder dan "Works Council": op mobiel krappere letterafstand, anders raakt het het logo ernaast */
@media (max-width: 860px) { .logoband-item .wc-label:lang(nl) { letter-spacing: .06em; padding-left: .06em; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* avond: het pand zelf donker, alleen de ramen geven licht */
.avond-pand .st12 { fill: var(--inkt-licht); fill-opacity: 0; }
.avond-pand .st13 { stroke: var(--steen-donker); }
.avond-pand .st0 { fill: var(--steen-donker); }
.avond-pand circle[class^="st"] { mix-blend-mode: screen; }
.contact.avond.licht .avond-pand .st1 { filter: drop-shadow(0 0 5px rgba(249,255,133,.65)); }
.contact.avond.licht .avond-pand circle.licht { animation-name: gloedAan; }
@keyframes gloedAan { 0% { opacity: 0; } 50% { opacity: .22; } 65% { opacity: .12; } 100% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .avond-pand circle.licht { opacity: .3 !important; } }
/* Conceptbalk: altijd zichtbaar, leidt naar de uitleg (vervangt het losse 'Concept'-label) */
.conceptbalk { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(29,29,27,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 14px; white-space: nowrap; max-width: calc(100vw - 24px); overflow-x: auto; }
.conceptbalk a { color: var(--wit); text-decoration: none; padding: 9px 16px; border-radius: 999px; transition: background .2s; }
.conceptbalk a:hover, .conceptbalk a:focus-visible { background: rgba(255,255,255,.12); }
.conceptbalk a:first-of-type { background: var(--geel); color: var(--inkt); font-weight: 500; }
.conceptbalk a:first-of-type:hover { background: var(--wit); }
@media (max-width: 640px) { .conceptbalk { font-size: 13px; bottom: 10px; } .conceptbalk a { padding: 8px 12px; } }

/* ------------------------------------------------------------------ Workx in cijfers */
.cijfers { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--lijn); }
.cijfer { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; border-top: 1.5px solid var(--inkt); padding-top: 18px; }
.cijfer dd { margin: 0; font-size: clamp(56px, 6.4vw, 92px); line-height: .95; letter-spacing: -.035em; color: var(--inkt); font-variant-numeric: tabular-nums; position: relative; }
.cijfer dd span[aria-hidden] { position: relative; z-index: 0; }
.cijfer dd span[aria-hidden]::after { content: ""; position: absolute; left: -2px; right: -4px; bottom: .08em; height: .22em; background: var(--geel); z-index: -1; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .5s; }
.cijfer dt { font-size: 16px; line-height: 1.4; color: var(--grijs); max-width: 22ch; }
.cijfer dt a { color: inherit; text-decoration: underline; text-decoration-color: var(--lijn); text-underline-offset: 4px; transition: text-decoration-color .2s; }
.cijfer dt a:hover { text-decoration-color: var(--inkt); }

/* ------------------------------------------------------------------ logo-intro bij het eerste bezoek (logo-intro.js) */
html.wx-intro::after { content: ""; position: fixed; inset: 0; z-index: 299; background: var(--wit); animation: wxIntroNood 0s linear 2.2s forwards; }
html.wx-intro-loopt::after { display: none; }
@keyframes wxIntroNood { to { visibility: hidden; } }
.wx-intro-laag { position: fixed; inset: 0; z-index: 300; background: var(--wit); display: grid; place-items: center; transition: background-color .4s ease; pointer-events: none; }
.wx-intro-laag.weg { background: rgba(255,255,255,0); }
.wx-intro-laag svg { width: min(52vw, 360px); height: auto; overflow: visible; }
.wx-intro-laag .logo-cls-3, .wx-intro-laag .logo-cls-4 { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .38s cubic-bezier(.22,.61,.36,1); }
.wx-intro-laag .logo-cls-4 { transition-delay: .08s; }
.wx-intro-laag.speel .logo-cls-3, .wx-intro-laag.speel .logo-cls-4 { transform: none; }
.wx-intro-laag text { opacity: 0; transition: opacity .3s ease .62s; }
.wx-intro-laag.speel text { opacity: 1; }
.wx-intro-loopt .kop-balk .logo { opacity: 0; }
/* Mobiel menu na scrollen: backdrop-filter op de kopbalk maakte hem het bezit-blok van het
   fixed menu (net als een transform), waardoor het menu maar 68px hoog werd. Vervaging nu op een
   eigen laag achter de kop. */
.kop-balk.compact { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kop-balk::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(255,255,255,0); transition: background-color .3s; }
.kop-balk.compact::before { background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(8px); -webkit-backdrop-filter: saturate(1.4) blur(8px); }
.kop-balk.compact .wrap > .logo { width: 150px; transform: scale(.7733); } /* 116 / 150 */
@media (max-width: 860px) {
  .kop-balk.compact .wrap > .logo { width: 112px; transform: scale(.8214); }       /* 92 / 112 */
}
body:not(.wi) .kop-balk.compact { box-shadow: none; }
body:not(.wi) .kop-balk::before { bottom: auto; height: 88px; transition: background-color .3s, transform .3s var(--ease); }
body:not(.wi) .kop-balk.compact::before { transform: translateY(-20px); }
body:not(.wi) .kop-balk.kop-snel::before, .kop-balk.kop-snel::before { transition: none; }
body:not(.wi) .kop-balk.compact::after { opacity: 1; transform: translateY(-20px); }
body:not(.wi) .kop-balk .wrap { height: 88px; }
body:not(.wi) .kop-balk.compact .wrap { pointer-events: none; }
body:not(.wi) .kop-balk.compact .wrap > * { pointer-events: auto; }
@media (min-width: 861px) {
  body:not(.wi) .kop-balk.compact .wrap > .logo + nav { transform: translate(-34px, -10px); }
}
@media (prefers-reduced-motion: reduce) { html.wx-intro::after, .wx-intro-laag { display: none; } }

/* ------------------------------------------------------------------ Kijk binnen (rondleiding / dag bij Workx) */
.binnen { background: var(--beige); padding-block: clamp(40px, 5vw, 72px) clamp(56px, 6vw, 88px); }
/* <picture> mag de opmaak van het beeld niet veranderen */
picture { display: contents; }
picture > source { display: none; }

/* ------------------------------------------------------------------ snelheid: moderne beeldformaten voor achtergronden */
.held-bg, .verhaal-grond { background-image: url(img/grunge-header.png); background-image: image-set(url(img/grunge-header-647.webp) type("image/webp"), url(img/grunge-header.png) type("image/png")); }
/* snelheid: de paginakop hoeft niet op JavaScript te wachten om in beeld te komen (beter LCP) */
@keyframes kopIn { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.js .pagina-kop [data-in] { opacity: 1; transform: none; transition: none; animation: kopIn .8s var(--ease) both; animation-delay: var(--vertraging, 0s); }
@media (prefers-reduced-motion: reduce) { .js .pagina-kop [data-in] { animation: none; } }

/* ------------------------------------------------------------------ toegankelijkheid (WCAG 2.2 AA) */
/* focusrand ook zichtbaar op donkere vlakken */
.avond :focus-visible, .voet :focus-visible, .dag-avond :focus-visible, .conceptbalk :focus-visible, .contact.avond :focus-visible { outline-color: var(--wit); }
.contact.avond .formulier :focus-visible { outline-color: var(--inkt); } /* het formulier is wit: daar een donkere focusrand */
.contact.avond.licht .avond-pand .wx-groot:not(.uit) { filter: drop-shadow(0 0 5px rgba(249,255,133,.65)); }
/* fotobaan-stippen: klikvlak minstens 24×24 px (2.5.8), het zichtbare streepje blijft gelijk */
.stippen button { border: 0 !important; border-radius: 0 !important; }
.stippen button::before { content: ""; width: 34px; height: 10px; border-radius: 6px; border: 1.5px solid var(--inkt); box-sizing: border-box; transition: background-color .3s, width .3s var(--ease); }
.stippen button[aria-current="true"]::before { background: var(--inkt); width: 46px; }
@media (hover: hover) { .stippen button:not([aria-current="true"]):hover::before { background: var(--inkt); } } /* aanwijzen vult (zoals de pijlknoppen); breedte blijft, dus de actieve stip blijft herkenbaar */
@media (max-width: 860px) {
  .stippen button::before { width: 8px; height: 8px; border-radius: 50%; }
  .stippen button[aria-current="true"]::before { width: 22px; border-radius: 6px; }
}
/* Normcheck (28 okt): fotostipjes krijgen een onzichtbaar aanraakvlak van 44 px hoog (beeld ongewijzigd) */
.stippen button::after { content: ""; position: absolute; inset: -10px 0; }
/* 320 px: twaalf stippen passen binnen de zijmarge (28 + 11 × 22 = 270 px), het zichtbare stipje blijft gelijk */
@media (max-width: 374px) {
  .stippen { gap: 0 !important; }
  .stippen button { width: 22px !important; }
  .stippen button[aria-current="true"] { width: 28px !important; }
}
/* Kennis en actueel — kaarten naar de nieuwe pagina's */
.kennis { padding: 24px 0 88px; }
/* Kijk binnen: beweeg over een Workx-verdieping in het pand (binnen.js) */
.kb-zone { fill: transparent; pointer-events: all; cursor: zoom-in; outline: none; }
.kb-zone:focus-visible { vector-effect: non-scaling-stroke; }
/* focusrand op de verdiepingen in de pandtekening (binnen.js): was 1 px stippellijn, nu net als de rest van de site 2 px --inkt
   (non-scaling, zodat hij bij elke tekeningmaat 2 px blijft) */
.kb-zone:focus-visible { stroke: var(--inkt); stroke-width: 2px; stroke-dasharray: none; }
.held-pand svg .wx-raam { transition: fill-opacity 1.2s ease, filter .25s ease; }
.held-pand svg[data-kb-hover="boven"] .wx-raam[data-verd="1"],
.held-pand svg[data-kb-hover="beneden"] .wx-raam:not([data-verd="1"]) { filter: brightness(1.06) drop-shadow(0 0 3px rgba(249,255,133,.95)); fill-opacity: 1; }
.held-pand svg.kb-zoom { transform: scale(2.8); opacity: 0; }
.kb-laag { position: fixed; z-index: 150; overflow: hidden; border-radius: 2px; background: var(--inkt); opacity: 0; cursor: zoom-out;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: left 1.3s cubic-bezier(.55,0,.25,1), top 1.3s cubic-bezier(.55,0,.25,1), width 1.3s cubic-bezier(.55,0,.25,1), height 1.3s cubic-bezier(.55,0,.25,1), opacity .5s ease, border-radius 1.3s ease, box-shadow 1.3s ease; }
.kb-laag.open { opacity: 1; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.kb-fotos { position: absolute; inset: 0; }
/* licht inzoomen per foto; klein gehouden, want een vergrote foto wordt zacht */
.kb-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.4s ease, transform 7s linear; }
.kb-fotos img.aan { opacity: 1; transform: scale(1); }
.kb-laag:not(.klaar) .kb-fotos img.aan { transform: scale(1.35); transition: opacity .6s ease, transform 1.6s cubic-bezier(.2,.7,.2,1); }
.kb-laag.open:not(.klaar) .kb-fotos img.aan { transform: scale(1.06); }
.kb-onder { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 36px 18px 14px; color: var(--wit); font-size: 16px; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transform: translateY(6px); transition: opacity .6s ease, transform .6s ease; }
.kb-laag.klaar .kb-onder { opacity: 1; transform: none; }
.kb-titel { border-bottom: 3px solid var(--geel); padding-bottom: 1px; min-width: 0; }
.kb-nav { display: flex; align-items: center; gap: 12px; }
.kb-teller { font-size: 14px; font-variant-numeric: tabular-nums; opacity: .9; white-space: nowrap; }
.kb-stippen { display: flex; gap: 2px; }
/* ruim klikvlak rond elk stipje, het stipje zelf blijft klein */
.kb-stippen i { width: 16px; height: 16px; cursor: pointer; position: relative; }
.kb-stippen i::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: rgba(255,255,255,.45); transition: background .4s, transform .2s; }
.kb-stippen i:hover::after { background: rgba(255,255,255,.85); transform: scale(1.2); }
.kb-stippen i.aan::after { background: var(--geel); }
/* fotovenster van het pand op mobiel: teller op één regel; de tien stippen passen er niet naast */
@media (max-width: 600px) { .kb-stippen { display: none; } }
/* bladerpijlen op de foto */
.kb-pijl { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin-top: -40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--inkt); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.25); opacity: 0; transform: scale(.85); transition: opacity .5s ease, transform .2s ease, background .2s ease; }
.kb-vorige { left: 14px; } .kb-volgende { right: 14px; }
.kb-vorige svg { transform: rotate(180deg); }
.kb-laag.klaar .kb-pijl { opacity: 1; transform: none; }
.kb-pijl:hover { background: var(--geel); }
.kb-pijl:active { transform: scale(.93); }
.kb-pijl:focus-visible { outline: 2px solid var(--geel); outline-offset: 3px; }
.kb-laag.kb-enkel .kb-pijl, .kb-laag.kb-enkel .kb-nav { display: none; }
/* zelf gebladerd: sneller overvloeien */
.kb-laag.kb-zelf .kb-fotos img { transition: opacity .45s ease, transform 7s linear; }
@media (prefers-reduced-motion: reduce) {
  .held-pand svg, .kb-laag, .kb-fotos img, .kb-onder { transition-duration: .2s !important; transition-delay: 0s !important; }
  .held-pand svg.kb-zoom { transform: none; }
  .kb-fotos img, .kb-fotos img.aan { transform: none !important; }
}
/* Kijk binnen — uitnodigen zonder tekst (binnen.js) */
.kb-glimp { pointer-events: none; mix-blend-mode: multiply; opacity: calc(.22 + var(--kb-nabij) * .3); filter: saturate(.8); transition: opacity .5s ease; }
.held-pand.buiten-donker .kb-glimp, .held-pand.buiten-schemer .kb-glimp { opacity: calc(.38 + var(--kb-nabij) * .3); }
.held-pand.buiten-licht svg .wx-gloed { visibility: visible; fill-opacity: .6; }
.held-pand .wx-gloed { transform-box: fill-box; transform-origin: center; transition: fill-opacity 1.2s ease, transform 1.2s ease, opacity 1.2s ease; }
.held-pand svg .wx-gloedlaag { filter: brightness(calc(1 - var(--kb-nabij) * .06)) saturate(calc(1 + var(--kb-nabij) * .8)); transition: filter .4s ease; }
.held-pand svg[data-kb-lok="boven"] .wx-gloed[data-verd="1"],
.held-pand svg[data-kb-lok="beneden"] .wx-gloed:not([data-verd="1"]) { transform: scale(1.18); fill-opacity: .9; }
.held-pand svg[data-kb-lok="boven"] .kb-glimp[data-glimp="boven"],
.held-pand svg[data-kb-lok="beneden"] .kb-glimp[data-glimp="beneden"] { opacity: .5; transition-duration: 1.2s; }
.held-pand svg[data-kb-hover="boven"] .wx-gloed[data-verd="1"],
.held-pand svg[data-kb-hover="beneden"] .wx-gloed:not([data-verd="1"]) { transform: scale(1.25); fill-opacity: 1; }
.held-pand svg[data-kb-hover="boven"] .kb-glimp[data-glimp="boven"],
.held-pand svg[data-kb-hover="beneden"] .kb-glimp[data-glimp="beneden"] { opacity: .7; }

/* ---------- Wat klanten over ons zeggen (Chambers-citaten) ---------- */
.stemmen { padding-block: clamp(72px, 9vw, 128px); background: var(--beige); }
:root .stemmen.geel { background: var(--geel); } /* klantenpagina (9 nov, keuze Jochem): geel vlak, zodat het niet doorloopt in het beige contactblok */
.stemmen .sectiekop { margin-bottom: clamp(26px, 3vw, 40px); }
.stem-rail { display: grid; }
.stem { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.stem.aan { opacity: 1; transform: none; pointer-events: auto; }
.stem blockquote { margin: 0 0 16px; max-width: 32em; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; color: var(--inkt); }
.stem figcaption { font-size: 15px; color: var(--grijs); }
.stem figcaption a { color: var(--inkt); }
/* aanduiding (keuze 30 okt): dezelfde pilvorm als de fotobaanstippen (.stippen) op home, ook op mobiel */
.stem-stippen { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 26px; }
/* 26 citaten (9 nov): teller met pijlen, dezelfde vorm als de citatenstapel op home (citaten.css) */
.stem-besturing { display: flex; align-items: center; gap: 8px; margin-top: 26px; }
.stem-teller { margin: 0 12px 0 0; font-size: 13px; font-weight: 500; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: var(--inkt); }
.stem-pijl { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--inkt); border-radius: 50%; background: transparent; color: var(--inkt); cursor: pointer; }
.stem-pijl svg { width: 18px; height: 18px; }
@media (hover: hover) { .stem-pijl:hover { background: var(--inkt); color: var(--wit); } }
.stem-pijl:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.stem-stippen button { width: 38px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; display: grid; place-items: center; transition: width .3s var(--ease); }
.stem-stippen button[aria-pressed="true"] { width: 50px; }
.stem-stippen button::before { content: ""; width: 34px; height: 10px; border-radius: 6px; border: 1.5px solid var(--inkt); box-sizing: border-box; transition: background-color .3s, width .3s var(--ease); }
.stem-stippen button[aria-pressed="true"]::before { background: var(--inkt); width: 46px; }
@media (hover: hover) { .stem-stippen button:not([aria-pressed="true"]):hover::before { background: var(--inkt); } }
.stem-stippen button::after { content: ""; position: absolute; inset: -10px 0; }
@media (max-width: 860px) {
  .stem-stippen button { width: 24px; } .stem-stippen button[aria-pressed="true"] { width: 30px; }
  .stem-stippen button::before { width: 8px; height: 8px; border-radius: 50%; }
  .stem-stippen button[aria-pressed="true"]::before { width: 22px; border-radius: 6px; }
}

/* ---------- Startpagina (27 okt): smalle gele relatieband, zelfde vorm als op werken-bij ---------- */
.banier-smal { padding-block: clamp(22px, 2.6vw, 34px); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3vw, 48px); padding-left: max(var(--rand), calc((100% - var(--breed)) / 2)); } /* 100%: met een vaste scrollbalk liep 100vw 7,6 px uit de lijn */
@media (max-width: 760px) {
  .banier-smal { grid-template-columns: minmax(0, 1fr); row-gap: 14px; padding-left: 0; }
  .banier-smal .wrap { padding-inline: var(--rand); }
  .banier-smal h2 { max-width: none; }
}
/* klantlogo's in de smalle banier iets groter en beter leesbaar (wens Jochem 27 okt) */
.banier-smal .logoband-item img { opacity: .9; }

/* ---------- Relatiepagina (27 okt): geopende relatie als eigen kaart, tekst niet meer tegen de rand ----------
   .binnen botste met de sectie "Kijk binnen" (beige, alleen boven/onder ruimte); hier krijgt het vlak zijn eigen maat. */
.relatie-detail .binnen { background: var(--beige); border-radius: 12px; padding: clamp(28px, 3.6vw, 52px) clamp(22px, 5vw, 72px); }
@media (max-width: 760px) { .relatie-detail .binnen { grid-template-columns: minmax(0, 1fr); } .relatie-detail .pijllink { justify-self: start; } }
.pijllink, .lijnlink, .tv-disclaimer a, .taal a, .voet-boven a, .voet-juridisch a, .stem figcaption a, .avond-sub a { position: relative; }

/* ---------- Werken bij op de startpagina (27 okt, keuze Jochem: optie 1 + menu A) ---------- */
/* Uitwerking 1 (Jochem): wit, typografisch, gele sticker; alles leidt naar de knop naar werken-bij, vacatures klein ernaast */
.wb-band { padding-block: clamp(48px, 5.5vw, 80px); background: var(--geel); }
.wb-band .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 30px 60px; }
.wb-band h2 { margin: 0; font-size: clamp(36px, 4.4vw, 64px); font-weight: 400; text-transform: uppercase; line-height: 1.03; }
.wb-band-sticker { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0 18px; padding: 7px 12px 6px; background: var(--wit); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; transform: rotate(-2deg); animation: wbWiebel 5s ease-in-out infinite; font-size: 13px; box-shadow: 4px 4px 0 var(--inkt); }
.wb-band-sticker i { width: 8px; height: 8px; border-radius: 50%; background: var(--groen-open); position: relative; }
@keyframes wbWiebel { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-1deg) translateY(-2px); } }
.wb-band-knop { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; background: var(--inkt); color: var(--wit); text-decoration: none; font-size: 17px; font-weight: 500; border-radius: 2px; transition: color .25s; }
.wb-band-knop svg { width: 20px; height: 20px; animation: wbTik 2.4s var(--ease) infinite; }
@keyframes wbTik { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(6px); } 90% { transform: none; } 95% { transform: translateX(3px); } }
.wb-band-vac { max-width: 480px; margin: 14px 0 0 auto; font-size: 14px; line-height: 1.8; text-wrap: balance; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.wb-band-vac a { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wb-band-vac a:hover { text-decoration-thickness: 2px; }
/* tikvlak ±44px hoog zonder dat de regel verschuift */
.wb-band-vac a { position: relative; }
.wb-band-vac a::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; margin-top: -22px; }
@media (max-width: 860px) { .wb-band .wrap { grid-template-columns: minmax(0, 1fr); } .wb-band-rechts { text-align: left; } .wb-band-vac { margin-left: 0; } .wb-band-sticker { margin-left: 10px; } }
/* "Of direct naar": geen losse scheidingspunten meer aan een regelbegin of -einde; ruimte als scheiding */
.wb-band-vac { justify-content: flex-end; align-items: baseline; }
.wb-band-vac > span:first-child { flex-basis: 100%; text-align: right; margin: 0; }
@media (prefers-reduced-motion: reduce) { .wb-band-sticker, .wb-band-knop svg { animation: none; } }
.wb-band-knop svg, .formulier .verstuur svg, .tv-pdfknop svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.wb-band-knop:hover svg, .formulier .verstuur:hover svg, .tv-pdfknop:hover svg { transform: translateX(4px); }
/* puls als eigen laag met schaal en doorzichtigheid (geen box-shadow-animatie: die tekent elk beeld opnieuw); 5 px rand op een stip van 8 px = schaal 2,25 */
.wb-band-sticker i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--groen-open); opacity: 0; animation: wbStipPuls 2s ease-in-out infinite; }
/* Menu: geel bolletje met het aantal open vacatures */
.menu-tel { display: inline-grid; place-items: center; min-width: 15px; height: 15px; margin-left: 6px; padding: 0 4px; border-radius: 999px; background: var(--geel); color: var(--inkt); vertical-align: 0; position: absolute; margin: 0; box-shadow: none; }
.menu-tel .sr-only { position: absolute; }
.wb-band + .fotobaan { padding-top: clamp(44px, 5vw, 72px); }

/* ---------- Klantenpagina (27 okt): logo's optisch even groot (script.js meet de inkt van elk logo) ---------- */
.relatie-tegel img.gelijk { transform: var(--t); }
/* toon gelijktrekken (29 okt): lichte logo's een gammacurve (SVG-filters lg14 t/m lg30 in relaties.html); bij hover blijft de eigen kleur.
   Sinds 30 okt niet meer in gebruik: script.js (toonGelijk) zet --toon in het grijsfilter, voor alle klantlogo's gelijk. */
.relatie-tegel img.toon14 { filter: url(#lg14); } .relatie-tegel img.toon18 { filter: url(#lg18); } .relatie-tegel img.toon22 { filter: url(#lg22); } .relatie-tegel img.toon26 { filter: url(#lg26); } .relatie-tegel img.toon30 { filter: url(#lg30); }
@media (hover: hover) { .relatie-tegel:hover img:is(.toon14, .toon18, .toon22, .toon26, .toon30) { filter: grayscale(0); } }

/* ---------- Ontwerpkeuring hoofdsite (27 okt, Jochem koos 1 t/m 4) ---------- */
/* Startpagina: lopende tekst in drie maten (intro var(--brood), tekst 16, klein 14) en drie grijzen (inkt, tekst, zacht) */
.pagina-home { --grijs: var(--tekst); }
/* Koppen en citaten evenwichtig afbreken: geen los woord op de laatste regel */
h1, h2, h3, blockquote { text-wrap: pretty; }
/* Menu: het aantal vacatures als melding, zoals "5 nieuwe berichten" op een telefoon (vervangt het gele bolletje) */
.hoofdmenu a:has(.menu-tel) { position: relative; }
.menu-tel { top: -5px; right: -13px; font-size: 10px; font-weight: 500; line-height: 1; }
@media (max-width: 860px) { .menu-tel { top: 2px; right: -17px; } }
/* 861–1100: tellertje op dezelfde plek als op desktop, met ruimte erachter zodat het niet tegen 'Detachering' staat (17 px, als op desktop) */
@media (min-width: 861px) and (max-width: 1100px) { .hoofdmenu li:has(.menu-tel) { margin-right: 10px; } }

/* =====================================================================================
   WORKX-DETAILNORM (28 okt) — zie workx-detailnorm.md. Eén definitie per onderdeel,
   zodat elk onderdeel overal gelijk is. Paginaspecifieke stijlbestanden volgen hierop.
   ===================================================================================== */
/* B · knoppen: 16 px / 500, binnenruimte 15/24/14, hoek 2, pijl-icoon 18 px op 12 px, geel vult van links */
.wb-band-knop, .formulier .verstuur, .tv-pdfknop { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; padding: 15px 24px 14px; border-radius: 2px; font-size: 16px; font-weight: 500; letter-spacing: .01em; line-height: 1.6; text-transform: none; transform: none; }
/* secundair (omlijnd) */
.tv-pdfknop { background: transparent; color: var(--inkt); border: 0; box-shadow: inset 0 0 0 1px var(--inkt); }
.tv-pdfknop:hover { background: transparent; }
/* C · tekstlinks: één onderlijn (1 px, 2 px onder de tekst); pijl houdt zijn vorm; groter klikvlak */
.pijllink svg { flex: none; }
.tv-disclaimer a, .stem figcaption a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.tv-disclaimer svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .3s var(--ease); }
.tv-disclaimer a:hover svg { transform: translateX(4px); } /* zoals .pijllink */
/* D · chips: één stijl — 44 px hoog, rand 1,5 px, rond, gelijke binnenruimte; gekozen = zwart */
.filter button { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--inkt); color: var(--inkt); font-size: 14px; letter-spacing: 0; text-transform: none; }
.filter button:hover { background: var(--geel); color: var(--inkt); }
.filter button[aria-pressed="true"] { background: var(--inkt); color: var(--wit); }
.filter button .aantal { font-size: 13px; }
@media (max-width: 760px) { .filter button { background: transparent; } }
/* keuzesegment (transitievergoeding, reorganisatieplanner) als chiprij */
.tv-segment { background: none; padding: 0; gap: 8px; border-radius: 0; }
.tv-segment span { font-size: 14px; }
.tv-segment input:not(:checked):hover + span { background: var(--geel); }
.tv-schakel { min-height: 44px; }
/* E17 · afrondingen: kaarten en foto's 14, knoppen en velden 2, chips rond */
.relatie-tegel, .relatie-detail .binnen, .lid, .tv-basis, .tv-kaart, .tv-mini, .formulier, .baan figure { border-radius: var(--hoek); }
.tv-basis input, .tv-kaart input, .tv-mini input, .tv-mini select, .tv-basis select, .tv-datum { border-radius: 2px; }
/* F · koppen: paginatitel als één rol, groter dan de sectiekop (zoals live: 56 px); evenwichtig afbreken */
.pagina-kop .sectiekop h1, .pagina-kop h1 { font-size: clamp(32px, 2.6vw + 20px, 56px); line-height: 1.06; }
h1, h2, h3, legend { text-wrap: balance; }
blockquote, .stem blockquote { text-wrap: pretty; }
.verhaal p, .stem figcaption { text-wrap: pretty; }
@media (max-width: 560px) { .stem blockquote { text-wrap: balance; } }
.tv-blok h2 { font-size: clamp(30px, 3.6vw, 52px); }
/* G/A · uitlijning: iconen boven koppen op de linkerrand; fotobaanknoppen niet tegen de sectierand */
.erkenning, .erkenning.geel { overflow: visible; }
.baan-nav { padding-bottom: clamp(36px, 4vw, 56px); }
.tv-meer-inhoud { padding-left: 0; padding-right: 0; }
.tv-opbouw { column-gap: 0; }
.teamlid .wrap { align-items: start; }
@media (max-width: 860px) { .voet-onder .wrap { padding-right: 72px; } }
/* J · beweging binnen 150–450 ms */
.js [data-in] { transition-duration: .45s; }
.sectiekop .icoon { margin-left: -6px; } /* het teken staat in het svg-vak 5–7 px ingesprongen; zo valt het op de koprand */
.stap-icoon { margin-left: -9px; } /* de gele cirkel staat in het svg-vak ± 9 px ingesprongen; zo valt hij op de as van label, kop en tekst (mobiel: icoon verborgen) */
.wb-band-vac .wb-band-i { white-space: nowrap; opacity: 1; margin-right: 0; }
@media (max-width: 860px) { .wb-band-vac { justify-content: flex-start; } .wb-band-vac > span:first-child { text-align: left; } }
.tv-datum, .tv-basis input, .tv-mini input, .tv-kaart input { border-radius: 2px; }
.tv-veld input { border-radius: 2px; }
a[href^="tel"] { white-space: nowrap; }
.tv-pdfknop { text-align: left; justify-content: space-between; }
.filter { gap: 8px; }
/* oude vaste gele ramen (4e verdieping) onder de tijdgestuurde wx-raam-kopieën: verbergen, anders branden ze altijd */
.held-pand path.st1:not(.wx-raam), .avond-pand path.st1:not(.wx-raam), .verhaal-svg path.st1:not(.wx-raam) { fill-opacity: 0; filter: none; }

/* ---------- werken-bij-band op de startpagina (vervolg) ---------- */
/* sticker 'x vacatures open' op de startpagina: labelmaat 13 px / 0,14 em, zoals alle labels (normfix 28 okt) */
.wb-band-sticker { border-radius: 2px; }
/* werken-bij-band weer geel (keuze Jochem, 28 okt: optie 2 van werken-bij-band-geel.html): de sticker wordt een wit etiket
   met zwarte rand en harde schaduw, en onder de knop schuift wit in plaats van geel (geel valt weg op geel) */
.wb-band { border-block: 0; }
.wb-band-sticker { border: 1.5px solid var(--inkt); }
@keyframes wbStipPuls { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(2.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wb-band-sticker i, .wb-band-sticker i::after { animation: none; } }
/* buiten beeld stil op dezelfde stand (script.js zet .buiten-beeld op de band); in beeld verandert niets */
.wb-band.buiten-beeld .wb-band-sticker, .wb-band.buiten-beeld .wb-band-sticker i::after, .wb-band.buiten-beeld .wb-band-knop svg { animation-play-state: paused; }
/* naar-boven-knop op mobiel 20px van de rand, net als de tekst */
@media (max-width: 860px) { .naarboven { right: 20px; } }
/* 'Works Council' als vast label onder het logo van een ondernemingsraad: overal dezelfde plek en stijl (28 okt).
   De tekst zat eerst in elk logo zelf gebakken, steeds anders geplaatst. */
.wc-label { display: block; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); text-align: center; white-space: nowrap; padding-left: .14em; font-weight: 500; }
/* klantenpagina: tegel van een ondernemingsraad; het logo blijft in hetzelfde vak als de andere logo's (op één lijn) */
.relatie-tegel .wc-label { position: absolute; left: 0; right: 0; bottom: 11%; }
/* ook op mobiel 13 px / 0,14 em, zoals elk label (normfix 29 okt; was 10 px / 0,12 em onder 560). Het woord is 129 px breed en
   past ook in de smalste tegel (135 px bij 320). De volgafstand na de laatste letter wordt links gespiegeld (padding-left),
   zodat het woord optisch precies in het midden staat. */
@media (max-width: 860px) { .relatie-tegel .wc-label { bottom: 9%; } }
/* alleen onder 360 (tegels 135-154 px): met 0,14 em raakt het woord bijna de tegelranden (3 px) en het logo erboven. Kleinste
   aanpassing die wel past: 13 px blijft, de spatiëring gaat naar 0,06 em (±9 px marge) en het label zakt iets (9% -> 6%). */
@media (max-width: 359px) { .relatie-tegel .wc-label { letter-spacing: .06em; padding-left: .06em; bottom: 6%; } }
/* NL-label "Ondernemingsraad" (keuze 30 okt) is breder dan "Works Council": tot 419 px dezelfde krappere letterafstand, anders raakt het de tegelrand (375: 168 px tekst in een tegel van 163) */
@media (max-width: 419px) { .relatie-tegel .wc-label { letter-spacing: .06em; padding-left: .06em; } }
/* tablet (561-860): drie kolommen, zodat de tegels niet groter zijn dan op laptop (29 okt) */
@media (min-width: 561px) and (max-width: 860px) { .relatie-raster { grid-template-columns: repeat(3, 1fr); } }
/* mobiel (tot 560): alle tegels iets hoger, zodat het WORKS COUNCIL-label niet tegen de onderrand zit (29 okt) */
@media (max-width: 560px) { .relatie-tegel { aspect-ratio: 340 / 228; } .relatie-tegel .wc-label { bottom: 11%; } }
/* label 'Ondernemingsraad' kleiner en rustiger (31 okt; zelfde maat als op de doorklikpagina ondernemingsraden) */
.relatie-tegel .wc-label { font-size: 11px; font-weight: 400; letter-spacing: .12em; padding-left: .12em; color: var(--grijs); }
@media (max-width: 560px) { .relatie-tegel .wc-label { font-size: 10px; letter-spacing: .1em; padding-left: .1em; } }
/* logobanden: elk logo krijgt onderin ruimte voor het label, ook als het er geen heeft, zodat alle logo's op één lijn blijven */
.logoband-item { position: relative; box-sizing: border-box; padding-bottom: 16px; }
.logoband-item .wc-label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
/* "ONDERNEMINGSRAAD" is langer dan "WORKS COUNCIL": in de band iets kleiner en smaller (wens Jochem 30 okt) */
.logoband-item .wc-label:lang(nl) { font-size: 11px; letter-spacing: .1em; padding-left: .1em; }
@media (max-width: 860px) { .logoband-item .wc-label:lang(nl) { font-size: calc(11px / .78); letter-spacing: .05em; padding-left: .05em; } }
/* ---------- rekentool: wat telt mee, opzegtermijn, einddatum verschuiven ---------- */
.tv-meer + .tv-meer { border-bottom: 0; }
.tv-meer:last-of-type { border-bottom: 1px solid var(--inkt); }
.tv-telt { grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 560px) { .tv-telt { grid-template-columns: 1fr; } }
.tv-opzeg { margin: -4px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--tegel); font-size: 15px; line-height: 1.5; color: var(--grijs); }
.tv-opzegknop { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--inkt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; text-align: left; }
.tv-opzegknop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
@media (max-width: 420px) { .tv-opzeg { padding-inline: 12px; } .tv-opzegknop { font-size: 14px; } }
.tv-later { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.tv-later-kop { display: block; font-size: 16px; font-weight: 500; color: var(--inkt); }
.tv-schuif { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 4px 0 0; background: transparent; cursor: pointer; }
.tv-schuif:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.tv-schuif-schaal { display: flex; justify-content: space-between; margin-top: -4px; font-size: 13px; color: var(--zacht); }

/* ---------- ruimte vasthouden (geen layoutverschuiving), compacte kop, logoband ---------- */
/* erkenningen: zelfde patroon (gidsfilter en tijdlijn komen uit extra.js) */
.js [data-erkfilter]:empty { min-height: 44px; }
/* lege <i>-elementen (balkjes, plusjes) met een ::before/::after lieten de browser het cursieve font
   (45 kB) laden zonder dat er één cursieve letter op de pagina staat */
i:empty { font-style: normal; }
/* doelgroeplijst (home): bij hover schoof de tekst op via padding-left (layout per frame); nu dezelfde 14 px via transform */
.doellijst a, .doellijst a:hover { padding-left: 0; }
.doellijst a .tekst { transition: transform .35s var(--ease); }
.doellijst a:hover .tekst { transform: translateX(14px); }
/* 'naar boven' was onzichtbaar (opacity 0) maar wel met Tab bereikbaar; nu ook echt weg tot hij verschijnt */
.naarboven { transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s, background-color .3s, color .3s; }
.naarboven.zichtbaar { transition: opacity .3s, transform .3s var(--ease), visibility 0s, background-color .3s, color .3s; }
@media (hover: hover) { .naarboven:hover { background: var(--geel); color: var(--inkt); } } /* aanwijzen: geel, zoals de chips (.filter button:hover) */
/* compacte kop: het logo kromp via 'width' (layout bij elk frame; het menu ernaast verschoof mee = layoutverschuiving
   bij elke scroll voorbij 40 px). Nu exact hetzelfde beeld via transform: logo houdt zijn breedte en schaalt vanuit
   linksboven; op desktop schuift het menu met dezelfde 34 px mee via translate. Het logo zelf is ongewijzigd.
   Alleen waar het logo direct in .wrap staat; de WorkxIN-kop (.wi-merk) houdt de oude animatie. */
.kop-balk .wrap > .logo { transform-origin: 0 0; transition: transform .3s var(--ease); }
@media (min-width: 861px) {
  .kop-balk .wrap > .logo + nav { transition: transform .3s var(--ease); }
  .kop-balk.compact .wrap > .logo + nav { transform: translateX(-34px); }
}
/* logoband bij 'minder beweging': de 18 logo's liepen als losse flexregel door, met op sommige breedtes één logo alleen
   op de laatste regel (WorkxIN 1440: ERIKS). Nu een vast raster dat 18 altijd zonder rest verdeelt, afhankelijk van de
   breedte van de band zelf (container query): 6 kolommen vanaf 960 px bandbreedte, anders 3, en onder 520 px 2.
   Logo's houden hun eigen hoogte; alleen als een vak smaller is dan het logo schaalt het mee (contain).
   Het vervagen aan de randen (mask) valt weg, anders verdwijnen de buitenste kolommen half. */
@media (prefers-reduced-motion: reduce) {
  .logoband { -webkit-mask-image: none; mask-image: none; container-type: inline-size; }
  .logoband-rail { display: grid; gap: 16px 24px; } /* rijafstand (29 okt): het label 'Works council' kwam anders tegen het logo eronder */
  .logoband-item { width: 100%; margin-right: 0; min-width: 0; justify-content: center; }
  .logoband-item img { max-width: 100%; object-fit: contain; }
  @container (min-width: 520px) { .logoband-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @container (min-width: 960px) { .logoband-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .logoband-rail { row-gap: 12px; } }
/* stilstaand raster in de smalle gele banier (30 okt): de lopende band loopt bewust door tot de schermrand, het raster
   niet; het eindigt rechts op de kantlijn van de pagina (zelfde maat als .wrap) en op mobiel ook links op 20 px. */
@media (prefers-reduced-motion: reduce) {
  .banier-smal .logoband { box-sizing: border-box; padding-right: max(var(--rand), calc((100vw - var(--breed)) / 2)); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .banier-smal .logoband { padding-inline: var(--rand); }
}
/* compacte kop: de kop (sticky, in de documentstroom) wordt 20 px lager (mobiel 12 px), waardoor de hele pagina
   eronder op dat moment 20 px omhoog sprong (layoutverschuiving bij elke scroll voorbij 40 px). Een even grote
   marge-onder vangt dat op; die ruimte ligt altijd achter de kop zelf, dus aan het beeld verandert niets. */
.kop-balk { transition: background-color .3s, box-shadow .3s, height .3s var(--ease), margin-bottom .3s var(--ease); }
.kop-balk.compact { margin-bottom: 20px; }
@media (max-width: 860px) { .kop-balk.compact { margin-bottom: 12px; } }
/* compacte kop alleen met transform/opacity (normfix T10, 29 okt): de hoogte (88 -> 68, mobiel 72 -> 60) en de marge
   eronder wisselen nu in één keer, zonder overgang (samen blijven ze even hoog, dus er verschuift niets). Wat je ziet
   beweegt via transform: de witte laag (::before, vaste hoogte) schuift 20/12 px omhoog, menu, taalkeuze en menuknop
   schuiven 10/6 px mee naar het midden van de lagere balk, en het lijntje onder de balk (was box-shadow) is een eigen
   laag (::after) die meeschuift en invloeit. Zelfde maten, kleuren, duur en easing als voorheen; het logo is ongewijzigd.
   De wrap houdt zijn volle hoogte, maar vangt in de compacte stand geen klikken buiten de balk. Het mobiele menu (fixed,
   in nav) krijgt geen transform op een voorouder, anders zou het binnen de kop blijven hangen.
   Niet op WorkxIN (.wi): die kop (.wi-merk) houdt zijn eigen animatie. */
body:not(.wi) .kop-balk { transition: none; }
body:not(.wi) .kop-balk::after { content: ""; position: absolute; left: 0; right: 0; top: 88px; height: 1px; background: rgba(0,0,0,.07); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
body:not(.wi) .kop-balk .wrap > .taal, body:not(.wi) .kop-balk .wrap > .menuknop { transition: transform .3s var(--ease); }
body:not(.wi) .kop-balk.compact .wrap > .taal, body:not(.wi) .kop-balk.compact .wrap > .menuknop { transform: translateY(-10px); }
@media (max-width: 860px) {
  body:not(.wi) .kop-balk::before { height: 72px; }
  body:not(.wi) .kop-balk.compact::before { transform: translateY(-12px); background: rgba(255,255,255,.985); } /* telefoon: inhoud schemerde door de balk (testronde 31 okt) */
  body:not(.wi) .kop-balk::after { top: 72px; }
  body:not(.wi) .kop-balk.compact::after { transform: translateY(-12px); }
  body:not(.wi) .kop-balk .wrap { height: 72px; }
  body:not(.wi) .kop-balk.compact .wrap > .taal, body:not(.wi) .kop-balk.compact .wrap > .menuknop { transform: translateY(-6px); }
}
.filter button .aantal { opacity: .64; }

/* ===== Homepage mobiel (keuze Jochem 29 okt): het pand bovenaan blijft staan tijdens de drie beloftes (pand-mobiel.js) */
.hs .hs-baan { position: relative; }
.hs .hs-pin { --pw: min(calc((100vw - 2 * var(--rand, 20px)) * .86), 380px); position: sticky; top: 0; z-index: 1; height: calc(120px + var(--pw) * 415 / 378); margin-bottom: calc(-120px - var(--pw) * 415 / 378); padding-top: 120px; pointer-events: none; }
.hs .hs-pin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hs-dek, 0px); background: linear-gradient(to bottom, var(--wit, #fff) calc(100% - 28px), rgba(255,255,255,0)); opacity: var(--hs-b, 0); }
.hs .verhaal .stap { min-height: 62vh; justify-content: center; }
.hs .verhaal .stap:last-child { min-height: 50vh; }
.hs .hs-pin .held-pand { position: relative; top: auto; right: auto; width: var(--pw); max-width: none; margin: 0 auto; pointer-events: auto; transform-origin: 50% 0; transform: translateY(var(--hs-y, 0px)) scale(var(--hs-k, 1)); }
.hs .hs-plek { width: min(86%, 380px); aspect-ratio: 378 / 415; margin: 0 auto -38%; }
.hs .held-pand .licht { animation: none; opacity: 0; transition: opacity 1.1s ease; }
.hs .held-pand .licht.hs-aan { opacity: 1; }
.hs .hs-eind { height: 40px; } /* was de pandhoogte (± 340 px): gaf een leeg wit vlak tussen de derde belofte en de klantenband; nu ± 190 px, zoals op desktop */
/* geen layoutverschuiving: de -72px van .held klapt niet meer door main heen zodra pand-mobiel.js hem in .hs-baan zet */
@media (max-width: 860px) { .hs .hs-baan { margin-top: -72px; padding-top: 72px; } }

/* ===== Teampagina, per teamlid (keuze Jochem 29 okt, optie 1): geel functielabel, zwarte knop zoals het kaartje op home */
.teamlid .tl-functie { display: inline-block; margin: 0 0 14px; font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); background: var(--geel); padding: 7px 10px 6px; border-radius: 4px; vertical-align: top; }
.teamlid h2 { font-size: clamp(28px, 2.4vw, 36px); font-weight: 400; letter-spacing: -.01em; margin-bottom: 16px; }
.teamlid p:not(.tk *) { font-size: 18px; line-height: 1.6; max-width: 54ch; margin-bottom: 26px; text-wrap: pretty; }
/* knop volgens het grafisch systeem (zelfde als .dk-knop): 16px/500, padding 15-24-14, hoek 2px, geel schuift in bij aanwijzen */
.tl-knop { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 15px 24px 14px; border-radius: 2px; background: var(--inkt); color: var(--wit); font-size: 16px; font-weight: 500; letter-spacing: .01em; line-height: 1.6; text-decoration: none; transition: color .3s var(--ease); }
.tl-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.tl-knop:hover, .tl-knop:focus-visible { color: var(--inkt); }
.tl-knop:hover::before, .tl-knop:focus-visible::before { transform: scaleX(1); }
.tl-knop svg { width: 18px; height: 18px; flex: none; transition: transform .35s var(--ease); }
.tl-knop:hover svg, .tl-knop:focus-visible svg { transform: translateX(4px); }
.tl-knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
@media (max-width: 860px) { .teamlid p:not(.tk *) { font-size: 17px; } }
/* paginakop van de teampagina (met de chiprij): ruimte naar het eerste portret; stond eerst inline in team.html */
.pagina-kop:has(.kz-team) { padding-bottom: clamp(40px, 5vw, 72px); }

/* Terug naar het team (Jochem 29 okt): komt de teampagina binnen op een teamlid (team.html#<id>), dan meteen daar staan,
   zonder eerst de bovenkant te tonen en zichtbaar te scrollen, en zonder dat de blokken opnieuw infaden */
html:has(.teamlid:target) { scroll-behavior: auto; }
/* na de sprong precies onder de kopbalk (68px, ≤860: 60px) i.p.v. op 96px: geen streep van de vorige band erboven */
.teamlid { scroll-margin-top: -28px; }
@media (max-width: 860px) { .teamlid { scroll-margin-top: -36px; } }
.js:has(.teamlid:target) .teamlid [data-in] { opacity: 1; transform: none; transition: none; }
/* EN-footer: langere juridische links ("(in Dutch)"); tussen 680 en 1023px (3 kolommen passen pas vanaf ~674) rustig 3 + 2 i.p.v. 4 + 1 weeskind */
@media (min-width: 680px) and (max-width: 1023px) { html[lang="en"] .voet-juridisch ul { display: grid; grid-template-columns: repeat(3, max-content); justify-content: start; } }
/* footer mobiel (keuze 30 okt, optie 1): juridische rij 25px uit elkaar, zodat elke link een eigen aanraakvlak van 44px heeft */
@media (max-width: 760px) { .voet-juridisch ul { row-gap: 25px; } }

/* =========================================================================
   Beweging — voorheen beweging.css (samengevoegd met style.css op 31 okt 2026: één stylesheet minder, eerder eerste
   beeld). Staat bewust ACHTERAAN style.css. Vroeger laadde dit bestand als laatste, ná de paginabestanden
   (doorklik.css, team-kaart.css, kennis.css, artikel.css, workx-in.css …); nu komt het daarvóór. Waar een regel
   hieronder bij gelijke specificiteit van een paginabestand zou verliezen, is hij met 'html' (of html.wx-bw) een
   haar specifieker gemaakt (+1 element), zodat hij precies wint waar hij vroeger won:
     html .lid:hover img / html .tk-lid.tk-open img   (team-kaart.css .tk-lid.tk-open img, workx-in.css .wt .lid img)
     html.wx-bw .kn-knop::before                       (kennis.css .kn-knop.vol::before)
     html.wx-bw .lid / html.wx-bw .lid img             (workx-in.css .wt .lid, .wt .lid img)
     html .ka-leesbalk / html .ka-leesbalk span        (artikel.css .ka-leesbalk, .ka-leesbalk span)
     html.wx-bw .lid.bw-p-wacht / .bw-p-op             (team-kaart.css .team-raster .tk-lid.tk-open, workx-in.css)
   Nieuwe regels in een paginabestand die hetzelfde element raken: let op dezelfde volgorde.
   beweging.css zelf blijft bestaan voor de demo-pagina's (demo-teamkaart.html, demo-toestemming.html).
   ========================================================================= */
/* beweging.css — beweging en details, goedgekeurd door Jochem op 30 okt 2026 (uit demo-beweging.html).
   Ideeën: 1A-2 pen trekt de lijnen van het pand · 1C diepte met de muis · 2A markeerstift op 'arbeidsrecht' ·
   4A pijl en groeiende lijn · 4B foto zoomt 2,5% · verfijnde timing ·
   6A/6B menustreepje glijdt en morft bij paginawissel · 7A koppen regel voor regel · 8A gele leesvoortgang ·
   9A zoekveld typt zelf (404) · 10C schaduwlijn onder de menubalk · 11A haarlijnen boven de kerncijfers ·
   12A citatenstapel bouwt zich op · 13 portretten komen zacht binnen · 14 citatenblok WorkxIN.
   Werking: beweging.js zet html.wx-bw zodra beweging mag (niet bij prefers-reduced-motion). Alles wat beweegt hangt
   aan .wx-bw; zonder die klasse (minder beweging, of geen JavaScript) blijft de pagina precies zoals hij was, met alleen
   de statische details (10C, 8A-kleur, 4B-maat). Geanimeerd worden alleen transform, opacity en clip-path. */

:root {
  --bw-in: cubic-bezier(.16, 1, .3, 1);      /* snel in, zacht tot stilstand */
  --bw-uit: cubic-bezier(.4, 0, .2, 1);      /* kort en beslist terug */
  --bw-veer: cubic-bezier(.34, 1.3, .64, 1); /* terugval voor browsers zonder linear() */
}
@supports (transition-timing-function: linear(0, 1)) {
  /* gedempte veer (demping 0,7): 4,6% doorschieten, stil na 0,5 s */
  :root { --bw-veer: linear(0, 0.049, 0.167, 0.316, 0.471, 0.616, 0.741, 0.842, 0.919, 0.974, 1.011, 1.033, 1.043, 1.046, 1.043, 1.038, 1.031, 1.024, 1.017, 1.011, 1.007, 1.003, 1); }
}

/* ---------- 1A-2 · de pen trekt de lijnen van het pand (eenmaal per sessie, homepage) ----------
   De <head> van de homepage zet html.wx-pen als de intro deze sessie nog moet spelen: dan staat het pand vanaf het
   eerste beeld uit, tot beweging.js het tekent (noodrem: komt beweging.js niet binnen 3,2 s na het eerste beeld (heel trage verbinding), dan staat het pand er gewoon, zonder pen). Tijdens het tekenen staan twee
   canvassen over de SVG; aan het eind kruist het canvas in 300 ms over naar de echte, goedgekeurde tekening. */
html.wx-pen .held-pand { animation: none; }
html.wx-pen .held-pand svg { opacity: 0; transition: none; animation: bwNood 0s linear 3.2s forwards; }
@keyframes bwNood { to { opacity: 1; } }
html.wx-pen.wx-pen-wacht .held-pand svg { animation: none; } /* achtergrondtabblad: wachten tot het in beeld komt (beweging.js) */
/* tijdens het tekenen (en ervoor) geen 'kijkje binnen' (binnen.js) op het nog onzichtbare pand */
.held-pand svg.bw-tekent .kb-zone, .wx-bw .wb-pand.bw-pen-wacht .kb-zone { pointer-events: none; }
html.wx-pen-loopt .held-pand { animation: none; }
.bw-doeken { position: absolute; inset: 0; pointer-events: none; display: none; }
.bw-doeken.zicht { display: block; }
.bw-doeken canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.bw-doeken.weg { opacity: 0; transition: opacity .2s ease .15s; } /* eerst komt de SVG eronder op, dan pas gaat het canvas weg: geen lichtere dip */
.held-pand svg.bw-tekent { opacity: 0 !important; transition: none !important; animation: none !important; }
.held-pand svg.bw-overkruis { opacity: 1; transition: opacity .3s ease !important; animation: none !important; }
/* 1A-3 · werken bij: wachten op de pen (pand nog niet getekend) en tijdens het tekenen geen scroll-opbouw (--bouw,
   werken-bij.css) en nog geen licht; daarna gelden .aan/.af van werken-bij.js weer zoals nu */
.wx-bw .wb-pand.bw-pen-wacht .held-pand svg { opacity: 0; }
.wx-bw .wb-pand.bw-pen-wacht .held-pand svg, .wx-bw .wb-pand.bw-pen-loopt .held-pand svg { clip-path: none; }
.wx-bw .wb-pand.bw-pen-wacht .held-pand .licht, .wx-bw .wb-pand.bw-pen-loopt .held-pand .licht { animation-play-state: paused; }
.wx-bw .wb-pand.bw-pen-wacht .kb-glimp, .wx-bw .wb-pand.bw-pen-loopt .kb-glimp { opacity: 0; }

/* ---------- 1C · diepte met de muis (alleen met een muis, na de intro van de held) ---------- */
.bw-held-klaar .held .vogel, .bw-held-klaar .held .held-bg, .bw-held-klaar .held-pand { animation: none; }

/* ---------- 2A · markeerstift op 'arbeidsrecht' (beweging.js zet de span om het woord) ---------- */
.bw-stift { position: relative; z-index: 0; padding: 0 .06em; margin: 0 -.06em; }
.bw-stift::before { content: ""; position: absolute; inset: 14% 0 4%; z-index: -1; background: var(--geel); transform: scaleX(0); transform-origin: 0 50%; }
.bw-stift.aan::before, html:not(.wx-bw) .bw-stift::before { transform: none; }
/* zonder eigen opvulling, zodat de rest van de regel geen subpixel verschuift (2B, held WorkxIN) */
.bw-stift.bw-stift-los { padding: 0; margin: 0; }
.bw-stift.bw-stift-los::before { left: -.06em; right: -.06em; }
.wx-bw .bw-stift.aan::before { transition: transform .85s cubic-bezier(.65, .05, .25, 1) var(--bw-stift-wacht, .12s); }
/* 2B · werken bij: het bestaande gele vlak onder 'hier?' (werken-bij.css: achtergrondverloop) tekent zich van links in.
   Alleen de achtergrondmaat van één woord; na afloop vallen de klassen weg en staat het vlak precies zoals ontworpen. */
.wx-bw .wb-markeer.bw-teken-wacht { background-repeat: no-repeat; background-size: 0% 100%; }
.wx-bw .wb-markeer.bw-teken { background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .85s cubic-bezier(.65, .05, .25, 1); }

/* ---------- 4A · pijl schuift op, lijn groeit ---------- */
.doellijst a::before { display: none; }
.doellijst a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--inkt); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); pointer-events: none; }
.doellijst a:hover::after, .doellijst a:focus-visible::after { transform: none; }
.doellijst a:hover .tekst, .doellijst a:focus-visible .tekst { transform: translateX(10px); }
.doellijst a:hover .plus, .doellijst a:focus-visible .plus { transform: translateX(4px) rotate(90deg); }
/* alleen pijllinks met de pijl ná de tekst (beweging.js zet .bw-pijl en meet de lijn: links, hoogte en lengte gelijk
   aan de huidige onderstreping van de tekst); links met een icoon vóór de tekst (vCard, LinkedIn) blijven zoals ze zijn */
.pijllink.bw-pijl { position: relative; }
.pijllink.bw-pijl span { background-size: 0 0; }
.pijllink.bw-pijl::after { content: ""; position: absolute; left: var(--bw-x, 0px); bottom: var(--bw-y, 0px); width: var(--bw-w, 82%); height: 1px; background: currentColor; transform-origin: 0 50%; transition: transform .35s var(--ease); pointer-events: none; }
.pijllink.bw-pijl:hover::after, .pijllink.bw-pijl:focus-visible::after { transform: scaleX(var(--bw-g, 1.2)); }
.pijllink.bw-pijl:hover svg, .pijllink.bw-pijl:focus-visible svg { transform: translateX(6px); }

/* ---------- 4B · foto zoomt 2,5% binnen zijn kader ---------- */
.lid img { transition: transform .5s var(--ease); }
html .lid:hover img, html .tk-lid.tk-open img { transform: scale(1.025); transition: transform .9s var(--bw-in); }

/* ---------- verfijnde timing: snel in, sneller uit, minieme veer ---------- */
/* uit (rust): 0,25 s */
.wx-bw .hoofdmenu a::after,
.wx-bw .wb-band-knop::before, html.wx-bw .kn-knop::before, .wx-bw .wi-knop::before, .wx-bw .wi-knop-rand::before,
.wx-bw .doellijst a::before, .wx-bw .doellijst a::after, .wx-bw .doellijst a .tekst, .wx-bw .doellijst a .plus,
.wx-bw .pijllink::after, .wx-bw .lid::after { transition: transform .25s var(--bw-uit), opacity .25s var(--bw-uit); }
.wx-bw .pijllink svg, .wx-bw .kn-knop svg, .wx-bw .wi-knop svg, .wx-bw .wi-knop-rand svg, .wx-bw .wb-band-knop svg { transition: transform .25s var(--bw-uit); }
html.wx-bw .lid { transition: transform .25s var(--bw-uit); }
html.wx-bw .lid img { transition: transform .3s var(--bw-uit); }
.wx-bw .wb-band-knop, .wx-bw .kn-knop, .wx-bw .wi-knop, .wx-bw .wi-knop-rand { transition: color .25s var(--bw-uit), background-color .25s var(--bw-uit), transform .5s var(--bw-veer); }
/* in (aanwijzen): 0,45 s */
.wx-bw .hoofdmenu a:hover::after,
.wx-bw .wb-band-knop:hover::before, .wx-bw .kn-knop:hover::before, .wx-bw .wi-knop:hover::before, .wx-bw .wi-knop-rand:hover::before,
.wx-bw .wb-band-knop:focus-visible::before, .wx-bw .kn-knop:focus-visible::before, .wx-bw .wi-knop:focus-visible::before, .wx-bw .wi-knop-rand:focus-visible::before,
.wx-bw .doellijst a:hover::before, .wx-bw .doellijst a:hover::after, .wx-bw .doellijst a:hover .tekst,
.wx-bw .pijllink:hover::after, .wx-bw .lid:hover::after { transition: transform .45s var(--bw-in), opacity .45s var(--bw-in); }
.wx-bw .lid:hover { transition: transform .45s var(--bw-in); }
.wx-bw .lid:hover img, .wx-bw .tk-lid.tk-open img { transition: transform .9s var(--bw-in); }
/* de veer: pijlen en het plusje schieten een haar door en komen dan tot rust */
.wx-bw .pijllink:hover svg, .wx-bw .kn-knop:hover svg, .wx-bw .wi-knop:hover svg, .wx-bw .wi-knop-rand:hover svg, .wx-bw .wb-band-knop:hover svg,
.wx-bw .doellijst a:hover .plus { transition: transform .5s var(--bw-veer); }
/* indrukken: knop geeft 2% mee en veert terug bij loslaten */
.wx-bw .wb-band-knop:active, .wx-bw .kn-knop:active, .wx-bw .wi-knop:active, .wx-bw .wi-knop-rand:active { transform: scale(.98); transition: transform .12s var(--bw-uit), color .25s, background-color .25s; }

/* ---------- 6A · menu-streepje glijdt mee  ·  6B · morft bij paginawissel ---------- */
.bw-glijder { position: absolute; left: 0; top: 0; width: 1px; height: 1.5px; background: var(--inkt); pointer-events: none; opacity: 0; }
.bw-glijder.klaar { transition: left .45s var(--bw-in), width .45s var(--bw-in), opacity .25s var(--bw-uit); }
.bw-glijder.zicht { opacity: 1; }
@media (min-width: 861px) {
  .kop-balk nav { position: relative; }
  .wx-bw .kop-balk .hoofdmenu a::after { display: none; }
  /* 6B: het streepje draagt dezelfde naam op de oude en de nieuwe pagina, dus de browser laat het van het ene
     menu-item naar het andere schuiven (cross-document view transition, style.css: @view-transition) */
  .bw-glijder.zicht { view-transition-name: menu-streep; }
}
@media (max-width: 860px) { .kop-balk .bw-glijder { display: none; } }
::view-transition-group(menu-streep) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); }
::view-transition-old(menu-streep) { display: none; }
::view-transition-new(menu-streep) { animation: none; width: 100%; height: 100%; }

/* ---------- 7A · koppen regel voor regel uit een onzichtbaar kader ---------- */
.bw-w, .bw-wi { display: inline-block; }
.wx-bw .bw-kop-wacht .bw-w, .wx-bw .bw-kop-op .bw-w { clip-path: inset(-.25em -.3em -.2em -.3em); }
.wx-bw .bw-kop-wacht .bw-wi { transform: translateY(118%); }
.wx-bw .bw-kop-op .bw-wi { transform: none; transition: transform .58s var(--bw-in) calc(var(--r, 0) * 70ms); }
/* tijdens de logo-intro nog niet tonen (anders: zichtbaar, weg, en dan pas in regels omhoog); noodrem gelijk aan naIntro() */
html.wx-intro.wx-bw .sectiekop h2 { opacity: 0; animation: bwNood 0s linear 2.6s forwards; }

/* ---------- 8A · leesvoortgang in geel (artikelpagina's) ---------- */
html .ka-leesbalk { z-index: 70; transition: opacity .3s; }
.ka-leesbalk.bw-buiten { opacity: 0; } /* alleen zichtbaar zolang je in de tekst bent (beweging.js) */
html .ka-leesbalk span { background: var(--geel-diep); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  .wx-bw.bw-lees-css { timeline-scope: --bw-lees; }
  .wx-bw.bw-lees-css .ka-tekst { view-timeline: --bw-lees block; view-timeline-inset: 0px; }
  .wx-bw.bw-lees-css .ka-leesbalk span { animation: bwLees linear both; animation-timeline: --bw-lees; animation-range: entry 70% exit 20%; }
}
@keyframes bwLees { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 10C · zachte schaduwlijn onder de menubalk bij scrollen ---------- */
/* zelfde lijn als nu (style.css / workx-in.css: .kop-balk::after), alleen zachter en iets dieper */
html body:not(.wi) .kop-balk::after, html .wi .kop-balk::after { height: 16px; background: linear-gradient(rgba(0, 0, 0, .085), rgba(0, 0, 0, .03) 4px, rgba(0, 0, 0, 0)); transition: opacity .45s var(--ease), transform .3s var(--ease); }

/* ---------- 11A · haarlijnen boven de kerncijfers trekken zich van links (werken bij) ---------- */
.wx-bw .wb-getallen .wrap > div { position: relative; border-top-color: transparent; }
.wx-bw .wb-getallen .wrap > div::before { content: ""; position: absolute; left: 0; right: 0; top: -1.5px; height: 1.5px; background: var(--inkt); transform-origin: 0 50%; }
.wx-bw .wb-getallen:not(.bw-in) .wrap > div::before { transform: scaleX(0); }
.wx-bw .wb-getallen.bw-in .wrap > div::before { transition: transform 1.1s var(--bw-in); }
.wx-bw .wb-getallen.bw-in .wrap > div:nth-child(2)::before { transition-delay: .14s; }

/* ---------- 12A · citatenstapel bouwt zich op: kaarten vallen erop met een zachte veer (animatie in beweging.js) ---------- */
.wx-bw .stapel-sectie .stapel-kaarten[data-in] { opacity: 1; transform: none; transition: none; }
.bw-stapel-wacht .stapel-kaart { visibility: hidden; }
/* tijdens het binnenkomen steken kaarten even buiten de sectie uit: niet horizontaal laten scrollen */
.wx-bw .stemmen.stapel-sectie { overflow-x: clip; }

/* ---------- 13 · portretten komen zacht binnen (beweging.js zet de klassen; na afloop vallen ze weg) ---------- */
/* wachten: kaart onzichtbaar en 10 px lager; foto en naam apart onzichtbaar. Specifieker dan .js [data-in] (style.css)
   en .wx-bw .lid hierboven, zodat alleen deze opkomst geldt. */
html.wx-bw .lid.bw-p-wacht, html.wx-bw .lid.bw-p-wacht[data-in] { opacity: 0; transform: translateY(10px); transition: none; }
html.wx-bw .lid.bw-p-op, html.wx-bw .lid.bw-p-op[data-in] { opacity: 1; transform: none; transition: opacity .45s ease-out var(--bw-p-d, 0ms), transform .6s var(--bw-in) var(--bw-p-d, 0ms); }
.wx-bw .lid.bw-p-wacht img, .wx-bw .lid.bw-p-op:not(.bw-p-foto) img { opacity: 0; }
.wx-bw .lid.bw-p-op.bw-p-foto img { opacity: 1; transition: opacity .45s ease-out calc(var(--bw-p-d, 0ms) + 60ms), transform .45s var(--ease); }
.wx-bw .lid.bw-p-wacht .naam { opacity: 0; transform: translateY(4px); }
.wx-bw .lid.bw-p-op .naam { opacity: 1; transform: none; transition: opacity .4s ease-out calc(var(--bw-p-d, 0ms) + 120ms), transform .5s var(--bw-in) calc(var(--bw-p-d, 0ms) + 120ms); }

/* ---------- 14 · WorkxIN: citatenblok komt rustig binnen ---------- */
.wx-bw .bw-erk-wacht .wf-badges, .wx-bw .bw-erk-wacht .wf-erk-kop > p, .wx-bw .bw-erk-wacht .wf-erk-citaten blockquote, .wx-bw .bw-erk-wacht .wf-erk-citaten figcaption { opacity: 0; transform: translateY(8px); }
.wx-bw .bw-erk-op .wf-badges, .wx-bw .bw-erk-op .wf-erk-kop > p, .wx-bw .bw-erk-op .wf-erk-citaten blockquote, .wx-bw .bw-erk-op .wf-erk-citaten figcaption { transition: opacity .5s ease-out var(--bw-e, 0s), transform .6s var(--bw-in) var(--bw-e, 0s); }
.bw-erk-op .wf-erk-kop > p { --bw-e: .12s; }
.bw-erk-op .wf-erk-citaten figure:nth-child(1) blockquote { --bw-e: .28s; }
.bw-erk-op .wf-erk-citaten figure:nth-child(2) blockquote { --bw-e: .43s; }
.bw-erk-op .wf-erk-citaten figcaption { --bw-e: .62s; }

/* ---------- minder beweging: alles statisch (de eindstand), geen overgangen van de nieuwe details ---------- */
@media (prefers-reduced-motion: reduce) {
  .doellijst a::after, .doellijst a .tekst, .doellijst a .plus, .pijllink::after, .pijllink svg, .lid img, html .ka-leesbalk { transition: none; }
}

/* ---------- contactformulier met zwevend label (.formulier.zweef; variant A, keuze Jochem 31 okt) ----------
   Home, contact, de doorklikpagina's en WorkxIN (NL en EN). Volgorde in de code vraag, naam, e-mail, telefoon (= desktopbeeld);
   op de telefoon toont order de vraag onder telefoon. Het label staat groot
   in het veld en schuift bij focus of invoer als klein label (labelnorm: 13px, hoofdletters, .14em) naar boven: twee lagen
   die in elkaar overvloeien (geen sprong in hoofdletters). De lijn hoort bij .zv-veld; het veld zelf heeft geen rand.
   Vraagveld begint op 4 regels en groeit mee (script.js), na 14 regels scrolt het zelf. Foutmelding per veld (.zv-fout).
   Telefoon: één kolom, knop over de volle breedte. Desktop: vraag links, velden rechts, zoals voorheen. */
.formulier.zweef { align-items: start; }
.formulier.zweef .zv-veld { position: relative; border-bottom: 1px solid var(--lijn); transition: border-color .25s, box-shadow .25s; }
.formulier.zweef .velden { display: block; }
.formulier.zweef .velden .zv-veld + .zv-veld { margin-top: 4px; }
.formulier.zweef .zv-veld :is(input, textarea) { display: block; width: 100%; margin: 0; padding: 30px 0 11px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 18px; line-height: 1.4; color: var(--inkt); caret-color: var(--inkt); -webkit-appearance: none; appearance: none; box-shadow: none; }
.formulier.zweef .zv-veld textarea { resize: none; overflow: hidden; min-height: calc(4 * 1.4em + 41px); max-height: calc(14 * 1.4em + 41px); }
.formulier.zweef .zv-veld textarea.zv-vol { overflow-y: auto; }
/* de ruimte voor het kleine label als rand in plaats van padding: bij een lange vraag scrolt de tekst dan niet onder
   'JE VRAAG' door (padding scrolt mee, een rand niet); hoogtes blijven gelijk (border-box). Testronde 1 nov */
.formulier.zweef .zv-veld textarea { padding-top: 0; border-top: 30px solid transparent; }
@media (forced-colors: active) { .formulier.zweef .zv-veld textarea { border-top-color: Canvas; } }
.formulier.zweef .zv-veld :is(input, textarea):focus, .formulier.zweef .zv-veld :is(input, textarea):focus-visible { outline: none; box-shadow: none; }
.formulier.zweef .zv-label { position: absolute; left: 0; right: 0; top: 0; display: block; pointer-events: none; }
.formulier.zweef :is(.zv-groot, .zv-klein) { position: absolute; left: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .2s var(--ease), transform .3s var(--ease); }
.formulier.zweef .zv-groot { top: 30px; font-size: 18px; line-height: 1.4; color: var(--veld-hint); }
.formulier.zweef .zv-klein { top: 9px; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); opacity: 0; transform: translateY(10px); }
/* '(verplicht)' niet in beeld (Jochem 31 okt): wie iets leeg laat, krijgt bij Versturen een melding onder het veld; schermlezers horen het via .sr-only in het label */
.formulier.zweef .zv-noot { display: none; }
.formulier.zweef .zv-veld:is(:focus-within, .zv-gevuld) .zv-groot { opacity: 0; transform: translateY(-10px); }
.formulier.zweef .zv-veld:is(:focus-within, .zv-gevuld) .zv-klein { opacity: 1; transform: none; }
.formulier.zweef .zv-veld:focus-within { border-bottom-color: var(--inkt); box-shadow: inset 0 -1px 0 var(--inkt); } /* inset: een buitenschaduw gaf in Chrome links een grijs randje */
.formulier.zweef .zv-veld:focus-within .zv-klein { color: var(--inkt); }
.formulier.zweef .zv-veld:has([aria-invalid="true"]) { border-bottom-color: var(--fout); box-shadow: inset 0 -1px 0 var(--fout); } /* ook met focus */
.formulier.zweef .zv-veld:has([aria-invalid="true"]) .zv-klein { color: var(--fout); }
.formulier.zweef .zv-fout { position: absolute; left: 0; right: 0; top: 100%; margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--fout); }
.formulier.zweef .zv-fout:empty { display: none; }
.formulier.zweef .zv-veld:has(.zv-fout:not(:empty)) { margin-bottom: 34px; }
.formulier.zweef .zv-vraag { margin-top: 12px; }
.formulier.zweef .zv-slot { margin-top: 28px; display: grid; gap: 16px; justify-items: stretch; }
.formulier.zweef .zv-slot .verstuur { margin: 0; align-self: auto; }
.formulier.zweef .zv-slot .melding { grid-column: auto; margin: 0; min-height: 0; max-width: none; text-wrap: wrap; } /* niet de WebKit-"pretty" van .dk-pagina main p: die brak al op tweederde af */
.formulier.zweef .zv-slot .melding:empty { display: none; }
.formulier.zweef .zv-uitleg { margin: 0; max-width: none; font-size: 14px; line-height: 1.5; color: var(--zacht); text-wrap: wrap; }
.formulier.zweef .zv-uitleg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.formulier.zweef .zv-uitleg a:hover { color: var(--inkt); }
@media (max-width: 860px) {
  .formulier.zweef { padding: 10px 22px 24px; }
  .formulier.zweef .velden { order: -1; } /* in de code staat de vraag eerst (Tab op desktop: links, dan rechts); op de telefoon blijft hij onder telefoon */
  .formulier.zweef .zv-slot .verstuur { width: 100%; min-height: 52px; justify-content: space-between; padding-left: 22px; padding-right: 20px; }
}
@media (min-width: 861px) {
  .formulier.zweef { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; padding-top: 22px; }
  .formulier.zweef .velden { grid-column: 2; grid-row: 1; }
  .formulier.zweef .zv-vraag { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; }
  .formulier.zweef .zv-vraag textarea { min-height: calc(8 * 1.4em + 41px); }
  .formulier.zweef .zv-slot { grid-column: 2; grid-row: 2; justify-items: start; }
}
/* de knop 'naar boven' wijkt zolang de verzendknop in beeld is (hij viel er op de telefoon overheen) */
.naarboven.zichtbaar.wijk { opacity: 0; transform: translateY(10px); pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .formulier.zweef :is(.zv-veld, .zv-groot, .zv-klein) { transition: none; } }

/* 'Workx Advocaten is er voor' (home): een pijl in plaats van het plusje, want het zijn links naar een andere pagina, geen
   uitklappers (Jochem 31 okt). Zelfde pijl als de pijllinks (--pijl-icoon); bij aanwijzen schuift hij 4 px op, zonder te draaien. */
html .doellijst a .plus::before { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--pijl-icoon) center / 22px 22px no-repeat; mask: var(--pijl-icoon) center / 22px 22px no-repeat; }
html .doellijst a .plus::after { display: none; }
html .doellijst a:hover .plus, html .doellijst a:focus-visible .plus { transform: translateX(4px); }

/* ---------- Windows Hoog contrast (testronde 1 nov) ---------- */
@media (forced-colors: active) {
  /* menuknop: de streepjes zijn achtergrondkleur en vielen weg tegen Canvas */
  .menuknop span, .menuknop span::before, .menuknop span::after { background: CanvasText !important; forced-color-adjust: none; }
  .menu-open .menuknop span { background: transparent !important; }
  /* markeerstift: zwarte tekst op zwarte Canvas */
  mark { background-color: Mark !important; color: MarkText !important; forced-color-adjust: none; }
  /* logo's: multiply/zwart-filter gaf op een donkere Canvas een zwart vlak; eigen witte plaat zoals de teamfoto's */
  .relatie-tegel img, .logoband-item img, .dk-logo img, .wb-spot-grijs img, .wb-spot-tegel img, .wf-badges img, .wi-gedetacheerd img, .stapel-logo {
    mix-blend-mode: normal !important; filter: grayscale(1) !important; background: #fff; forced-color-adjust: none;
  }
  .relatie-tegel { border: 1px solid CanvasText; }
  .relatie-tegel[aria-expanded="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
}

/* ---------- printen (testronde 1 nov): alles zichtbaar, geen kopbalk of zwevende delen ---------- */
@media print {
  .js [data-in], .wx-bw .lid.bw-p-wacht { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .kop-balk { position: static !important; }
  .kop-balk .menuknop, .conceptbalk, .naarboven { display: none !important; }
  /* nog meer 'pas in beeld'-onderdelen: profielblokken, loopbaan, stapelkaarten */
  .js [data-to], .p4-kader *, .stapel-kaart { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  /* zwevende en interactieve delen die op papier niets doen of inhoud afdekken */
  .wb-fiets, .wb-plakknop, .tv-pdfstap, .ka-delen, .ka-meer, .pdf-venster, video, iframe { display: none !important; }
  /* footer op papier: alleen de afzender, in donkere tekst (de zwarte footer gaf een eigen bijna zwarte pagina) */
  .voet { display: none !important; }
  body::after { content: 'Workx advocaten  ·  Herengracht 448, 1017 CA Amsterdam  ·  +31 (0)20 308 03 20  ·  workxadvocaten.nl'; display: block; margin-top: 24px; padding-top: 10px; border-top: 1px solid #999; font-size: 10pt; color: #1d1d1b; }
  /* niet midden in een kaart of blok afbreken, en geen kop als wees onderaan */
  .teamlid, .tv-kaart, .tv-opbouw, .ka-contact, .kn-sem, form { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  .tv-resultaat, .ka-zij { position: static !important; }
  /* rekentool: stand van schakelaars, gekozen bonus en schuif ook zonder achtergronden leesbaar */
  .tv-knop, .tv-knop *, .tv-segment, .tv-segment *, .tv-schuif { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 1A-4 · avondpand op de homepage: pen tekent, daarna pas de lichten (1 nov) */
.avond-pand svg.bw-tekent { opacity: 0 !important; transition: none !important; }
.avond-pand svg.bw-overkruis { opacity: 1; transition: opacity .3s ease !important; }
.wx-bw .contact.avond.bw-pen-wacht .avond-pand svg { opacity: 0; }
.wx-bw .contact.avond.bw-pen-wacht .avond-pand .licht, .wx-bw .contact.avond.bw-pen-loopt .avond-pand .licht { animation: none !important; opacity: 0; }
.wx-bw .contact.avond.bw-pen-wacht .avond-pand .st1, .wx-bw .contact.avond.bw-pen-loopt .avond-pand .st1 { filter: none !important; }

/* 1A-5 · WorkxIN: pen tekent het pand in de footer (1 nov) */
.bw-voet-vak { position: relative; }
.bw-pand-voet { position: absolute; pointer-events: none; }
.bw-pand-voet svg { display: block; width: 100%; height: 100%; opacity: 0; }
.bw-pand-voet svg.bw-overkruis { opacity: 1; transition: opacity .3s ease; }
.bw-voet-tekent img.pand { opacity: 0; }

/* ---------- keuzeveld (Ons team, Klanten; Jochem 2 nov, optie 3 uit demo-keuzeveld.html): geel etiket dat een zwevend paneel opent.
   Zonder JavaScript (html zonder .js) staat de lijst gewoon open. Op de telefoon duwt het paneel de pagina omlaag. */
.kz { position: relative; z-index: 3; margin-top: 32px; }
.pagina-kop:has(.kz.open) { position: relative; z-index: 40; }
.kz-veld { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; min-width: min(100%, 320px); padding: 0 18px; border: 0; border-radius: 2px; background: var(--geel); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); color: var(--inkt); font: inherit; font-size: 17px; text-align: left; cursor: pointer; transition: background-color .2s; }
.kz-veld:hover { background: var(--geel-diep); }
.kz-veld:focus-visible, .kz-lijst a:focus-visible, .kz .filter button:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.kz-veld small { display: block; margin-bottom: 1px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--inkt); opacity: .68; }
.kz-veld svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
.kz-veld[aria-expanded="true"] svg { transform: rotate(180deg); }
.kz-paneel { position: absolute; z-index: 10; left: 0; top: calc(100% + 10px); width: min(100%, 980px); padding: clamp(16px, 2vw, 28px); background: var(--wit); border-radius: 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 22px 54px -18px rgba(0, 0, 0, .28); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s var(--ease), transform .25s var(--ease), visibility .25s; }
.kz.open .kz-paneel { opacity: 1; visibility: visible; transform: none; }
html:not(.js) .kz-veld { display: none; }
html:not(.js) .kz-paneel { position: static; width: auto; padding: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
.kz-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 clamp(16px, 2vw, 28px); }
.kz-lijst a, .kz .filter button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 10px; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; background: none; box-shadow: none; color: var(--inkt); font: inherit; font-size: 16px; letter-spacing: normal; text-transform: none; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.kz-lijst a:hover, .kz .filter button:hover, .kz .filter button[aria-pressed="true"] { background: var(--geel); color: var(--inkt); }
.kz .filter { display: grid; margin: 0; padding: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.kz .filter button { flex: initial; }
.kz .filter button .aantal { margin-left: auto; font-size: 13px; color: var(--zacht); }
.kz-tw { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(20px, 2.6vw, 36px); align-items: start; }
.kz-voor { position: relative; aspect-ratio: 648 / 724; background: var(--papier); border-radius: 8px; overflow: hidden; }
.kz-voor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; opacity: 0; transition: opacity .2s var(--ease); }
.kz-voor img.aan { opacity: 1; }
.kz-voor-naam { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; background: var(--geel); color: var(--inkt); font-size: 14px; }
.kz-voor-naam:empty { display: none; }
@media (max-width: 760px) {
  .kz-tw { grid-template-columns: minmax(0, 1fr); }
  .kz-voor { display: none; }
  .kz-veld { width: 100%; }
  .kz-paneel { position: static; display: none; width: auto; margin-top: 10px; padding: 8px 14px; transform: none; }
  .kz.open .kz-paneel { display: block; }
  html:not(.js) .kz-paneel { display: block; }
}
@media (prefers-reduced-motion: reduce) { .kz-veld svg, .kz-paneel, .kz-voor img { transition: none; } }

/* ---------- Logo (7 nov, Jochem): de schaduw onder het gele blad was een effen grijs vlak (#cccece), omdat de vermenigvuldiging
   binnen het logo blijft. Op een foto (tuin op bijworkx, mobiel) zag dat er vlak uit. Nu een doorschijnende schaduw:
   op wit precies dezelfde kleur, op een foto een echte schaduw. De vorm van het logo blijft gelijk. ---------- */
.kop-balk .logo .logo-cls-4 { fill: #000; fill-opacity: .2; opacity: 1; mix-blend-mode: normal; }

/* menubalk schuift weg bij naar beneden scrollen en komt terug bij omhoog (feedback ttwwoo V5, 9 nov; script.js zet .kop-weg).
   Alleen een transform terwijl hij weg is: een blijvende transform maakt vaste lagen in de kop (telefoonmenu) vast aan de balk. */
html body:not(.wi) .kop-balk { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.kop-balk.kop-weg { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { html body:not(.wi) .kop-balk { transition: none; } }