/* ==========================================================================
   fonstrompenaars.nl — het gedeelde skelet van de webomgeving
   Home, /arbeidsmarkt en de route-stubs. Nagebouwd uit de Claude
   Design-referentie (fonstrompenaars_Site.dc.html) en de master-designbrief.
   Los van site.css: dat is het huid-systeem van de A/B/C-tests en de funnel.
   ========================================================================== */

:root {
  --navy: #0F2A4A;
  --navy-diep: #0A1B33;
  --navy-nacht: #061426;
  --accent: #8FB8E8;
  --licht: #EAF1FA;
  --staal: #2F5C8F;
  --rand: clamp(24px, 5vw, 64px);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--navy); color: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: #fff; }

.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kop { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; text-wrap: pretty; }
.kop em { color: var(--accent); }
.kop-l { font-size: clamp(38px, 4vw, 60px); line-height: 1.04; letter-spacing: -.015em; }
.kop-m { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.08; }
.vul { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- knoppen ---------------------------------------------------------- */
.knop { display: inline-flex; align-items: center; border-radius: 999px; background: var(--accent); color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.knop:hover { background: #fff; color: var(--navy); }
.knop-s { height: 42px; padding: 0 20px; }
.knop-m { height: 56px; padding: 0 28px; font-size: 16px; }
.knop-l { height: 60px; padding: 0 36px; font-size: 17px; }
/* tweede, rustigere knop (delegeerbare CTA op /bestuur) */
.knop-rand { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; font-weight: 500; }
.knop-rand:hover { background: transparent; border-color: #fff; color: #fff; }

/* ---- header ----------------------------------------------------------- */
.kopbalk { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px var(--rand); background: rgba(15,42,74,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; font-weight: 500; }
.logo { color: #fff; text-decoration: none; font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; }
.logo span { color: var(--accent); }
.hoofdnav { display: flex; gap: clamp(12px, 2vw, 28px); align-items: center; flex-wrap: wrap; justify-content: center; }
.hoofdnav a { color: rgba(255,255,255,.75); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.hoofdnav a:hover, .hoofdnav a[aria-current="page"] { color: #fff; }
.hoofdnav a[aria-current="page"] { border-bottom-color: var(--accent); }

@media (max-width: 760px) {
  .kopbalk { flex-wrap: wrap; row-gap: 10px; padding-top: 14px; padding-bottom: 12px; }
  .hoofdnav { order: 3; width: 100%; justify-content: flex-start; gap: 18px; font-size: 13px; }
}

/* dropdowns in het kopmenu: open op klik/tap (home.js), niet op hover */
.menu-groep { position: relative; }
.menu-kop { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: rgba(255,255,255,.75); font: inherit; cursor: pointer; }
.menu-kop:hover, .menu-kop[aria-expanded="true"], .menu-groep.actief .menu-kop { color: #fff; }
.menu-groep.actief .menu-kop { border-bottom-color: var(--accent); }
.menu-kop svg { transition: transform .2s; }
.menu-kop[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-kop:focus-visible, .hoofdnav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu-lijst { position: absolute; top: calc(100% + 10px); left: -14px; z-index: 30; min-width: 190px; margin: 0; padding: 8px; list-style: none; border-radius: 8px; background: var(--navy-diep); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.menu-lijst a { display: block; padding: 10px 12px; border: 0; border-radius: 6px; color: rgba(255,255,255,.85); }
.menu-lijst a:hover, .menu-lijst a[aria-current="page"] { background: rgba(143,184,232,.14); color: #fff; }
.menu-groep:last-child .menu-lijst { left: auto; right: -14px; }

/* ---- hero ------------------------------------------------------------- */
.hero { position: relative; min-height: 820px; overflow: hidden; display: flex; flex-direction: column; }
.hero-beeld { object-position: clamp(62%, 140% - 6vw, 85%) center; }
.hero-zij { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,42,74,.97) 0%, rgba(15,42,74,.92) 34%, rgba(15,42,74,.45) 58%, rgba(15,42,74,.1) 100%); }
.hero-boven { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,74,.4) 0%, rgba(15,42,74,0) 30%, rgba(15,42,74,0) 70%, rgba(15,42,74,.92) 100%); }
.hero-raster { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 48px; align-items: end; padding: 72px var(--rand) 64px; }
.hero-tekst { display: flex; flex-direction: column; gap: 32px; max-width: 760px; }
.hero h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.015em; }
.hero-sub { margin: 0; max-width: 560px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: rgba(255,255,255,.85); }
.hero-acties { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.teaserlink { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px; color: #fff; font-weight: 500; font-size: 16px; text-decoration: none; }
.teaserlink span { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); align-items: center; justify-content: center; }

@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-raster { grid-template-columns: minmax(0,1fr); padding-top: 120px; }
  .hero-zij { background: linear-gradient(90deg, rgba(15,42,74,.95) 0%, rgba(15,42,74,.8) 60%, rgba(15,42,74,.55) 100%); }
}

/* ---- de wissel matchen -> verzoenen ----------------------------------- */
.mutatie { margin-top: 16px; display: flex; align-items: baseline; gap: 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mutatie-donker { margin-top: 0; color: rgba(15,42,74,.6); }
.wissel { position: relative; display: inline-block; width: 7.5em; height: 1.2em; color: var(--accent); font-weight: 600; }
.mutatie-donker .wissel { color: var(--navy); }
.wissel span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: opacity .7s ease, transform .7s ease; }
.wissel .w-na { opacity: 0; transform: translateY(8px); }
.wissel.om .w-voor { opacity: 0; transform: translateY(-8px); text-decoration: line-through; }
.wissel.om .w-na { opacity: 1; transform: none; }

/* ---- telefoonframe met de Fleur-teaser --------------------------------- */
.telefoon { position: relative; transform: rotate(5deg); margin-right: clamp(8px, 3vw, 48px); }
.toestel { position: relative; width: clamp(240px, 23vw, 340px); aspect-ratio: 402 / 874; border-radius: 44px; padding: 11px; background: #1b1d21; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.45); }
.toestel::before { content: ""; position: absolute; top: 18px; left: 50%; width: 30%; height: 20px; border-radius: 999px; background: #000; transform: translateX(-50%); z-index: 2; }
.scherm { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: var(--navy-nacht); }
.scherm video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scherm-inhoud { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 24px 64px; background: linear-gradient(180deg, rgba(6,20,38,0) 40%, rgba(6,20,38,.8) 100%); text-align: center; transition: opacity .4s; }
.afspeel { width: 60px; height: 60px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.afspeel:hover { background: #fff; }
.afspeel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* met geluid aan: de laag weg, de video vrij om op te tikken (pauze/verder) */
.telefoon.speelt .scherm-inhoud { opacity: 0; pointer-events: none; }
.telefoon.speelt video { cursor: pointer; }
.scherm-bijschrift { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.85); }
.scherm-bijschrift span { opacity: .6; }

@media (max-width: 760px) {
  .telefoon { justify-self: center; margin: 8px 0 0; transform: rotate(1.5deg); }
  .toestel { width: min(72vw, 280px); }
}

/* ---- bewijspijlers ---------------------------------------------------- */
.pijlers { background: var(--navy-diep); border-top: 1px solid rgba(255,255,255,.08); }
.pijlers-raster { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2px; padding: 0 var(--rand); }
.pijler { display: flex; flex-direction: column; gap: 12px; padding: 40px 32px; border-left: 1px solid rgba(255,255,255,.1); }
.pijler:first-child { padding-left: 0; border-left: 0; }
.pijler:last-child { padding-right: 0; }
.pijler .eyebrow { font-size: 12px; }
.pijler p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.85); }

@media (max-width: 1000px) {
  .pijler { padding: 32px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .pijler:first-child { border-top: 0; }
}

/* ---- autoriteitsstrip (hoort bij pijler 01, internationaal bewezen) ---- */
.gezag { max-width: 1280px; margin: 0 auto; padding: 0 var(--rand) 36px; }
.gezag-binnen { border-top: 1px solid rgba(143,184,232,.35); padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.gezag ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px 32px; }
.gezag li { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.7); }
.gezag strong { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2; color: #fff; }
.gezag p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.6); }

/* ---- beeld + tekst (herkenning, voor wie) ----------------------------- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.duo-beeld { position: relative; min-height: 520px; }
.duo-tekst { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: clamp(56px, 8vw, 112px) clamp(24px, 6vw, 96px); }
.duo-regels { display: grid; gap: 14px; max-width: 520px; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.8); }
.duo-regels p { margin: 0; }
.duo-regels .slot { padding-top: 10px; color: #fff; font-weight: 500; }
.voorwie { background: var(--navy-diep); }
.voorwie .kop em { color: inherit; }

@media (max-width: 900px) {
  .duo-beeld { min-height: 340px; }
  .voorwie .duo-beeld { order: -1; }
}

/* ---- de door-door-omslag ---------------------------------------------- */
.omslag { background: var(--licht); color: var(--navy); }
.omslag-binnen { max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--rand); display: flex; flex-direction: column; gap: 56px; }
.omslag-kop { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.omslag .eyebrow { color: var(--staal); }
.omslag-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: center; }
.omslag-links { display: flex; flex-direction: column; gap: 32px; }
.tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(15,42,74,.08); width: max-content; max-width: 100%; }
.tabs button { height: 44px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 500; background: transparent; color: var(--navy); transition: all .3s; }
.tabs button[aria-selected="true"] { background: var(--navy); color: #fff; }
.tabs button:focus-visible { outline: 2px solid var(--staal); outline-offset: 2px; }
.omslag-paneel { display: flex; flex-direction: column; gap: 16px; min-height: 220px; }
.omslag-paneel h3 { font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.omslag-body { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(15,42,74,.85); max-width: 520px; }
.omslag-casus { margin: 0; padding-top: 8px; border-top: 1px solid rgba(15,42,74,.2); font-size: 16px; line-height: 1.5; color: var(--staal); max-width: 520px; }
.omslag-casus .casus-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 6px; }

.polen { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; border-radius: 6px; overflow: hidden; background: var(--navy); }
.polen img { opacity: .25; transition: opacity 1s ease; }
.polen-waas { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(15,42,74,.2), rgba(15,42,74,.85)); }
.pool { position: absolute; top: 50%; width: 44%; aspect-ratio: 1; border-radius: 50%; display: flex; box-sizing: border-box; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pool-1 { left: 30%; transform: translate(-50%,-50%) scale(1); background: var(--accent); border: 2px solid var(--accent); color: var(--navy); align-items: center; justify-content: center; transition: left 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1), background 1s, opacity 1s; }
.pool-1 span { font-size: 15px; line-height: 1.6; border-radius: 999px; }
.pool-2 { left: 70%; transform: translate(-50%,-50%) scale(.9); opacity: .45; background: transparent; border: 2px solid #fff; color: #fff; align-items: center; justify-content: center; font-size: 15px; transition: all 1s cubic-bezier(.4,0,.2,1); }
.polen-label { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: opacity .6s; }

@media (max-width: 480px) {
  .tabs button { padding: 0 14px; font-size: 14px; }
  .pool-1 span, .pool-2 { font-size: 12px !important; }
  .polen-label { font-size: 11px; bottom: 16px; }
}

/* ---- casus ------------------------------------------------------------ */
.casus-binnen { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(72px, 9vw, 128px) var(--rand); }
.casus-beeld { position: relative; aspect-ratio: 4 / 5; max-width: 520px; border-radius: 6px; overflow: hidden; }
.casus-beeld img { transform: scale(1.32); transform-origin: center 45%; }
.casus-tekst { display: flex; flex-direction: column; gap: 28px; }
.casus-lijst { display: grid; max-width: 520px; margin: 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.casus-lijst div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.15); font-size: 18px; line-height: 1.45; }
.casus-lijst dt { color: var(--accent); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding-top: 5px; }
.casus-lijst dd { margin: 0; }

@media (max-width: 480px) {
  .casus-lijst div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- routes (home) ---------------------------------------------------- */
.routes-binnen { max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 128px) var(--rand); display: flex; flex-direction: column; gap: 48px; }
.routes-kop { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.kaart { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 420px; padding: 28px; border-radius: 6px; overflow: hidden; color: #fff; text-decoration: none; background: var(--navy-diep); }
.kaart img { transition: transform .8s ease; }
.kaart:hover { color: #fff; }
.kaart:hover img { transform: scale(1.04); }
.kaart-waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,74,0) 30%, rgba(15,42,74,.95) 100%); }
.kaart > span:not(.kaart-waas) { position: relative; }
.kaart-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kaart-kop { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.kaart-naar { font-size: 14px; color: rgba(255,255,255,.7); }

/* ---- conversie -------------------------------------------------------- */
.conversie { position: relative; min-height: 680px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.conversie > img { object-position: center 40%; }
.conversie-waas { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,42,74,.85) 0%, rgba(15,42,74,.45) 50%, rgba(15,42,74,.95) 100%); }
.conversie-binnen { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: clamp(72px, 9vw, 128px) var(--rand); max-width: 860px; }
.conversie .kop { font-size: clamp(46px, 6vw, 92px); line-height: 1; letter-spacing: -.02em; }
.conversie-sub { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.85); max-width: 560px; }
.conversie-acties { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.conversie-noot { margin: 0; font-size: 13px; color: rgba(255,255,255,.55); }

@media (max-width: 760px) {
  .conversie { min-height: 520px; }
}

/* ---- stub ------------------------------------------------------------- */
.stub { max-width: 860px; margin: 0 auto; padding: clamp(96px, 14vw, 180px) var(--rand); display: flex; flex-direction: column; gap: 28px; }
.stub h1 { font-size: clamp(42px, 5.6vw, 80px); line-height: 1.02; letter-spacing: -.015em; }
.stub p { margin: 0; font-size: 19px; line-height: 1.5; color: rgba(255,255,255,.8); }

/* ---- legal ------------------------------------------------------------ */
.legal { max-width: 760px; margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--rand); font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.85); }
.legal h1 { margin: 12px 0 28px; font-size: clamp(40px, 5vw, 64px); line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.legal h2 { margin: 44px 0 12px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; color: #fff; }
.legal p, .legal ul, .legal ol { margin: 0 0 16px; }
.legal ul, .legal ol { padding-left: 1.3em; }
.legal li { margin-bottom: 6px; }
.legal strong { color: #fff; font-weight: 600; }
.legal blockquote { margin: 20px 0; padding: 18px 22px; border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; background: rgba(255,255,255,.05); }
.legal blockquote :last-child { margin-bottom: 0; }
.legal .bijgewerkt { font-size: 14px; color: rgba(255,255,255,.55); }

/* ---- footer ----------------------------------------------------------- */
.voet { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 16px; padding: 36px var(--rand) 28px; font-size: 13px; color: rgba(255,255,255,.5); background: var(--navy-diep); }
.voet-id { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.7); }
.voet-id p { margin: 0; }
.voet-id strong { color: #fff; font-weight: 600; }
.voet-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.voet nav { display: flex; gap: 8px 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .voet-links { align-items: flex-start; }
}
.voet a { color: rgba(255,255,255,.6); text-decoration: none; }
.voet a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---- teaser-badge (alleen home) ---------------------------------------
   Desktop: zwevend rechtsonder, schuift kort na het laden in.
   Mobiel (<640px): sluitbare balk onderaan, één regel; pas zichtbaar als de
   hero uit beeld is, zodat hij hero en "Kies je route" nooit afdekt. */
.tb { position: fixed; right: 24px; bottom: 24px; z-index: 25; display: flex; align-items: stretch; max-width: 400px; border-radius: 14px; background: #E7B84B; color: var(--navy); box-shadow: 0 18px 44px rgba(0,0,0,.4); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.tb.tb-in { opacity: 1; transform: none; pointer-events: auto; }
.tb-link { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 8px 16px 16px; color: inherit; text-decoration: none; border-radius: 14px; }
.tb-link:hover { color: inherit; }
.tb-link:focus-visible, .tb-sluit:focus-visible { outline: 2px solid var(--navy); outline-offset: -4px; }
.tb-zegel { flex: none; width: 56px; height: 56px; }
.tb-zegel svg { display: block; width: 100%; height: 100%; }
.tb-tekst { display: flex; flex-direction: column; gap: 4px; }
.tb-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.tb-kop { font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.tb-cta { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.tb-link:hover .tb-cta { text-decoration: underline; text-underline-offset: 3px; }
.tb-sluit { flex: none; align-self: flex-start; width: 36px; height: 36px; margin: 6px 6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy); font: 22px/1 var(--sans); cursor: pointer; }
.tb-sluit:hover { background: rgba(15,42,74,.12); }

@media (max-width: 639px) {
  .tb { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); box-shadow: 0 -8px 28px rgba(0,0,0,.35); }
  .tb-link { gap: 10px; padding: 10px 4px 10px 14px; min-width: 0; border-radius: 0; }
  .tb-zegel { width: 30px; height: 30px; }
  .tb-tekst { min-width: 0; }
  .tb-eyebrow, .tb-kop { display: none; }
  /* De letterlijke regel is ~390px breed: op telefoons past hij niet leesbaar
     op één regel. Dan mag hij naar twee regels; de pijl blijft aan
     "arbeidsmarkt" vast (&nbsp;). Vanaf ~500px staat hij op één regel. */
  .tb-cta { font-size: 13px; line-height: 1.3; }
  .tb-sluit { align-self: center; margin: 0 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tb { transform: none; }
}