@import url("/stijl/tokens.css");
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--off); }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Inter, Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button, summary { font: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 104px; }
a:focus-visible, summary:focus-visible, button:focus-visible, details:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
/* Tekstlinks (WERKSESSIE-2 punt 47, fase A8): een link in lopende tekst is als
   link te herkennen: blauw en onderstreept, één stijl site-breed, met de
   zichtbare focus hierboven. Knoppen en kaartlinks houden hun eigen vorm; op
   donkerblauwe vlakken volgt de link de tekstkleur, anders is blauw op blauw
   onleesbaar. */
main p a:not(.button):not(.knop), .prose-block a, .section-intro a, .toc-lijst a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.tone-blue p a:not(.button):not(.knop), .tone-blue .prose-block a, .tone-blue .section-intro a, .final-cta p a:not(.button):not(.knop) { color: inherit; }
.shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; left: 16px; top: 10px; z-index: 999; background: var(--student); color: var(--blue); padding: 12px 18px; border-radius: 999px; font-weight: 800; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; inset: 0 0 auto; height: 90px; z-index: 100; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(18,41,117,.08); backdrop-filter: blur(18px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
/* Logo groter en recht uitgelijnd (WERKSESSIE.md, 18 augustus 2026; gebouwd
   19 augustus 2026). Gemeten: de afbeelding was 119px breed in een kader van
   118px, dus 1px afgesneden, en 70px hoog in een balk van 90px. Nu: kader en
   afbeelding even breed (136px, de eigen maat van het svg), 80px hoog. */
.brand { width: 136px; height: 80px; display: grid; place-items: center; overflow: hidden; }
.brand img { width: 136px; height: auto; }
/* Lettertype in het menu groter (WERKSESSIE.md, 18 augustus 2026): 14px werd
   15px, gebouwd 19 augustus 2026. */
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 720; }
.desktop-nav a { padding: 12px 0; }
.desktop-nav .nav-cta { border: 1.5px solid var(--blue); border-radius: 999px; padding: 12px 20px; }
.desktop-nav .nav-cta:hover { background: var(--blue); color: white; }
.nav-search { display: flex; align-items: center; gap: 6px; }
/* 16px in het invoerveld: kleiner laat telefoons inzoomen op focus (MOBIEL.md
   punt 4, 15 augustus 2026); de balk zelf staat op 14px en erft anders door. */
.nav-search input { width: 150px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 16px; color: var(--ink); background: var(--off); }
.nav-search input:focus { outline: var(--rand-focus) solid var(--blue); outline-offset: 1px; }
.nav-search button { min-height: 44px; padding: 8px 16px; border: 1.5px solid var(--blue); border-radius: 999px; background: transparent; color: var(--blue); font: inherit; font-weight: 720; cursor: pointer; }
.nav-search button:hover { background: var(--blue); color: white; }
/* De zoekknop staat visueel weg (TUSSENTIJDS.md punt 5, 15 augustus 2026):
   Enter in het veld volstaat. Hij blijft in de bron en verschijnt weer zodra
   hij met het toetsenbord de aandacht krijgt. */
.nav-search button { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nav-search { position: relative; }
.nav-search button:focus-visible { position: static; width: auto; height: auto; margin: 0; padding: 8px 16px; overflow: visible; clip: auto; border: 1.5px solid var(--blue); }
.mobile-menu .nav-search { margin: 12px 0; }
.mobile-menu .nav-search input { flex: 1; }
/* Taalwisselaar in de balk (VERVOLG.md stap 8, 15 augustus 2026). */
.nav-lang { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 800; font-size: 13px; }
.nav-lang:hover { border-color: var(--blue); color: var(--blue); }
.mobile-menu .nav-lang { margin-top: 12px; }
.skip-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { list-style: none; cursor: pointer; border: 1.5px solid var(--blue); border-radius: 999px; padding: 10px 16px; font-weight: 800; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; top: 56px; right: 0; width: min(300px, calc(100vw - 32px)); padding: 16px; border-radius: 22px; background: white; box-shadow: 0 20px 60px rgba(18,41,117,.18); display: grid; }
/* Het mobiele menu is de korte versie: essentiële ingangen, groot en
   aanraakbaar (MOBIEL.md punt 3, 15 augustus 2026). */
.mobile-menu nav a { min-height: 52px; display: flex; align-items: center; padding: 14px 12px; border-bottom: 1px solid var(--line); font-weight: 750; font-size: 17px; }
.mobile-menu nav .nav-lang { border-bottom: 0; }
.nav-group { position: relative; }
.nav-group summary { min-height: 44px; display: flex; align-items: center; gap: 7px; cursor: pointer; list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-panel { position: absolute; top: 48px; left: 50%; width: 280px; padding: 14px; display: grid; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 60px rgba(18,41,117,.18); transform: translateX(-50%); }
.nav-panel a { padding: 10px 12px; border-radius: 10px; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--pale); }
.nav-panel .nav-overview { margin-bottom: 5px; border-bottom: 1px solid var(--line); font-weight: 850; }
.mobile-group { display: grid; margin-top: 12px; }
.mobile-menu nav .mobile-heading { color: var(--blue); font-weight: 850; }

.accent-blue { --accent: var(--blue-2); } .accent-student { --accent: var(--student); }
.accent-search { --accent: var(--search); } .accent-squad { --accent: var(--squad); }
.accent-network { --accent: var(--network); }
.hero { padding: 116px 0 74px; min-height: min(900px, 100svh); display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%); }
.breadcrumbs { margin-bottom: 24px; font-size: 11px; color: var(--blue-2); text-transform: lowercase; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs span { margin-left: 8px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero-copy { padding: 18px 0; }
.eyebrow { font-size: 11px; line-height: 1.2; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; }
.hero .eyebrow:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
/* overflow-wrap: één woord langer dan het scherm kan de pagina nooit meer
   oprekken (MOBIEL-SCHOUW.md punt 1, 15 augustus 2026). */
.hero h1 { margin: 22px 0 26px; max-width: 820px; font-size: clamp(58px, 6.8vw, 108px); line-height: .91; letter-spacing: -.065em; font-weight: 520; text-wrap: balance; overflow-wrap: break-word; }
.hero-lead, .hero-kort { display: grid; gap: 12px; max-width: 670px; color: var(--muted); font-size: 18px; line-height: 1.58; }
/* De korte zin is hetzelfde als de rest van de intro; hij staat alleen apart
   zodat hij op een telefoon voor het beeld kan komen (MOBIEL-SCHOUW punt 2). */
.hero-kort > p { margin: 0; }
.button-row { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; border: 1.5px solid transparent; font-size: 14px; font-weight: 800; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: var(--blue); color: white; } .button.secondary { border-color: var(--blue); } .button.light { background: white; color: var(--blue); }
.brand-signal { margin-top: 38px; display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 800; }
.brand-signal span { width: 42px; height: 4px; border-radius: 99px; background: var(--accent); }
.hero-media { min-height: 590px; margin: 0; border-radius: 36px; overflow: hidden; position: relative; background: var(--pale); isolation: isolate; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18,41,117,.24)); z-index: 1; }
.hero-media figcaption { position: absolute; left: 18px; bottom: 18px; z-index: 3; border-radius: 999px; background: rgba(255,255,255,.92); padding: 9px 13px; font-size: 10px; font-weight: 800; }
.hero-subbrand { position: absolute; right: 18px; bottom: 18px; z-index: 3; width: 210px; min-height: 78px; padding: 12px 18px; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.hero-subbrand img { position: static; width: 100%; height: auto; object-fit: contain; }
.media-shape { position: absolute; right: -36px; top: -36px; width: 138px; height: 138px; border-radius: 44px; background: var(--accent); z-index: 2; mix-blend-mode: multiply; opacity: .9; transform: rotate(12deg); }

.metrics { background: var(--blue); color: white; }
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.metrics article { min-height: 180px; padding: 34px 30px; border-right: 1px solid rgba(255,255,255,.16); display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.metrics article:last-child { border-right: 0; }
.metrics strong { font-size: clamp(38px, 4.4vw, 68px); line-height: .95; letter-spacing: -.055em; font-weight: 580; }
.metrics p { max-width: 310px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.5; }
/* WERKSESSIE-2 punt 52 (fase B8): vier cijfers krijgen op brede schermen vier
   kolommen, zodat er nooit een cijfer alleen op de tweede regel staat. Op
   smalle schermen worden het twee nette rijen van twee: het vierde cijfer
   krijgt daar niet de volle breedte van de laatste-plek-regel. */
@media (min-width: 1001px) { .metrics-grid:has(> article:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }
.metrics article:nth-child(4):last-child { grid-column: auto; border-top: 1px solid rgba(255,255,255,.16); }

.content-section { padding: 116px 0; }
.section-squares { position: relative; overflow: hidden; }
.section-squares:after { content: ""; position: absolute; right: -60px; bottom: -70px; width: 190px; height: 190px; border: 24px solid var(--accent); border-radius: 48px; opacity: .13; transform: rotate(12deg); pointer-events: none; }
.tone-light { background: white; } .tone-pale { background: var(--pale); } .tone-blue { background: var(--blue); color: white; }
.section-heading { display: grid; grid-template-columns: 1.08fr .92fr; gap: 70px; align-items: end; margin-bottom: 54px; }
/* WERKSESSIE-2 punt 8 (fase E2): text-wrap: balance verdeelde een kop over
   gelijke regels en liet hem daardoor op ongeveer twee derde van de breedte
   afbreken, ook als de indeling de kop op volle breedte zette. pretty houdt
   de regels vol en voorkomt alleen een los laatste woord. */
.section-heading h2, .faq-grid h2, .final-cta h2 { margin: 15px 0 0; font-size: clamp(48px, 5.6vw, 90px); line-height: .94; letter-spacing: -.06em; font-weight: 520; text-wrap: pretty; overflow-wrap: break-word; }
.section-intro { margin-left: auto; max-width: 540px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.tone-blue .section-intro { color: rgba(255,255,255,.7); }
.prose-block { max-width: 820px; display: grid; gap: 18px; font-size: 18px; line-height: 1.65; color: var(--muted); }
/* Leesbreedte blogartikel (WERKSESSIE-2 punt 28, fase B6): de leeskolom staat
   in het midden van de pagina in plaats van linksuit met een leeg rechtervlak.
   De regellengte blijft begrensd (ongeveer 80 tekens): breder leest slechter. */
.artikel-kolom { margin-inline: auto; max-width: 780px; width: 100%; }
.prose-block.artikel-kolom { font-size: 19px; line-height: 1.7; }
.tone-blue .prose-block { color: rgba(255,255,255,.72); }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.card-grid.four { grid-template-columns: repeat(4, 1fr); }
/* Uitlijningsregel (WERKSESSIE-2 punt 1, fase B1): alles wat naast elkaar
   staat, staat op één lijn: kop op kophoogte, tekst op teksthoogte, ondertekst
   en onderkant gelijk. Elke kaart deelt daarom dezelfde rijsporen met de rij
   waarin hij staat (subgrid): beeld, nummer, kop, tekst, ondertekst. De hoogte
   volgt de langste kaart in die ene rij, niet een vaste maat en niet de hele
   site. Browsers zonder subgrid vallen terug op de oude kaartopbouw. */
.card-grid > .info-card, .card-grid > .blogkaart, .card-carousel > .info-card { grid-row: span 5; }
.card-carousel { grid-template-rows: repeat(5, auto); }
.card-carousel > .info-card { grid-row: 1 / -1; }
@supports (grid-template-rows: subgrid) {
  /* De rij-afstand tussen kaartRIJEN komt van de ondermarge van de kaart;
     de row-gap van het raster staat op nul, anders lekt hij als extra ruimte
     tussen de vijf gedeelde sporen BINNEN elke kaart (56 px per kaart). */
  .card-grid, .card-carousel { row-gap: 0; }
  .card-grid > .info-card, .card-grid > .blogkaart { margin-bottom: 14px; }
  .card-grid > .info-card, .card-grid > .blogkaart > .info-card, .card-carousel > .info-card { display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .card-grid > .blogkaart { display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .card-grid > .blogkaart > .info-card { grid-row: 1 / -1; }
  .info-card > .info-card-media { grid-row: 1; }
  .info-card > .info-card-content { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; min-height: 0; min-width: 0; }
  /* Grid-items groeien standaard tot hun langste woord (min-width: auto) en
     staken daarmee BUITEN het kaartspoor; de kaart knipte de kop dan af
     (gemeten op 1536 pixels, 21 augustus 2026, kaart Participatiemaat-
     schappijen). Met min-width: 0 blijft elk kind binnen de kaart en kan een
     te lang woord gewoon afbreken in plaats van uit beeld lopen. */
  .info-card-content > * { min-width: 0; }
  .info-card-content > .card-number { grid-row: 1; }
  .info-card-content > .card-label { grid-row: 1; justify-self: end; }
  .info-card-content > h3 { grid-row: 2; }
  .info-card-content > p { grid-row: 3; }
  .info-card-content > small { grid-row: 4; align-self: end; }
}
.carousel-shell { position: relative; }
/* WERKSESSIE-2 punt 12 (fase B4): pijlen alleen als er iets te schuiven valt. */
.carousel-statisch .carousel-controls { display: none; }
.carousel-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.carousel-controls button { width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.card-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 3px 0 14px; }
.card-carousel .info-card { scroll-snap-align: start; }
.carousel-link-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; }
.carousel-link-list a, .carousel-link-list span { font-size: 13px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
/* Het overzichtsadres in de linkrij bestaat voor smalle schermen
   (MOBIEL-SCHOUW.md punt 3, 15 augustus 2026); op brede schermen dragen de
   losse links de rij en blijft het overzicht verborgen. */
.carousel-overzicht { display: none; }
.info-card { min-height: 310px; position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 28px; background: var(--off); border-top: 7px solid var(--accent); transition: transform .22s ease, box-shadow .22s ease; }
.info-card-content { min-height: 303px; display: flex; flex: 1; flex-direction: column; padding: 28px; }
.info-card-visual .info-card-content { min-height: 286px; }
.info-card-media { position: relative; width: 100%; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pale); }
.info-card-media:after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(12,30,88,.5)); }
/* Portretfoto's houden het gezicht heel in het liggende kaartvak: de uitsnede
   pakt de bovenkant van het beeld (TUSSENTIJDS.md punt 7, 15 augustus 2026). */
.info-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .35s ease; }
a.info-card:hover .info-card-media img, .info-card:has(.card-link):hover .info-card-media img { transform: scale(1.045); }
.info-card-media figcaption, .card-label { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; font-weight: 850; }
.info-card-media figcaption { position: absolute; z-index: 2; left: 18px; bottom: 16px; padding: 7px 10px; border-radius: 999px; background: white; color: var(--blue); }
.card-label { margin-top: 18px; color: var(--muted); }
a.info-card:hover, .info-card:has(.card-link):hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(18,41,117,.09); }
/* De kop-link uitgerekt over de kaart: het klikgebied blijft de hele kaart, de
   toegankelijke naam blijft de kop (BRILLEN.html punt 11, 15 augustus 2026). */
.info-card .card-link::after { content: ""; position: absolute; inset: 0; }
.tone-pale .info-card { background: white; } .tone-blue .info-card { background: rgba(255,255,255,.09); border-color: var(--accent); }
.card-number { font-size: 10px; font-weight: 850; }
/* Maximaal 33px: bij 40px is het langste kaartwoord (Managementrapportages,
   438px) breder dan de kaartkolom van 375px op brede schermen (gemeten 21
   augustus 2026); 33px past met marge, zonder afbreken. */
.info-card h3 { margin: 62px 0 15px; font-size: clamp(24px, calc(2.8vw - 6px), 33px); line-height: .98; letter-spacing: -.045em; font-weight: 650; }
.info-card-visual h3 { margin-top: 28px; }
.info-card p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.info-card small { display: block; margin-top: auto; padding-top: 26px; min-height: 76px; color: var(--muted); font-size: 11px; line-height: 1.5; border-top: 1px solid var(--line); }
.tone-blue .info-card p, .tone-blue .info-card small { color: rgba(255,255,255,.68); } .tone-blue .info-card small { border-color: rgba(255,255,255,.17); }
.card-arrow { position: absolute; right: 24px; top: 22px; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 18px; }
.steps-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps-list li { min-height: 110px; display: grid; grid-template-columns: 90px .8fr 1.2fr; gap: 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); }
.tone-blue .steps-list, .tone-blue .steps-list li { border-color: rgba(255,255,255,.18); }
.steps-list span { font-size: 10px; font-weight: 850; } .steps-list h3 { margin: 0; font-size: 25px; line-height: 1.15; letter-spacing: -.03em; }
.steps-list p { color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 640px; } .tone-blue .steps-list p { color: rgba(255,255,255,.68); }
.table-wrap { overflow-x: auto; border-radius: 28px; background: white; box-shadow: 0 16px 50px rgba(18,41,117,.06); }
table { width: 100%; border-collapse: collapse; min-width: 650px; }
th, td { padding: 22px 26px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; }
thead th { background: var(--blue); color: white; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } tbody th { font-weight: 800; }
.table-note { padding: 22px 26px; background: var(--off); color: var(--muted); font-size: 13px; line-height: 1.55; }
.link-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid currentColor; }
.link-list a { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 4px; border-bottom: 1px solid currentColor; font-size: 17px; font-weight: 750; }
.link-list a:nth-child(odd) { margin-right: 20px; } .link-list a:nth-child(even) { margin-left: 20px; }
/* Vorige/volgende in een reeks (TUSSENTIJDS.md punt 8, 15 augustus 2026):
   dezelfde link-list, met drie posities op één rij. */
.reeks-nav-wrap { margin: 44px auto; }
.reeks-nav { grid-template-columns: 1fr auto 1fr; column-gap: 20px; }
.reeks-nav a:nth-child(n) { margin: 0; }
.reeks-nav .reeks-overzicht { justify-content: center; text-align: center; }
.reeks-nav .reeks-volgende { justify-content: flex-end; text-align: right; }
.related-wrap { padding: 42px 0; }
.related-line { max-width: 950px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.related-line a { color: var(--blue); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

.split-content, .form-layout, .admin-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.split-content h2, .form-layout h2, .admin-preview h2 { margin: 14px 0 22px; font-size: clamp(40px,5vw,74px); line-height: .96; letter-spacing: -.055em; font-weight: 520; }
.split-content > div > p, .form-layout > div > p, .admin-preview p { color: var(--muted); font-size: 17px; line-height: 1.6; margin-bottom: 24px; }
.location-map { margin: 0; overflow: hidden; border-radius: 28px; background: var(--pale); }
/* WERKSESSIE-2 punt 31 (fase D8): klikken op de kaart opent de routekeuze in
   plaats van direct een kaartdienst; de knop om het beeld draagt geen eigen
   opmaak. */
.location-map-knop { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.location-map img { width: 100%; height: auto; }
.location-map figcaption { padding: 14px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
/* Route plannen: knop onder de kaart en de pop-up met de reismanieren
   (CONTACT.md, 15 augustus 2026). De pop-up staat volledig in de bron. */
.route-plan { margin-top: 14px; }
.route-dialog { max-width: 560px; width: calc(100% - 32px); padding: 28px; border: 0; border-radius: 22px; color: var(--ink); }
.route-dialog::backdrop { background: rgba(18,41,117,.45); }
.route-dialog h3 { margin: 0 0 14px; }
.route-dialog ul { margin: 10px 0 18px; padding-left: 20px; }
.route-dialog li { margin: 6px 0; }
.route-dialog .route-diensten a { text-decoration: underline; font-weight: 800; }
/* Sprong vanuit de kleine links in de hero: het kaartje waar je landt krijgt
   kort de aandacht, ook zichtbaar met het toetsenbord (CONTACT.md). */
.info-card:target { outline: 3px solid var(--blue); outline-offset: 4px; }
.contact-form { display: grid; gap: 18px; padding: 28px; border-radius: 28px; background: white; border: 1px solid var(--line); box-shadow: 0 16px 50px rgba(18,41,117,.06); }
.form-field { display: grid; gap: 7px; }
.form-field label { font-size: 13px; font-weight: 800; }
.form-field .field-required { color: var(--muted); font-weight: 600; }
.form-field input, .form-field textarea, .form-field select, .search-form input { width: 100%; min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--blue-2); border-radius: 12px; background: white; color: var(--blue); font: inherit; font-size: 16px; }
.form-field textarea { min-height: 130px; resize: vertical; }
/* Het honingpotveld (ontvangstpunt, 21 augustus 2026) is voor robots: het
   staat buiten beeld en buiten de tabvolgorde; een mens vult het nooit in. */
.contact-form .honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-weight: 700; }
.form-status.is-fout { color: var(--kleur-fout); }
.field-error { display: none; color: #8b1e2d; font-size: 12px; font-weight: 700; }
.field-error.is-visible { display: block; }
.form-privacy { color: var(--muted); font-size: 12px; line-height: 1.55; }
.form-privacy a { text-decoration: underline; font-weight: 800; }
.form-status { min-height: 18px; font-size: 12px; }
.search-form { max-width: 900px; }
.search-form > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; }
/* Zoekveld en zoekknop naast elkaar; de sortering staat bij de filters
   (MOBIEL-SCHOUW.md punt 6, 15 augustus 2026). */
.search-form > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.result-count { margin: 28px 0 14px; font-size: 13px; font-weight: 850; }
.search-results, .vacancy-list { display: grid; gap: 10px; }
.search-result { display: grid; gap: 7px; padding: 20px 22px; border-radius: 16px; background: white; border: 1px solid var(--line); }
.search-result strong { font-size: 18px; }
.search-result span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.empty-state { margin-top: 18px; padding: 28px; border-radius: 22px; background: white; border: 2px solid var(--student); }
.empty-state h3 { margin: 0 0 10px; font-size: 28px; }
.empty-state p { color: var(--muted); line-height: 1.6; }
.empty-state a { text-decoration: underline; font-weight: 800; }
/* Twee gelijke kolommen: Rol en Plaats naast elkaar, Uren en Soort inzet
   eronder; het stagevinkje op één lijn met een zichtbaar label; sorteren staat
   rechts naast het zoekveld (TUSSENTIJDS.md punt 6, 15 augustus 2026). */
.vacancy-filters { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.form-check { grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 44px; }
.form-check input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--blue); }
.form-check label { padding: 10px 0; }
/* Het vinkje in het contact- en aanmeldformulier (WERKSESSIE-2 punt 23, fase
   A3): vinkje en tekst op één regel, aan elkaar gekoppeld via het label. Het
   vinkje erfde width:100% en min-height:52px van .form-field input en stond
   daardoor als leeg vierkant boven zijn eigen tekst. */
.contact-form .form-check label { display: flex; align-items: flex-start; gap: 10px; padding: 0; font-weight: 600; font-size: 15px; line-height: 1.5; }
.contact-form .form-check input[type="checkbox"] { flex: none; margin-top: 1px; }
.search-form .sorteer-veld select { min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--blue-2); border-radius: 12px; background: white; color: var(--blue); font: inherit; font-size: 16px; }
/* WERKSESSIE-2 punt 20 (fase B1, verticaal): de rechterkolom (regio, uren,
   geplaatst) begint bij elke kaart op dezelfde lijn. Een auto-kolom volgde de
   breedste inhoud per kaart en verschoof dus per kaart; een vaste kolom niet. */
.vacancy-card { display: grid; grid-template-columns: 1fr 220px; gap: 30px; padding: 26px; border-radius: 22px; background: white; border-left: 7px solid var(--search); }
.vacancy-card h3 { margin: 8px 0 12px; font-size: 30px; }
.vacancy-card h3 a { text-decoration: underline; text-underline-offset: 5px; }
.vacancy-card p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.vacancy-card dl { display: grid; gap: 14px; min-width: 170px; margin: 0; }
.vacancy-card dt { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.vacancy-card dd { margin: 3px 0 0; font-size: 13px; font-weight: 800; }
.status-badge { justify-self: start; padding: 7px 11px; border-radius: 999px; background: var(--student); color: var(--blue); font-size: 11px; font-weight: 850; }
.admin-preview { position: sticky; top: 120px; min-height: 420px; padding: 34px; border-radius: 28px; background: var(--blue); color: white; }
.admin-preview p { color: rgba(255,255,255,.72); }
.author-contact { padding: 24px 0; background: var(--pale); }
.author-contact .shell { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.author-contact p { font-size: 14px; }
.author-contact a:not(.button) { text-decoration: underline; font-weight: 800; }

.recruitment-models .section-intro { color: rgba(255,255,255,.72); }
.model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.model-card { min-height: 720px; display: flex; flex-direction: column; overflow: hidden; border-radius: 30px; background: white; color: var(--blue); }
.model-card header { min-height: 235px; position: relative; padding: 30px; background: var(--search); }
.model-card:nth-child(2) header { background: var(--student); }
.model-card:nth-child(3) header { background: var(--network); }
.model-card:nth-child(4) header { background: var(--squad); }
.model-number { position: absolute; right: 28px; top: 26px; font-size: 11px; font-weight: 850; }
.model-card h3 { max-width: 75%; margin: 0 0 38px; font-size: clamp(32px,3vw,48px); line-height: .96; letter-spacing: -.045em; }
.model-price { margin: 0; font-size: clamp(29px,3.2vw,52px); line-height: 1; letter-spacing: -.045em; font-weight: 700; }
/* De sponsorlijst (WERKSESSIE-2 punt 55, fase D4): naam en soort per regel,
   in twee kolommen op brede schermen. Geen logo's zonder toestemming. */
.sponsor-lijst { list-style: none; margin: 34px 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; max-width: 820px; }
.sponsor-lijst li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); font-size: 15px; }
.sponsor-lijst span { color: var(--muted); font-size: 13px; }
@media (max-width: 620px) { .sponsor-lijst { grid-template-columns: 1fr; } }

/* De vier wervingsmodellen als verkoopkaart (WERKSESSIE-2 punt 49, fase D11):
   prijs groot bovenaan, voordelen in steekwoorden, onderaan kort de
   voorwaarde. Geen lopende alinea's. */
.model-verkoop .info-card-content h3 { margin-top: 24px; }
.model-verkoop .model-price { margin: 10px 0 0; font-size: clamp(24px, 2vw, 34px); }
.model-voordelen { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.model-voordelen li { position: relative; padding-left: 24px; font-size: 14px; font-weight: 700; line-height: 1.45; }
.model-voordelen li:before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
@supports (grid-template-rows: subgrid) {
  .card-grid > .info-card.model-verkoop > .info-card-content { grid-row: 1 / -1; }
  .model-verkoop .info-card-content > h3 { grid-row: 1; }
  .model-verkoop .info-card-content > .model-price { grid-row: 2; }
  .model-verkoop .info-card-content > .model-voordelen { grid-row: 3; }
  .model-verkoop .info-card-content > .model-voorwaarde { grid-row: 4; align-self: end; }
}
.model-price-extra { margin: 8px 0 0; font-size: 15px; font-weight: 750; }
.model-card header small { display: block; margin-top: 12px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.model-description { min-height: 124px; padding: 28px 30px; color: var(--muted); font-size: 16px; line-height: 1.62; border-bottom: 1px solid var(--line); }
.model-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 28px 30px; }
.model-columns h4 { margin: 0 0 16px; font-size: 13px; }
.model-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.model-list li { position: relative; padding-left: 19px; color: var(--muted); font-size: 13px; line-height: 1.52; }
.model-list li:before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--network); }
.model-considerations li:before { background: var(--squad); }
.model-marketing { margin: auto 30px 0; padding: 20px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.55; }
.model-fit { display: grid; gap: 6px; margin: 0; padding: 22px 30px 28px; background: var(--off); color: var(--muted); font-size: 13px; line-height: 1.55; }
.model-fit strong { color: var(--blue); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.models-note { max-width: 920px; margin: 26px 0 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.6; }

.film-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; align-items: center; }
.film-copy h2 { margin: 16px 0 28px; font-size: clamp(44px,5vw,78px); line-height: .94; letter-spacing: -.06em; font-weight: 520; }
.film-copy > p:not(.eyebrow) { max-width: 520px; margin-top: 16px; color: rgba(255,255,255,.68); font-size: 16px; line-height: 1.65; }
.film-player { margin: 0; overflow: hidden; border-radius: 30px; background: #071644; box-shadow: 0 28px 80px rgba(0,0,0,.24); }
.film-player video { width: 100%; max-height: 680px; display: block; background: #071644; }
.film-player figcaption { display: grid; gap: 5px; padding: 20px 24px 22px; }
.film-player figcaption strong { font-size: 17px; }
.film-player figcaption span { color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.55; }
.transcript { grid-column: 1 / -1; display: grid; grid-template-columns: .72fr 1.28fr; gap: 72px; margin-top: 28px; padding-top: 62px; border-top: 1px solid rgba(255,255,255,.2); }
.transcript-heading h3 { max-width: 500px; margin: 15px 0 0; font-size: clamp(38px,4vw,62px); line-height: .97; letter-spacing: -.05em; font-weight: 520; }
.transcript-chapters { border-top: 1px solid rgba(255,255,255,.2); }
.transcript-chapters details { border-bottom: 1px solid rgba(255,255,255,.2); }
.transcript-chapters summary { min-height: 94px; display: grid; grid-template-columns: 38px 1fr auto; gap: 16px; align-items: center; cursor: pointer; list-style: none; }
.transcript-chapters summary::-webkit-details-marker { display: none; }
.transcript-chapters summary span { color: var(--search); font-size: 10px; font-weight: 850; }
.transcript-chapters summary strong { font-size: 18px; line-height: 1.35; }
.transcript-chapters summary b { font-size: 28px; font-weight: 400; transition: transform .2s ease; }
.transcript-chapters details[open] summary b { transform: rotate(45deg); }
.transcript-chapters details > div { display: grid; gap: 14px; padding: 0 42px 30px 54px; }
.transcript-chapters details p { color: rgba(255,255,255,.68); font-size: 15px; line-height: 1.68; }

/* Stijlgids gebruikt hetzelfde componentenbestand. */
.pagina-breedte { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }
.overslaan { position: fixed; left: 16px; top: 10px; z-index: 999; background: var(--student); color: var(--blue); padding: 12px 18px; border-radius: 999px; font-weight: 800; transform: translateY(-160%); }
.overslaan:focus { transform: translateY(0); }
.voorbeeldkop { position: sticky; top: 0; z-index: 30; padding: 12px 0; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.voorbeeldkop .pagina-breedte { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.merk { width: 120px; }
.voorbeeldnav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; font-weight: 800; }
.hoofdstuk { padding: 100px 0; }.hoofdstuk-licht { background: white; }.hoofdstuk-grijs { background: var(--pale); }.hoofdstuk-blauw { background: var(--blue); color: white; }
.label { font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.kop-1 { margin: 22px 0 26px; font-size: clamp(58px,6.8vw,108px); line-height: .91; letter-spacing: -.065em; font-weight: 520; }
.kop-2 { margin: 15px 0 42px; font-size: clamp(48px,5.6vw,90px); line-height: .94; letter-spacing: -.06em; font-weight: 520; }
.intro { max-width: 670px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.toestanden { display: flex; flex-wrap: wrap; gap: 10px; }.toestand-hover { transform: translateY(-2px); }.toestand-ingedrukt { background: var(--kleur-blauw-donker); }.toestand-uitgeschakeld { opacity: .45; pointer-events: none; }.toestand-focus { outline: 3px solid var(--blue); outline-offset: 4px; }
.kleuren { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }.kleur { min-height: 128px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; border-radius: 22px; border: 1px solid var(--line); }.kleur strong,.kleur span { padding: 3px 6px; align-self: flex-start; background: white; color: var(--blue); }.kleur-blauw{background:var(--blue)}.kleur-midden{background:var(--blue-2)}.kleur-grijs{background:var(--pale)}.kleur-student{background:var(--student)}.kleur-search{background:var(--search)}.kleur-squad{background:var(--squad)}.kleur-network{background:var(--network)}.kleur-wit{background:white}
.kaarten { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.kaart { min-height: 288px; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: var(--off); border-top: 7px solid var(--search); }.kaart h3 { margin: auto 0 14px; font-size: clamp(27px,2.6vw,40px); }.kaart p,.uitleg { color: var(--muted); line-height: 1.55; }.kaart:hover { box-shadow: 0 18px 48px rgba(18,41,117,.09); transform: translateY(-4px); }
.formulier { max-width: 720px; display: grid; gap: 18px; padding: 28px; border-radius: 28px; background: white; border: 1px solid var(--line); }.veld { display: grid; gap: 8px; }.veld label { font-size: 13px; font-weight: 800; }.veld input,.veld textarea,.veld select { width: 100%; min-height: 52px; padding: 13px 15px; border: 1.5px solid var(--blue-2); border-radius: 12px; color: var(--blue); font-size: 16px; }.veld-fout input { border-color: var(--kleur-fout); }.foutmelding { color: var(--kleur-fout); font-size: 12px; font-weight: 800; }
.vragen { max-width: 800px; border-top: 1px solid var(--line); }.vragen details { border-bottom: 1px solid var(--line); }.vragen summary { min-height: 80px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 800; }.vragen details p { padding: 0 42px 24px 0; color: var(--muted); line-height: 1.6; }
.mediaframe { overflow: hidden; border-radius: 36px; background: var(--pale); aspect-ratio: 16/9; }.mediaframe img { width: 100%; height: 100%; object-fit: cover; }.uitleg { margin-top: 18px; font-size: 13px; }.breekpunten { width: 100%; border-collapse: collapse; }.breekpunten th,.breekpunten td { padding: 14px; text-align: left; border-bottom: 1px solid var(--line); }

.faq-section { border-top: 1px solid var(--line); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq-grid h2 { font-size: clamp(44px, 4.8vw, 74px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 740; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary b { font-size: 28px; font-weight: 400; transition: transform .2s ease; } .faq-list details[open] summary b { transform: rotate(45deg); }
.faq-list details p { max-width: 700px; padding: 0 42px 26px 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.final-cta { padding: 110px 0; background: var(--blue); color: white; position: relative; overflow: hidden; }
.final-cta:after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 90px; background: var(--accent); right: -120px; top: -150px; opacity: .85; transform: rotate(24deg); }
.final-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: end; position: relative; z-index: 2; }
.final-grid > div:last-child { max-width: 480px; margin-left: auto; }
.final-grid > div:last-child p { color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.55; margin-bottom: var(--ruimte-6); }

.site-footer { background: #0c1e58; color: white; }
.footer-company {
  position: relative;
  padding: 32px 0 26px;
  display: grid;
  grid-template-columns: .96fr 1.04fr;
  gap: 0;
  align-items: stretch;
}
.footer-brand-block,
.footer-contact-panel {
  min-height: 500px;
  padding: 38px 42px 42px;
}
.footer-brand-block {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 78px 1fr;
  column-gap: 26px;
  border-radius: 34px 0 0 34px;
  background: #122975;
}
.footer-brand-block::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 116px;
  right: 42px;
  left: 42px;
  height: 1px;
  background: rgba(255,255,255,.2);
}
.footer-brand-block img {
  position: static;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 116px;
  height: auto;
}
.footer-brand-block .eyebrow {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  /* Zelfde uitlijning als de rechterkopregel (HERSTEL-BROWSERCONTROLE.md,
     21 augustus 2026): links stond op align-self: center in een rij van
     78 pixels en rechts op stretch met 24 pixels onderruimte, een
     meetbaar verschil van 12,5 pixels; en de maat van 230 pixels was te
     krap voor "Rotterdam, actief sinds 2018" zodra de browser een ander
     lettertype pakt. Na de wijziging: 1 pixel verschil, een regel. */
  align-self: stretch;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0 24px;
  max-width: none;
  margin: 0;
  color: var(--search);
  text-align: right;
}
.footer-brand-block h2 {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  max-width: 610px;
  padding-top: 42px;
  font-size: clamp(42px,4.15vw,66px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 520;
}
.footer-square {
  position: absolute;
  z-index: 1;
  top: 128px;
  right: -82px;
  width: 164px;
  height: 164px;
  border: 0;
  border-radius: 0;
  opacity: .16;
  transform: rotate(12deg);
  pointer-events: none;
}
.footer-square::before,
.footer-square::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 50%;
}
.footer-square::before {
  left: 0;
  border: 24px solid #071747;
  border-right: 0;
  border-radius: 38px 0 0 38px;
}
.footer-square::after {
  right: 0;
  border: 24px solid var(--search);
  border-left: 0;
  border-radius: 0 38px 38px 0;
}
.footer-contact-panel {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 78px 116px 116px 1fr;
  gap: 0 28px;
  border-radius: 0 34px 34px 0;
  background: #102566;
}
.footer-contact-panel > .eyebrow {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: var(--search);
}
.footer-contact-link, .footer-contact-panel address { min-height: 116px; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.2); font-style: normal; }
.footer-contact-panel > .footer-contact-link:nth-of-type(1),
.footer-contact-panel > .footer-contact-link:nth-of-type(2) { grid-row: 2; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.footer-contact-panel > address { grid-column: 1; grid-row: 3; border-top: 0; }
.footer-contact-link span, .footer-contact-panel address span { color: rgba(255,255,255,.5); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.footer-contact-link strong, .footer-contact-panel address strong { font-size: 16px; line-height: 1.45; }
.footer-contact-link:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.footer-company-meta { grid-column: 1 / -1; grid-row: 4; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); }
.footer-company-meta p { color: rgba(255,255,255,.5); font-size: 12px; line-height: 1.65; }
.footer-company-meta strong { color: white; font-weight: 700; }
.footer-sitemap { padding: 42px 0 54px; display: grid; grid-template-columns: repeat(4,1fr); gap: 42px 28px; border-top: 1px solid rgba(255,255,255,.14); }
.footer-sitemap div { display: flex; flex-direction: column; gap: 9px; }
.footer-sitemap p { margin-bottom: 5px; color: white; font-size: 12px; font-weight: 850; }
/* De sitemapkolommen zijn details-elementen: op een computer staan ze open en
   oogt de summary als de oude kopregel; op een telefoon klappen ze dicht en
   blijft de tekst gewoon in de bron (MOBIEL-SCHOUW.md punt 4, 15 augustus
   2026). Boven 1000 pixels is de kop geen knop. */
.footer-sitemap summary { margin-bottom: 5px; color: white; font-size: 12px; font-weight: 850; list-style: none; cursor: pointer; }
.footer-sitemap summary::-webkit-details-marker { display: none; }
@media (min-width: 1001px) { .footer-sitemap summary { pointer-events: none; } }
.footer-sitemap a { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.4; }
.footer-sitemap a:hover { color: white; }
.footer-statement img { width: 128px; height: auto; filter: brightness(0) invert(1); }
.footer-statement p { max-width: 360px; margin-top: 24px; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.55; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.footer-links div { display: flex; flex-direction: column; gap: 11px; }
.footer-links p { margin-bottom: 7px; color: white; font-size: 12px; font-weight: 850; }
.footer-links a { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.4; } .footer-links a:hover { color: white; }
.footer-bottom { padding: 24px 0 32px; border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; gap: 30px; color: rgba(255,255,255,.48); font-size: 10px; line-height: 1.7; }
.footer-bottom address { font-style: normal; } .footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .desktop-nav { display: none; } .mobile-menu { display: block; } .hero { min-height: auto; }
  /* Vanaf hier is aanraking de bediening: losse links krijgen een tikdoel van
     minstens 32 pixels (MOBIEL-SCHOUW.md punt 4, 15 augustus 2026). */
  .breadcrumbs a { display: inline-block; padding: 11px 7px; margin: 0 -3px; }
  .carousel-link-list a { display: inline-block; padding: 8px 0; }
  .footer-sitemap a { font-size: 14px; line-height: 1.5; padding: 7px 0; }
  .footer-sitemap summary { padding: 14px 0; margin-bottom: 0; }
  .footer-links a { font-size: 14px; line-height: 1.5; padding: 6px 0; }
  .mobile-menu summary { padding: 12px 18px; }
  .hero-grid, .section-heading, .faq-grid, .final-grid, .split-content, .form-layout, .admin-layout, .film-layout, .transcript, .footer-company { grid-template-columns: 1fr; }
  .hero-grid { gap: 36px; } .hero-media { min-height: 520px; }
  .section-intro, .final-grid > div:last-child { margin-left: 0; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metrics article:last-child { grid-column: span 2; border-top: 1px solid rgba(255,255,255,.16); }
  .card-grid, .card-grid.four { grid-template-columns: 1fr 1fr; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-sitemap { grid-template-columns: repeat(3,1fr); }
  .card-carousel { grid-auto-columns: calc((100% - 14px) / 2); }
  .vacancy-filters { grid-template-columns: repeat(2,1fr); }
  .admin-preview { position: static; }
  .film-copy { max-width: 720px; }
  .transcript { gap: 34px; }
  .footer-company { grid-template-columns: 1fr; gap: 0; }
  .footer-company > .footer-brand-block { border-radius: 30px 30px 0 0; }
  .footer-company > .footer-contact-panel { border-radius: 0 0 30px 30px; }
  .footer-square { display: none; }
}
@media (max-width: 620px) {
  .shell { width: min(calc(100% - 32px), var(--shell)); }
  .site-header { height: 78px; } .brand { width: 118px; height: 70px; } .brand img { width: 118px; }
  .hero { padding: 88px 0 40px; }
  /* Het kruimelpad blijft bedienbaar met de duim (MOBIEL-SCHOUW.md punt 4). */
  .breadcrumbs { margin-bottom: 12px; font-size: 13px; }
  .breadcrumbs a { display: inline-block; padding: 11px 7px; margin: 0 -3px; }
  /* De kop is op 20 augustus 2026 (WERKSESSIE-2 punt 2, fase B2) een maat
     kleiner gezet zodat het langste woord (Managementrapportages,
     schijnzelfstandigheid) op 320 en 390 pixels binnen het scherm past
     ZONDER afbreekstreepje: afbreken staat uit en de meetbrowser draagt
     geen afbreekwoordenboek, dus de maat moet het oplossen. hyphens: auto
     blijft als vangnet voor browsers die wel afbreken. */
  .hero h1 { font-size: clamp(32px, 9.6vw, 62px); line-height: .98; hyphens: auto; } .hero-lead, .hero-kort { font-size: 16px; }
  .section-heading h2, .faq-grid h2, .final-cta h2, .split-content h2, .form-layout h2 { hyphens: auto; }
  /* Eerste scherm: kop, één zin, beeld. De volgorde verandert alleen visueel;
     de bron blijft kop, alinea's, knoppen, beeld (MOBIEL-SCHOUW.md punt 2). */
  /* align-items: stretch (HERSTEL-BROWSERCONTROLE.md, 21 augustus 2026):
     in de flexkolom betekent het geerfde align-items: center ineens
     "centreer op breedte", en omdat het herobeeld absoluut in zijn kader
     staat werd figure.hero-media daardoor NUL pixels breed: het herobeeld
     was op elke telefoon onzichtbaar en het AI-bijschrift viel letter
     voor letter door de tekst (gemeten op 390 pixels: links 195, breedte
     0). Met stretch: links 16, breedte 358. */
  .hero-grid { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .hero-copy, .hero-lead { display: contents; }
  .hero-copy > .eyebrow { order: 1; align-self: flex-start; }
  .hero-copy > h1 { order: 2; margin: 16px 0 10px; }
  .hero-lead > p { order: 5; margin: 12px 0 0; }
  .hero-lead > p:first-child { order: 3; margin: 0 0 16px; }
  .hero-media { order: 4; margin: 4px 0; }
  .hero-copy > .button-row { order: 6; }
  .hero-copy > .brand-signal { order: 7; align-self: flex-start; margin-top: 26px; }
  /* MOBIEL-SCHOUW-2.md hoofdstuk 2 (21 augustus 2026): .hero-kort stond
     niet in dit rijtje, hield volgnummer 0 en belandde daardoor op een
     telefoon BOVEN de opmaat en de kop (gemeten op 390: kort op 137,
     opmaat op 289, kop op 340). Het korte antwoord hoort na de kop en
     voor het beeld; en als het er is, geldt volgnummer 3 alleen voor het
     korte antwoord zelf, zodat de rest van de tekst onder het beeld komt. */
  .hero-kort { order: 3; }
  .hero-kort + .hero-lead > p:first-child { order: 5; }
  .hero-media { min-height: 260px; border-radius: 26px; }
  .button-row { flex-direction: column; align-items: stretch; } .button { width: 100%; }
  .metrics-grid { grid-template-columns: 1fr; }
  .metrics article, .metrics article:last-child { grid-column: auto; min-height: 120px; padding: 26px 24px; border-right: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .metrics article:first-child { border-top: 0; }
  /* Sectieafstand is op mobiel geen desktopmaat meer: 116 wordt 56
     (MOBIEL-SCHOUW.md punt 3). */
  .content-section { padding: 56px 0; } .section-heading { gap: 18px; margin-bottom: 24px; }
  .section-heading h2, .faq-grid h2, .final-cta h2 { font-size: 43px; } .section-intro { font-size: 15px; }
  /* Kaartrasters worden op een telefoon een veegrij, net als de carrousel:
     de volgende kaart steekt in beeld en acht kaarten kosten geen acht
     schermen hoogte meer (MOBIEL-SCHOUW.md punt 3, 15 augustus 2026). */
  .card-grid, .card-grid.four { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 3px 0 14px; }
  .card-grid > * { scroll-snap-align: start; }
  .info-card { min-height: 260px; }
  .steps-list li { grid-template-columns: 42px 1fr; gap: 12px; } .steps-list li p { grid-column: 2; }
  .link-list { grid-template-columns: 1fr; } .link-list a:nth-child(n) { margin: 0; }
  .faq-grid { gap: 34px; } .faq-list summary { min-height: 60px; font-size: 16px; }
  .final-cta { padding: 48px 0; } .footer-top { padding: 44px 0 36px; gap: 44px; }
  .footer-links { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { display: block; } .footer-bottom p { margin-top: 14px; }
  .footer-links a { font-size: 14px; line-height: 1.5; padding: 6px 0; }
  .footer-brand-block, .footer-contact-panel { min-height: 0; padding: 28px; }
  .footer-brand-block { min-height: 280px; grid-template-rows: 78px 1fr; }
  .footer-brand-block::after { top: 106px; right: 28px; left: 28px; }
  .footer-brand-block img { width: 108px; }
  .footer-brand-block .eyebrow { max-width: 160px; }
  .footer-brand-block h2 { font-size: 40px; }
  /* Het contactpaneel op een telefoon in twee kolommen: vier korte
     contactingangen kosten dan twee rijen in plaats van vier schermen lucht
     (MOBIEL-SCHOUW.md punt 3, 15 augustus 2026). */
  .footer-contact-panel { grid-template-columns: 1fr 1fr; grid-template-rows: 64px auto auto auto; column-gap: 20px; }
  .footer-contact-panel > .eyebrow { grid-column: 1 / -1; }
  .footer-contact-panel > .footer-contact-link:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .footer-contact-panel > .footer-contact-link:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .footer-contact-panel > .footer-contact-link:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .footer-contact-panel > address { grid-column: 2; grid-row: 3; border-top: 1px solid rgba(255,255,255,.2); }
  .footer-company-meta { grid-column: 1 / -1; grid-row: 4; grid-template-columns: 1fr; }
  .footer-contact-link, .footer-contact-panel address { min-height: 80px; padding: 10px 0; }
  .footer-contact-link strong, .footer-contact-panel address strong { font-size: 14px; overflow-wrap: anywhere; }
  .model-grid, .model-columns { grid-template-columns: 1fr; }
  .model-card { min-height: 0; }
  .model-description { min-height: 0; }
  .film-player { border-radius: 22px; }
  .transcript-chapters summary { grid-template-columns: 28px 1fr auto; }
  .transcript-chapters details > div { padding-left: 44px; padding-right: 0; }
  /* De voettekstlinks van 12px in twee smalle kolommen naar één kolom per blok
     met 14px en meer regelafstand (MOBIEL-SCHOUW.md punt 4). Op een telefoon
     klappen de kolommen dicht: de veertig links blijven in de bron, maar de
     voettekst kost geen vier schermen meer (MOBIEL-SCHOUW.md punt 3 en 4). */
  .footer-sitemap { grid-template-columns: 1fr; gap: 0; padding: 24px 0 36px; }
  .footer-sitemap div { gap: 0; }
  .footer-sitemap p { font-size: 13px; }
  .footer-sitemap a { font-size: 14px; line-height: 1.5; padding: 7px 0; }
  .footer-vouw { border-bottom: 1px solid rgba(255,255,255,.14); }
  .footer-sitemap summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; font-size: 13px; }
  .footer-sitemap summary::after { content: '⌄'; color: rgba(255,255,255,.6); }
  .footer-vouw[open] summary::after { content: '⌃'; }
  .footer-vouw-links { padding-bottom: 12px; }
  /* De volgende kaart steekt voor een deel in beeld: zichtbaar dát er meer is,
     en vegen is de bediening; de pijltjes gaan weg (MOBIEL-SCHOUW.md punt 3 en 4). */
  .card-carousel { grid-auto-columns: 85%; }
  .carousel-controls { display: none; }
  /* De linkrij onder een carrousel wordt één regel met het overzichtsadres; de
     losse links blijven in de bron en staan in de kaarten zelf. */
  .carousel-link-list { margin-top: 8px; }
  .carousel-link-list a { display: none; }
  .carousel-link-list .carousel-overzicht { display: inline-block; padding: 10px 0; font-size: 14px; }
  .vacancy-filters { grid-template-columns: 1fr; }
  .vacancy-card { grid-template-columns: 1fr; }
  .search-form > div { grid-template-columns: 1fr; }
  .author-contact .shell { align-items: stretch; flex-direction: column; }
  .pagina-breedte { width: min(calc(100% - 32px), var(--shell)); }.kleuren,.kaarten { grid-template-columns: 1fr; }.voorbeeldnav { display: none; }.kop-1 { font-size: clamp(48px,15vw,66px); }.toestanden { align-items: stretch; flex-direction: column; }
}
/* B2-vangnet op smalle schermen (WERKSESSIE-2 punt 2, 20 augustus 2026):
   afbreken staat site-breed uit, behalve als laatste vangnet onder 620
   pixels, waar één lang woord (zoals Managementrapportages) anders breder is
   dan het scherm (MOBIEL-SCHOUW punt 1). Merknamen passen op die maat binnen
   de regel en breken dus ook daar niet: DataStudent is elf tekens en past op
   320 pixels ruim binnen de kopregel (gemeten op /over-ons). */
@media (max-width: 620px) {
  /* text-wrap: balance hyphenateert niet in Chromium; daarom staat de kop op
     smalle schermen op gewone regelafbreking, anders valt het langste woord
     alsnog van het scherm. */
  .hero h1, .section-heading h2, .faq-grid h2, .final-cta h2, .split-content h2, .form-layout h2, .info-card h3 { hyphens: auto; text-wrap: wrap; }
  /* HERSTEL-21-AUG.md punt 2: de sectiekoppen op een bedrijfsprofiel dragen
     een merknaam ("Over FrieslandCampina.") en merknamen breken nooit
     (WERKSESSIE-2 punt 2). Afbreken staat hier dus uit en de kopmaat is
     Wilco's stap 2 (de opmaak aanpassen): klein genoeg om de langste
     bedrijfsnaam op 320 pixels heel te laten. */
  #over .section-heading h2, #werk .section-heading h2 { font-size: clamp(28px, 8.6vw, 44px); hyphens: none; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Artikelformat van de oude site (masteropdracht 1.8, 17 augustus 2026):
   metadataregel, inhoudsopgave, lijsten in artikelen, labels, het auteursblok
   met portret en de soort- en labelfilters op het blogoverzicht. Alleen
   bestaande tekststijlen en tinten; geen nieuwe kleuren. */
.artikel-meta { font-size: 15px; opacity: .75; }
.prose-block ul { margin: 0 0 22px; padding-left: 22px; }
.prose-block ul li { margin: 8px 0; }
.toc-lijst { list-style: none; padding-left: 0; }
.toc-lijst li { margin: 6px 0; }
.toc-lijst a { font-weight: 650; }
.auteur-blok { display: flex; gap: 22px; align-items: center; margin: 0 0 18px; }
.auteur-blok img { width: 110px; height: auto; border-radius: 12px; }

/* De vijf blogsoorten met kleur (17 augustus 2026; het kader om de kaart is
   op 18 augustus 2026 weer verwijderd, zie LOGBOEK.md). De kleur van het
   soort zit op twee plekken en nergens anders: op de smalle accentbalk
   bovenin de kaart en op het soortlabel dat er linksboven bij staat. Allebei
   dezelfde kleur, zodat balk en label één geheel vormen. Geen kader om de
   kaart, geen gekleurde rand, geen gekleurde achtergrond; de kaart zelf is de
   gewone informatiekaart. De naam van het soort staat er altijd als tekst
   bij, in beide talen: kleur is nooit de enige aanwijzing. */
.soort-kleur { --soort: var(--kleur-blauw-midden); }
.soort-blog { --soort: var(--soort-blog); }
.soort-externe-blog { --soort: var(--soort-externe-blog); }
.soort-artikel { --soort: var(--soort-artikel); }
.soort-feiten { --soort: var(--soort-feiten); }
.soort-nieuws { --soort: var(--soort-nieuws); }
.kaart-soort { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 13px; font-weight: 750; margin-bottom: 10px; background: var(--soort, var(--kleur-blauw-midden)); color: var(--ink); }
.soort-artikel .kaart-soort, .kaart-soort.soort-artikel { color: var(--white); }
.blogkaart .kaart-soort { margin: 0 0 8px; }
.blogkaart .info-card { border-top-color: var(--soort); }
/* Gelijke kaarten (18 augustus 2026). Elke blogkaart draagt hetzelfde: beeld,
   soortlabel, titel, samenvatting en de regel met soort, datum en leestijd.
   De kaart vult de hele rasterrij, zodat alle kaarten in een rij even hoog
   zijn; titel en samenvatting krijgen een vast aantal regels met een nette
   afkapping, en de regel onderaan staat bij elke kaart op dezelfde hoogte
   (die stond al op margin-top:auto). */
/* align-items:flex-start, anders rekt het soortlabel als flexkind over de
   volle breedte uit en is het geen label meer maar een balk (gemeten
   18 augustus 2026). */
.blogkaart { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.blogkaart .info-card { flex: 1; width: 100%; }
/* De pijl staat normaal rechtsboven in de kaart; met een tegelbeeld ligt hij
   dan over het beeld. Op een blogkaart staat hij rechtsonder, naast de regel
   met soort, datum en leestijd. */
.blogkaart .info-card-visual .card-arrow { top: auto; bottom: 20px; right: 20px; }
/* Drie regels titel en vier regels samenvatting, en die hoogte staat ook vast
   als de tekst korter is. Alleen een maximum maakt de kaarten per rij gelijk
   maar de rijen onderling niet (gemeten 18 augustus 2026: 632 tegen 678 px op
   1440). Met een vaste hoogte is elke kaart even hoog, waar hij ook staat. */
.blogkaart .info-card h3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 18px 0 12px; min-height: calc(3 * 0.98em); }
.blogkaart .info-card p { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(4 * 1.55em); }
/* Met een tegelbeeld staat het nummer op het beeld en niet erboven; de kop
   hoeft dan niet meer de ruimte voor dat nummer vrij te houden. */
.blogkaart .info-card-visual .info-card-content { padding-top: 22px; }
/* Op de artikelpagina zelf staat het soort in de heropmaat; het bolletje
   ervoor draagt dezelfde kleur als de balk op de kaarten. */
.hero.soort-kleur .eyebrow:before { background: var(--soort); }
.soortfilters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.soortfilters button { min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 15px; font-weight: 720; cursor: pointer; }
.soortfilters button[aria-pressed="true"] { background: var(--soort); }
/* Op rood en op het blauwgrijs van "Alle soorten" haalt inkt de 4,5:1 niet
   (9,05:1 respectievelijk 4,82:1 met wit, tegen 2,72:1 met inkt op blauwgrijs;
   gemeten 18 augustus 2026). */
.soortfilters button.soort-artikel[aria-pressed="true"], .soortfilters button.soort-alle[aria-pressed="true"] { color: var(--white); }
.soortfilters button[disabled] { opacity: .45; cursor: default; }
.labelfilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.labelfilters button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.labelfilters button[aria-pressed="true"] { background: var(--pale); border-color: var(--ink); }
.filter-leeg { margin: 18px 0; font-weight: 650; }
/* Lange samenstellingen zoals managementrapportages breken met een
   afbreekstreepje in plaats van buiten kaart of titel te vallen
   (VOORBEELDEN.md, 17 augustus 2026). */
/* Afbreekstreepjes (WERKSESSIE-2 punt 2, fase B2): woorden worden nergens
   meer midden in afgebroken. Merknamen (DataStudent, NewData en de merken)
   mogen nooit gesplitst worden; daarom staat afbreken uit en vangt een
   kleinere kopmaat in de vierkaartsrij de lange woorden op in plaats van een
   streepje. overflow-wrap blijft als laatste vangnet tegen horizontale
   overloop, maar mag in de praktijk niets meer te doen hebben. */
.info-card h3, .carousel-link-list a, .hero h1, .kop-1 { overflow-wrap: break-word; hyphens: none; }
body { hyphens: none; }
/* HERSTEL-21-AUG.md punt 2 (21 augustus 2026): op /en/bedrijven/
   frieslandcampina duwde "opleidingsprogramma's" de kolom 13 pixels
   breder dan een scherm van 320. De volgorde van Wilco blijft (eerst een
   ander woord, dan de opmaak, pas als laatste afbreken), maar de lopende
   tekst en de tabelcellen krijgen het nette vangnet: hyphens: auto breekt
   een echt woord op een lettergreep (lang="nl-NL"/"en" staat op elke
   pagina), en overflow-wrap: anywhere is de laatste rem als zelfs dat niet
   kan. Koppen doen boven 620 pixels NIET mee: daar staan merknamen, daar
   is ruimte, en merknamen breken nooit (WERKSESSIE-2 punt 2). Op smalle
   schermen houden de koppen hun bestaande vangnet (hyphens: auto in de
   620-query hieronder): merknamen passen daar gemeten binnen de kopregel
   en breken dus toch nooit; een eerdere poging om ook dat vangnet op none
   te zetten maakte /inkoop 136 pixels breder dan een scherm van 320. */
p, li, dd, dt, figcaption, td, th { overflow-wrap: anywhere; hyphens: auto; }
h1, h2, h3, h4, h5, h6 { hyphens: none; }
/* De vierkaartsrij gaat onder 1240 pixels naar twee nette kolommen: vier
   smalle kaarten naast elkaar laten het langste woord (Participatiemaat-
   schappijen) nooit passen zonder afbreken (WERKSESSIE-2 punt 2 en 57). */
.card-grid.four .info-card h3 { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.08; }
@media (min-width: 621px) and (max-width: 1240px) { .card-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  /* Op één kolom van ongeveer 190px passen FrieslandCampina,
     recruitmentpartnerschap en schijnzelfstandigheid alleen met een
     kleinere kop (gemeten 21 augustus 2026). */
  .info-card h3 { font-size: 23px; }
  .card-grid.four .info-card h3 { font-size: 17px; }
  .blogkaart .info-card h3 { font-size: 19px; }
}
/* Filmpjes op een beeldplek met uitklapbaar transcript (deel B4). */
.hero-media video { width: 100%; height: auto; border-radius: 18px; display: block; }
.transcript-vouw { margin-top: 10px; font-size: 14px; }
.transcript-vouw summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.transcript-vouw p { margin: 8px 0 0; }

/* ── Merkronde, 19 augustus 2026 ──────────────────────────────────────────
   Nieuwe vormen voor de homepage en de merkpagina's (OPDRACHT-MERKRONDE.md
   2.2 en 2.6). Gedocumenteerd omdat de bestaande bibliotheek deze vormen niet
   leverde: een tekstdrieluik zonder kaders, een rij smalle blokken zonder
   schaduwkaders, de vier merkkleurvlakken in HTML, en het scanwiel met de
   vijf dimensies. Alle kleuren komen uit tokens.css. */

/* Drie korte tekstblokken naast elkaar, zonder kaders (sectie "waarom"). */
.drieluik { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 34px; }
.drieluik h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.2; letter-spacing: -.02em; }
.drieluik p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.drieluik-slot { margin-top: 30px; font-weight: 650; }

/* Rij van vier smalle blokken met kop, één regel en een link; bewust zonder
   kaartkaders zodat hij verschilt van de kaartsecties (sectie
   samenwerkingsvormen). */
.vormenrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 30px; }
.vormenrij h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
.vormenrij p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.vormenrij a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.vormenrij-slot { margin-top: 26px; font-weight: 650; }

/* De vier merkkleurvlakken in HTML (2.6): tekst, geen plaatje. Elk vlak
   draagt de merkkleur als bovenrand en accent. */
.merkvlakken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.merkvlak { display: flex; flex-direction: column; border-radius: 24px; padding: 24px 22px 20px; background: var(--off); border-top: 10px solid var(--accent); }
.tone-pale .merkvlak { background: white; }
.merkvlak h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -.02em; }
.merkvlak p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.merkvlak .merkvlak-tarief { margin-top: auto; font-size: 13px; font-weight: 800; }
.merkvlak a.merkvlak-link { margin-top: 10px; display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
/* Uitlijning van de merkvlakken (21 augustus 2026): tarief en link stonden
   niet op één lijn zodra een kaarttekst langer was (Squad) of het tarief
   ontbrak (Network). Zelfde oplossing als de info-cards: de vier sporen
   (kop, tekst, tarief, link) komen uit het ouderraster, zodat elke kaart in
   de rij dezelfde spoorhoogtes deelt. Network heeft geen tariefregel; zijn
   derde spoor blijft leeg en de link staat toch op de linkregel. */
.merkvlakken > .merkvlak { grid-row: span 4; }
@supports (grid-template-rows: subgrid) {
  .merkvlakken { row-gap: 0; }
  .merkvlakken > .merkvlak { display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; margin-bottom: 14px; min-width: 0; }
  .merkvlakken > .merkvlak > * { min-width: 0; }
  .merkvlak h3 { grid-row: 1; }
  .merkvlak p:not(.merkvlak-tarief) { grid-row: 2; }
  .merkvlak .merkvlak-tarief { grid-row: 3; margin-top: 0; align-self: start; }
  .merkvlak a.merkvlak-link { grid-row: 4; align-self: end; justify-self: start; }
}

/* Het scanwiel (2.6): de vijf dimensies van de Bedrijfsscan als HTML. De
   dimensies staan als echte tekst in een lijst; het wiel is de vormgeving. */
.scanwiel-layout { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 44px; align-items: center; margin-top: 34px; }
.scanwiel { position: relative; aspect-ratio: 1; }
/* WERKSESSIE-2 punt 5 (fase B5): de vijf bollen staan als regelmatige
   vijfhoek om de kern en raken de kern alle vijf precies. Kern: middellijn
   38%, middelpunt (50%, 53%). Bol: middellijn 30%. Afstand middelpunt tot
   middelpunt: 19% + 15% = 34%, voor alle vijf gelijk. De posities hieronder
   zijn daaruit berekend (hoeken -90, -18, 54, 126 en 198 graden). */
.scanwiel-kern { position: absolute; inset: 34% 31% 28%; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--blue); color: white; font-size: 13px; font-weight: 800; padding: 10px; }
.scanwiel ul { list-style: none; margin: 0; padding: 0; }
/* De labels passen in de bol op elke wielmaat (OPDRACHT-AFRONDING punt 14).
   Een container query brak het wiel (breedte nul, gemeten 21 augustus 2026);
   daarom een gewone kleinere maat op smalle wielen. Nooit tekst buiten de bol. */
.scanwiel li { position: absolute; width: 30%; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border-radius: 50%; background: var(--off); border: 2px solid var(--line); font-size: 13px; font-weight: 750; padding: 4px; }
@media (max-width: 1000px) { .scanwiel li { font-size: 11px; } }
@media (max-width: 480px) { .scanwiel li { font-size: 10px; letter-spacing: -0.01em; } }
.tone-pale .scanwiel li { background: white; }
.scanwiel li:nth-child(1) { top: 4%; left: 35%; border-color: var(--student); }
.scanwiel li:nth-child(2) { top: 27.5%; left: 67.3%; border-color: var(--search); }
.scanwiel li:nth-child(3) { top: 65.5%; left: 55%; border-color: var(--squad); }
.scanwiel li:nth-child(4) { top: 65.5%; left: 15%; border-color: var(--network); }
.scanwiel li:nth-child(5) { top: 27.5%; left: 2.7%; border-color: var(--blue-2); }

/* De datastroomplaat op /producten/dataplatform (2.6): de stroom van bron
   naar uitvoer als tekst, met pijlen uit CSS. Geen plaatje. */
.datastroom { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: 14px; align-items: stretch; margin-top: 34px; }
.datastroom-stap { border: 2px solid var(--line); border-radius: 20px; padding: 18px; background: var(--off); }
.tone-pale .datastroom-stap { background: white; }
.datastroom-stap h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -.02em; }
.datastroom-stap p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
.datastroom-pijl { display: grid; place-items: center; font-size: 22px; font-weight: 800; color: var(--blue-2); }
@media (max-width: 1000px) {
  .datastroom { grid-template-columns: 1fr; }
  .datastroom-pijl { transform: rotate(90deg); }
}

/* Citaat op een casepagina (2.4): het kaartcitaat uit de casebron. */
.prose-block blockquote { margin: 0; padding-left: 22px; border-left: 4px solid var(--accent, var(--blue-2)); font-size: 19px; font-weight: 650; font-style: italic; }

/* De keuzeplek in de cijferbalk (/voor-professionals): geen getal maar een
   keuze met routelinks. */
.metric-keuze-kop { font-size: 17px; font-weight: 850; letter-spacing: -.02em; }
.metric-keuze-links { margin-top: 6px; font-size: 14px; }
.metric-keuze-links a { display: inline-block; padding: 7px 0; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }

/* Beeld in een sectie (2.6): de aangeleverde voorbeeldbeelden met de
   AI-melding en de regel dat de cijfers fictief zijn, als zichtbare tekst. */
.sectie-beeld { margin-top: 34px; }
.sectie-beeld img { width: 100%; height: auto; display: block; border-radius: 28px; border: 1px solid var(--line); }
.sectie-beeld figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.sectie-beeld figcaption strong { font-weight: 800; }

/* Knoppenregel onder een sectie-inhoud. */
.sectie-knopregel { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* De mensen op de contactpagina (merkronde 2.5): naam, foto en waarvoor
   iemand benaderd kan worden. Alleen gepubliceerde personen. */
.personen { display: grid; grid-template-columns: repeat(3, minmax(220px, 320px)); gap: 14px; margin-top: 34px; }
.persoon-kaart { border-radius: 28px; overflow: hidden; background: var(--off); border-top: 7px solid var(--accent, var(--blue-2)); }
.tone-pale .persoon-kaart { background: white; }
.persoon-kaart img { width: 100%; height: auto; display: block; }
.persoon-kaart .persoon-tekst { padding: 18px 20px 20px; }
.persoon-kaart h3 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.persoon-kaart .persoon-rol { font-size: 13px; font-weight: 800; margin: 0 0 8px; }
.persoon-kaart p { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 1000px) { .personen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .personen { grid-template-columns: 1fr; } }

/* De contactregel onder de knoppen in de slotoproep (sectie 11). */
.final-cta .button-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-naregel { margin-top: 18px; font-size: 14px; font-weight: 650; opacity: .85; }

/* Compacte kaartvariant voor rijen met vier korte kaarten (sectie voor wie). */
.card-grid.four .info-card.compact { min-height: 200px; }
.info-card.compact .info-card-content { padding: 22px; }

@media (max-width: 1000px) {
  .drieluik, .vormenrij { grid-template-columns: 1fr 1fr; }
  .merkvlakken { grid-template-columns: 1fr 1fr; }
  .scanwiel-layout { grid-template-columns: 1fr; }
  /* max-width met aspect-ratio maakte het wiel hier 0 bij 0 pixels (gemeten
     21 augustus 2026): een expliciete breedte houdt het wiel zichtbaar. */
  .scanwiel { width: min(100%, 360px); margin: 0 auto; }
}
@media (max-width: 620px) {
  .drieluik, .vormenrij { grid-template-columns: 1fr; }
  .merkvlakken { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 85%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 14px; }
  .merkvlakken > * { scroll-snap-align: start; }
  /* In de carrousel staan alle kaarten in één rij; de vier sporen worden
     expliciet, net als bij .card-carousel hierboven. */
  .merkvlakken { grid-template-rows: repeat(4, auto); }
  .merkvlakken > .merkvlak { grid-row: 1 / -1; }
}